From aba38e9176d24fbf7237edd3f907b1d5cf5e2885 Mon Sep 17 00:00:00 2001 From: C4 Patino Date: Sat, 16 Apr 2022 17:59:10 -0500 Subject: [PATCH] Separated components into controllers and dummies --- .../src/components/{utils => }/BaseLink.jsx | 0 .../{BitsToCoin.jsx => BitsToCoinBase.jsx} | 50 +-------------- client/src/components/MainPage.jsx | 2 +- .../{NPCUser.jsx => NPCUserBase.jsx} | 19 +----- .../components/{Navbar.jsx => NavbarBase.jsx} | 57 +++-------------- .../src/components/{utils => }/PageBase.jsx | 0 .../src/components/{utils => }/StackItem.jsx | 0 .../{UserDisplay.jsx => UserDisplayBase.jsx} | 38 +---------- client/src/controllers/BitsToCoin.jsx | 60 ++++++++++++++++++ client/src/controllers/NPCUser.jsx | 24 +++++++ client/src/controllers/Navbar.jsx | 63 +++++++++++++++++++ client/src/controllers/UserDisplay.jsx | 46 ++++++++++++++ 12 files changed, 208 insertions(+), 151 deletions(-) rename client/src/components/{utils => }/BaseLink.jsx (100%) rename client/src/components/{BitsToCoin.jsx => BitsToCoinBase.jsx} (57%) rename client/src/components/{NPCUser.jsx => NPCUserBase.jsx} (82%) rename client/src/components/{Navbar.jsx => NavbarBase.jsx} (78%) rename client/src/components/{utils => }/PageBase.jsx (100%) rename client/src/components/{utils => }/StackItem.jsx (100%) rename client/src/components/{UserDisplay.jsx => UserDisplayBase.jsx} (77%) create mode 100644 client/src/controllers/BitsToCoin.jsx create mode 100644 client/src/controllers/NPCUser.jsx create mode 100644 client/src/controllers/Navbar.jsx create mode 100644 client/src/controllers/UserDisplay.jsx diff --git a/client/src/components/utils/BaseLink.jsx b/client/src/components/BaseLink.jsx similarity index 100% rename from client/src/components/utils/BaseLink.jsx rename to client/src/components/BaseLink.jsx diff --git a/client/src/components/BitsToCoin.jsx b/client/src/components/BitsToCoinBase.jsx similarity index 57% rename from client/src/components/BitsToCoin.jsx rename to client/src/components/BitsToCoinBase.jsx index d76f588..6fdfee8 100644 --- a/client/src/components/BitsToCoin.jsx +++ b/client/src/components/BitsToCoinBase.jsx @@ -13,55 +13,9 @@ import { import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import { useTheme } from '@mui/material/styles'; -import { getAuctions } from '../utils/getData'; - -function BitsToCoin() { +function BitsToCoinBase(bitAuctions, getBitAuctions) { const theme = useTheme(); - const [bitAuctions, setBitAuctions] = useState([]); - - useEffect(() => getBitAuctions(), []); - - async function getBitAuctions() { - const bits = await fetch('../data.json').then((response) => - response.json() - ); - - const auctions = await getAuctions().then(async (auctions) => { - const bitsItems = auctions.filter((auction) => - Object.keys(bits).includes(auction.item_name) - ); - - return groupBy(bitsItems, 'item_name'); - }); - - const data = Object.keys(auctions).reduce((acc, key) => { - const prices = auctions[key] - .map(({ starting_bid }) => starting_bid) - .sort((a, b) => a - b); - - const effectiveLength = prices.length > 10 ? 10 : prices.length; - - const averagePrice = Math.round( - prices - .slice(0, effectiveLength) - .reduce((acc, price) => acc + price, 0) / effectiveLength - ); - - acc.push({ - name: key, - lowestBid: prices[0], - count: prices.length, - bitsToCoin: Math.round(prices[0] / bits[key].cost), - averagePrice, - }); - - return acc; - }, []); - - setBitAuctions(() => data.sort((a, b) => b.bitsToCoin - a.bitsToCoin)); - } - return ( handleSubmit(), []); function handleSearchChange(e) { setSearch(() => e.target.value); } - async function handleSubmit(e) { - e?.preventDefault(); - - const items = await getItems(); - - const data = items - .filter((item) => item.name === search) - .map((item) => item.npc_sell_price); - - setItemData(() => data[0]); - } - return ( ({ ...initial, [e.target.name]: e.target.value })); - } - - function handleUsernameChange(e) { - setUsername(() => e.target.value); - } - function handleMenuOpen(e) { setMenus(() => ({ anchorEl: e.target, open: e.target.name })); } @@ -64,39 +58,6 @@ function Navbar(props) { setMenus(() => ({ anchorEl: null, open: '' })); } - async function handleSubmit(e) { - e.preventDefault(); - - await axiosGet(`https://api.ashcon.app/mojang/v2/user/${username}`) - .then(async (res) => { - setUser((initial) => ({ - ...initial, - uuid: res.data.uuid, - username, - })); - - return await axiosGet( - `https://api.hypixel.net/skyblock/profiles`, - { - uuid: res.data.uuid, - key: process.env.REACT_APP_API_KEY, - } - ); - }) - .then((res) => { - setUser((initial) => ({ ...initial, profile: '' })); - setProfiles([]); - const data = res.data.profiles; - if (data) { - const profiles = res.data.profiles.map((profile) => { - const { profile_id, cute_name } = profile; - return { profileID: profile_id, cuteName: cute_name }; - }); - setProfiles(() => profiles); - } - }); - } - return ( @@ -225,4 +186,4 @@ function Navbar(props) { ); } -export default Navbar; +export default NavbarBase; diff --git a/client/src/components/utils/PageBase.jsx b/client/src/components/PageBase.jsx similarity index 100% rename from client/src/components/utils/PageBase.jsx rename to client/src/components/PageBase.jsx diff --git a/client/src/components/utils/StackItem.jsx b/client/src/components/StackItem.jsx similarity index 100% rename from client/src/components/utils/StackItem.jsx rename to client/src/components/StackItem.jsx diff --git a/client/src/components/UserDisplay.jsx b/client/src/components/UserDisplayBase.jsx similarity index 77% rename from client/src/components/UserDisplay.jsx rename to client/src/components/UserDisplayBase.jsx index c055235..9ca5d6c 100644 --- a/client/src/components/UserDisplay.jsx +++ b/client/src/components/UserDisplayBase.jsx @@ -12,41 +12,7 @@ import { } from '@mui/material'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import { getAuctions, getUserForgeData } from '../utils/getData'; - -function UserDisplay({ user }) { - const [forges, setForges] = useState([]); - const [auctions, setAuctions] = useState([]); - - useEffect(() => { - forgeData(); - auctionData(); - }, []); - - async function forgeData() { - const data = await getUserForgeData(user.username, user.profileID); - - setForges(() => - data?.processes - ? data.processes - : 'You have no forges currently running' - ); - } - - async function auctionData() { - const data = await getAuctions(); - - const auctions = data.filter( - (auction) => auction.profile_id === user.profileID - ); - - setAuctions(() => - auctions.length > 0 - ? auctions - : 'You have no auctions currently running' - ); - } - +function UserDisplayBase({ forges, auctions, forgeData, auctionData }) { return ( @@ -117,4 +83,4 @@ function UserDisplay({ user }) { ); } -export default UserDisplay; +export default UserDisplayBase; diff --git a/client/src/controllers/BitsToCoin.jsx b/client/src/controllers/BitsToCoin.jsx new file mode 100644 index 0000000..4ba3d4d --- /dev/null +++ b/client/src/controllers/BitsToCoin.jsx @@ -0,0 +1,60 @@ +import React, { useState, useEffect } from 'react'; +import { groupBy } from 'lodash'; + +import { getAuctions } from '../utils/getData'; +import BitsToCoinBase from '../components/BitsToCoinBase'; + +function BitsToCoin() { + const [bitAuctions, setBitAuctions] = useState([]); + + useEffect(getBitAuctions, []); + + async function getBitAuctions() { + const bits = await fetch('../data.json').then((response) => + response.json() + ); + + const auctions = await getAuctions().then(async (auctions) => { + const bitsItems = auctions.filter((auction) => + Object.keys(bits).includes(auction.item_name) + ); + + return groupBy(bitsItems, 'item_name'); + }); + + const data = Object.keys(auctions).reduce((acc, key) => { + const prices = auctions[key] + .map(({ starting_bid }) => starting_bid) + .sort((a, b) => a - b); + + const effectiveLength = prices.length > 10 ? 10 : prices.length; + + const averagePrice = Math.round( + prices + .slice(0, effectiveLength) + .reduce((acc, price) => acc + price, 0) / effectiveLength + ); + + acc.push({ + name: key, + lowestBid: prices[0], + count: prices.length, + bitsToCoin: Math.round(prices[0] / bits[key].cost), + averagePrice, + }); + + return acc; + }, []); + + setBitAuctions(() => data.sort((a, b) => b.bitsToCoin - a.bitsToCoin)); + } + + return ( + + ); +} + +export default BitsToCoin; diff --git a/client/src/controllers/NPCUser.jsx b/client/src/controllers/NPCUser.jsx new file mode 100644 index 0000000..a83d61d --- /dev/null +++ b/client/src/controllers/NPCUser.jsx @@ -0,0 +1,24 @@ +import React, { useState, useEffect } from 'react'; + +import NPCUserBase from '../components/NPCUserBase'; +import { getItems } from '../utils/getData'; + +function NPCUser() { + const [itemData, setItemData] = useState([]); + + async function handleSubmit(e) { + e.preventDefault(); + + const items = await getItems(); + + const data = items + .filter((item) => item.name === search) + .map((item) => item.npc_sell_price); + + setItemData(() => data[0]); + } + + return ; +} + +export default NPCUser; diff --git a/client/src/controllers/Navbar.jsx b/client/src/controllers/Navbar.jsx new file mode 100644 index 0000000..5853f49 --- /dev/null +++ b/client/src/controllers/Navbar.jsx @@ -0,0 +1,63 @@ +import React, { useState } from 'react'; + +import axiosGet from '../utils/axiosGet'; +import NavbarBase from '../components/NavbarBase'; + +function Navbar(props) { + const [user, setUser] = props.user; + const [username, setUsername] = useState(''); + + const [profiles, setProfiles] = useState([]); + + function handleProfileChange(e) { + setUser((initial) => ({ ...initial, [e.target.name]: e.target.value })); + } + + function handleUsernameChange(e) { + setUsername(() => e.target.value); + } + + async function handleSubmit(e) { + e.preventDefault(); + + await axiosGet(`https://api.ashcon.app/mojang/v2/user/${username}`) + .then(async (res) => { + setUser((initial) => ({ + ...initial, + uuid: res.data.uuid, + username, + })); + + return await axiosGet( + `https://api.hypixel.net/skyblock/profiles`, + { + uuid: res.data.uuid, + key: process.env.REACT_APP_API_KEY, + } + ); + }) + .then((res) => { + setUser((initial) => ({ ...initial, profile: '' })); + setProfiles([]); + const data = res.data.profiles; + if (data) { + const profiles = res.data.profiles.map((profile) => { + const { profile_id, cute_name } = profile; + return { profileID: profile_id, cuteName: cute_name }; + }); + setProfiles(() => profiles); + } + }); + } + + return ( + + ); +} + +export default Navbar; diff --git a/client/src/controllers/UserDisplay.jsx b/client/src/controllers/UserDisplay.jsx new file mode 100644 index 0000000..73c41c6 --- /dev/null +++ b/client/src/controllers/UserDisplay.jsx @@ -0,0 +1,46 @@ +import React, { useState, useEffect } from 'react'; + +import { getAuctions, getUserForgeData } from '../utils/getData'; + +function UserDisplay({ user }) { + const [forges, setForges] = useState([]); + const [auctions, setAuctions] = useState([]); + + useEffect(forgeData, []); + useEffect(auctionData, []); + + async function forgeData() { + const data = await getUserForgeData(user.username, user.profileID); + + setForges(() => + data?.processes + ? data.processes + : 'You have no forges currently running' + ); + } + + async function auctionData() { + const data = await getAuctions(); + + const auctions = data.filter( + (auction) => auction.profile_id === user.profileID + ); + + setAuctions(() => + auctions.length > 0 + ? auctions + : 'You have no auctions currently running' + ); + } + + return ( + + ); +} + +export default UserDisplay;