Separated components into controllers and dummies

This commit is contained in:
Ceferino Patino 2022-04-16 17:59:10 -05:00
commit aba38e9176
12 changed files with 209 additions and 152 deletions

View file

@ -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;

View file

@ -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();

View file

@ -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={{

View file

@ -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;

View file

@ -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;

View 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;

View 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;

View 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;

View 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;