Separated components into controllers and dummies
This commit is contained in:
parent
ca9648dc41
commit
aba38e9176
12 changed files with 209 additions and 152 deletions
|
|
@ -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 (
|
||||
<Paper
|
||||
sx={{
|
||||
|
|
@ -106,4 +60,4 @@ function BitsToCoin() {
|
|||
);
|
||||
}
|
||||
|
||||
export default BitsToCoin;
|
||||
export default BitsToCoinBase;
|
||||
|
|
@ -3,7 +3,7 @@ import React from 'react';
|
|||
import { Paper, Typography, Box } from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
import UserDisplay from './UserDisplay';
|
||||
import UserDisplay from '../controllers/UserDisplay';
|
||||
|
||||
function MainPage({ user }) {
|
||||
const theme = useTheme();
|
||||
|
|
|
|||
|
|
@ -10,32 +10,15 @@ import {
|
|||
} from '@mui/material';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
import { getItems } from '../utils/getData';
|
||||
|
||||
function NPCUser() {
|
||||
function NPCUser({ handleSubmit, itemData }) {
|
||||
const theme = useTheme();
|
||||
|
||||
const [search, setSearch] = useState('');
|
||||
const [itemData, setItemData] = useState([]);
|
||||
|
||||
useEffect(() => 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 (
|
||||
<Paper
|
||||
sx={{
|
||||
|
|
@ -19,16 +19,18 @@ import {
|
|||
} from '@mui/material';
|
||||
import { ThemeProvider, createTheme } from '@mui/material/styles';
|
||||
|
||||
import axiosGet from '../utils/axiosGet';
|
||||
import PageBase from './utils/PageBase';
|
||||
import BaseLink from './utils/BaseLink';
|
||||
import BaseLink from './BaseLink';
|
||||
|
||||
function Navbar(props) {
|
||||
const [user, setUser] = props.user;
|
||||
const [username, setUsername] = useState('');
|
||||
function NavbarBase({
|
||||
user,
|
||||
profiles,
|
||||
handleUsernameChange,
|
||||
handleProfileChange,
|
||||
handleSubmit,
|
||||
}) {
|
||||
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
|
||||
|
||||
const [profiles, setProfiles] = useState([]);
|
||||
const [menu, setMenus] = useState({
|
||||
anchorEl: null,
|
||||
open: '',
|
||||
|
|
@ -48,14 +50,6 @@ function Navbar(props) {
|
|||
},
|
||||
});
|
||||
|
||||
function handleProfileChange(e) {
|
||||
setUser((initial) => ({ ...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 (
|
||||
<ThemeProvider theme={darkTheme}>
|
||||
<CssBaseline />
|
||||
|
|
@ -225,4 +186,4 @@ function Navbar(props) {
|
|||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
export default NavbarBase;
|
||||
|
|
@ -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 (
|
||||
<Grid container spacing={2} sx={{ flexGrow: 1, height: '85vh' }}>
|
||||
<Grid item xs={6}>
|
||||
|
|
@ -117,4 +83,4 @@ function UserDisplay({ user }) {
|
|||
);
|
||||
}
|
||||
|
||||
export default UserDisplay;
|
||||
export default UserDisplayBase;
|
||||
60
client/src/controllers/BitsToCoin.jsx
Normal file
60
client/src/controllers/BitsToCoin.jsx
Normal file
|
|
@ -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 (
|
||||
<BitsToCoinBase
|
||||
bitAuctions={bitAuctions}
|
||||
getBitAuctions={getBitAuctions}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default BitsToCoin;
|
||||
24
client/src/controllers/NPCUser.jsx
Normal file
24
client/src/controllers/NPCUser.jsx
Normal file
|
|
@ -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 <NPCUserBase handleSubmit={handleSubmit} itemData={itemData} />;
|
||||
}
|
||||
|
||||
export default NPCUser;
|
||||
63
client/src/controllers/Navbar.jsx
Normal file
63
client/src/controllers/Navbar.jsx
Normal file
|
|
@ -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 (
|
||||
<NavbarBase
|
||||
user={user}
|
||||
profiles={profiles}
|
||||
handleUsernameChange={handleUsernameChange}
|
||||
handleProfileChange={handleProfileChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default Navbar;
|
||||
46
client/src/controllers/UserDisplay.jsx
Normal file
46
client/src/controllers/UserDisplay.jsx
Normal file
|
|
@ -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 (
|
||||
<UserDisplayBase
|
||||
forges={forges}
|
||||
auctions={auctions}
|
||||
forgeData={forgeData}
|
||||
auctionData={auctionData}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserDisplay;
|
||||
Reference in a new issue