import {Badge, Button, Heading, Icon, majorScale, Pane} from 'evergreen-ui' import {Observer} from "mobx-react-lite"; import React, {useEffect} from 'react'; import './App.css'; import {ContentPage} from "./components/ContentPage"; import {serverInfoContext} from "./stores/ServerInfoStore"; import {bytesToSize} from "./util"; const App = () => { const serverInfoStore = React.useContext(serverInfoContext); useEffect(() => { serverInfoStore.loadServerInfo(); serverInfoStore.loadDeletedSizes(); }); const onClickServerLink = () => { window.open(serverInfoStore.serverUrl, '_blank'); } return ( <Pane> <Pane background="tint2" borderRadius={0} elevation={1} border="muted" padding={majorScale(2)} display={"flex"} alignItems={"center"} justifyContent={"center"} > <Pane flex={1}> <Heading > Cleanarr </Heading> </Pane> <Observer> {() => ( <Pane display="flex" alignItems="center" justifyContent={"center"}> <Pane marginRight={20}> <Badge color="blue"> Lifetime Space Saved: {Object.keys(serverInfoStore.deletedSizes).map((key) => { return ( <span className={"deleted-size"} key={key}>{key}: {bytesToSize(serverInfoStore.deletedSizes[key])}</span> ) })} </Badge> </Pane> </Pane> )} </Observer> <Observer> {() => ( <> {serverInfoStore.serverUrl && ( <Button onClick={onClickServerLink}> {serverInfoStore.serverName} <Icon icon={"share"} size={10} marginLeft={majorScale(1)} /> </Button> )} </> )} </Observer> </Pane> <ContentPage /> </Pane> ); } export default App;