Skip to content

Commit

Permalink
improvements to client code and formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@jacobfilik
jacobfilik committed Jul 4, 2024
1 parent e8e75b7 commit f9ee57c
Show file tree
Hide file tree
Showing 24 changed files with 335 additions and 261 deletions.
0 compose.yaml → docker-compose.yaml
View file
File renamed without changes.
61 changes: 32 additions & 29 deletions xas-standards-client/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import LogInPage from "./components/LogInPage.tsx";
import RequireAuth from "./components/RequireAuth.tsx";

import { CssBaseline } from "@mui/material";
import {useMediaQuery} from "@mui/material";
import { useMediaQuery } from "@mui/material";

import { useState, useMemo } from "react";
import { Stack } from "@mui/material";
Expand All @@ -20,9 +20,10 @@ import { createTheme, ThemeProvider } from "@mui/material/styles";
import ReviewPage from "./components/ReviewPage.tsx";

function App() {

const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const [mode, setMode] = useState<"light" | "dark">(prefersDarkMode ? "dark" : "light");
const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
const [mode, setMode] = useState<"light" | "dark">(
prefersDarkMode ? "dark" : "light"
);
const colorMode = useMemo(
() => ({
toggleColorMode: () => {
Expand All @@ -43,31 +44,33 @@ function App() {
);

return (
<ThemeProvider theme={theme}>
<CssBaseline />
<Stack height="100vh" width="100vw" spacing={1}>
<UserProvider>
<Header colorMode={mode} toggleColorMode={colorMode}/>
<MetadataProvider>
<Routes>
<Route path="/" element={<WelcomePage />} />
<Route path="/view" element={<StandardViewerMui />} />
<Route
path="/submit"
element={
<RequireAuth>
<StandardSubmission />
</RequireAuth>
}
/>
<Route path="/review" element={<ReviewPage />} />
<Route path="/login" element={<LogInPage />} />
{/* <Route path="/review" element={<ReviewPage />} /> */}
</Routes>
</MetadataProvider>
</UserProvider>
</Stack>
</ThemeProvider>
<ThemeProvider theme={theme}>
<CssBaseline />
<Stack height="100vh" width="100vw" spacing={1}>
<UserProvider>
<Header
colorMode={mode}
toggleColorMode={colorMode.toggleColorMode}
/>
<MetadataProvider>
<Routes>
<Route path="/" element={<WelcomePage />} />
<Route path="/view" element={<StandardViewerMui />} />
<Route
path="/submit"
element={
<RequireAuth>
<StandardSubmission />
</RequireAuth>
}
/>
<Route path="/review" element={<ReviewPage />} />
<Route path="/login" element={<LogInPage />} />
</Routes>
</MetadataProvider>
</UserProvider>
</Stack>
</ThemeProvider>
);
}

Expand Down
25 changes: 15 additions & 10 deletions xas-standards-client/src/components/DarkModeIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@


import { SvgIcon } from "@mui/material"
import { SvgIcon } from "@mui/material";

export default function DarkModeIcon() {
return (
<SvgIcon fontSize="large" >

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z"/></svg>
</SvgIcon>
)
}
return (
<SvgIcon fontSize="large">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#e8eaed"
>
<path d="M480-120q-150 0-255-105T120-480q0-150 105-255t255-105q14 0 27.5 1t26.5 3q-41 29-65.5 75.5T444-660q0 90 63 153t153 63q55 0 101-24.5t75-65.5q2 13 3 26.5t1 27.5q0 150-105 255T480-120Zm0-80q88 0 158-48.5T740-375q-20 5-40 8t-40 3q-123 0-209.5-86.5T364-660q0-20 3-40t8-40q-78 32-126.5 102T200-480q0 116 82 198t198 82Zm-10-270Z" />
</svg>
</SvgIcon>
);
}
83 changes: 43 additions & 40 deletions xas-standards-client/src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import ListItem from "@mui/material/ListItem";
import List from "@mui/material/List";
import ListItemText from "@mui/material/ListItemText";
import Stack from "@mui/material/Stack";
import {Checkbox, Switch } from "@mui/material";
import { Checkbox } from "@mui/material";

import { NavLink } from "react-router-dom";

Expand Down Expand Up @@ -41,11 +41,14 @@ function NavListItem(props: { to: string; label: string }) {
);
}

export default function Header(props : {colorMode : string; toggleColorMode : any }) {
export default function Header(props: {
colorMode: string;
toggleColorMode: () => void;
}) {
const user = useContext(UserContext);
console.log(user);
const loggedIn = user != null;
const admin = user != null && user.admin
const admin = user != null && user.admin;
console.log(loggedIn);

const navitems = {
Expand All @@ -57,47 +60,47 @@ export default function Header(props : {colorMode : string; toggleColorMode : an

return (
<AppBar style={{ position: "static" }}>
<Toolbar sx={{justifyContent:"space-between", alignItems:"center"}}>
<Toolbar sx={{ justifyContent: "space-between", alignItems: "center" }}>
<Stack direction="row" alignItems={"center"} spacing={2}>
<DiamondIcon />
<Typography variant="h4" component="div" sx={{ flexGrow: 1 }}>
XAS Standards
</Typography>
<List component={Stack} direction="row">
{Object.entries(navitems).map(([key, value]) => (
<ListItem key={key}>
<ListItemButton
component={NavLink}
to={value}
sx={{
"&.active": {
color: (theme) => theme.palette.text.secondary,
},
}}
>
<ListItemText primary={key} />
</ListItemButton>
</ListItem>
))}
{loggedIn && (
<NavListItem to="/submit" label="Submit" />
) }
{admin && (
<NavListItem to="/review" label="Review" />
) }
</List>
<DiamondIcon />
<Typography variant="h4" component="div" sx={{ flexGrow: 1 }}>
XAS Standards
</Typography>
<List component={Stack} direction="row">
{Object.entries(navitems).map(([key, value]) => (
<ListItem key={key}>
<ListItemButton
component={NavLink}
to={value}
sx={{
"&.active": {
color: (theme) => theme.palette.text.secondary,
},
}}
>
<ListItemText primary={key} />
</ListItemButton>
</ListItem>
))}
{loggedIn && <NavListItem to="/submit" label="Submit" />}
{admin && <NavListItem to="/review" label="Review" />}
</List>
</Stack>
<Stack direction="row" alignItems={"center"}>
<Checkbox icon={<LightModeIcon />} checkedIcon={<DarkModeIcon />} checked={props.colorMode === "dark"} onChange={props.toggleColorMode.toggleColorMode}></Checkbox>
{!loggedIn ? (
<Checkbox
icon={<LightModeIcon />}
checkedIcon={<DarkModeIcon />}
checked={props.colorMode === "dark"}
onChange={props.toggleColorMode}
></Checkbox>
{!loggedIn ? (
<NavListItem to="/login" label="Login" />
) : ( <Stack alignItems={"flex-end"}>
<UserIcon />
<Typography>
{user.identifier}
</Typography>

</Stack>)}
) : (
<Stack alignItems={"flex-end"}>
<UserIcon />
<Typography>{user.identifier}</Typography>
</Stack>
)}
</Stack>
</Toolbar>
</AppBar>
Expand Down
24 changes: 15 additions & 9 deletions xas-standards-client/src/components/LightModeIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import { SvgIcon } from "@mui/material"
import { SvgIcon } from "@mui/material";

export default function LightModeIcon() {
return (
<SvgIcon fontSize="large" >

<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z"/></svg>

</SvgIcon>
)
}
return (
<SvgIcon fontSize="large">
<svg
xmlns="http://www.w3.org/2000/svg"
height="24px"
viewBox="0 -960 960 960"
width="24px"
fill="#e8eaed"
>
<path d="M480-360q50 0 85-35t35-85q0-50-35-85t-85-35q-50 0-85 35t-35 85q0 50 35 85t85 35Zm0 80q-83 0-141.5-58.5T280-480q0-83 58.5-141.5T480-680q83 0 141.5 58.5T680-480q0 83-58.5 141.5T480-280ZM200-440H40v-80h160v80Zm720 0H760v-80h160v80ZM440-760v-160h80v160h-80Zm0 720v-160h80v160h-80ZM256-650l-101-97 57-59 96 100-52 56Zm492 496-97-101 53-55 101 97-57 59Zm-98-550 97-101 59 57-100 96-56-52ZM154-212l101-97 55 53-97 101-59-57Zm326-268Z" />
</svg>
</SvgIcon>
);
}
10 changes: 4 additions & 6 deletions xas-standards-client/src/components/ReviewPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { useState } from "react";

import { XASData, AdminXASStandard } from "../models";

const data_url = "/api/data";
const data_url = "/api/admin/data";

function ReviewPage() {
const [standards, setStandardsList] = useState<AdminXASStandard[]>([]);
Expand All @@ -20,11 +20,9 @@ function ReviewPage() {
const [showRef, setShowRef] = useState(false);
const [contains, setContains] = useState([false, false, false]);



function getData(setXASData: React.Dispatch<XASData>) {
function getData() {
return (id: number) => {
axios.get(data_url + "/" + id).then((response) => {
axios.get(data_url + "/" + id + "/?format=json").then((response) => {
const output: XASData = response.data as XASData;
const containsTrans = output != null && output.mutrans.length != 0;
const containsFluor = output != null && output.mufluor.length != 0;
Expand All @@ -40,7 +38,7 @@ function ReviewPage() {
};
}

const onClick = getData(setXASData);
const onClick = getData();
return (
<Grid height="100%" container>
<Grid item xs={5} padding={1}>
Expand Down
81 changes: 43 additions & 38 deletions xas-standards-client/src/components/ReviewTab.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,71 @@

import { Tab, Tabs, Box} from "@mui/material";
import { Tab, Tabs, Box } from "@mui/material";

import StandardMetadataCard from "./StandardMetadataCard";
import ReviewTextView from "./ReviewTextView";

import { useState } from "react";
import ReviewCard from "./ReviewCard";

import { AdminXASStandard } from "../models";

interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
function CustomTabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
</div>
);
}
function a11yProps(index: number) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
children?: React.ReactNode;
index: number;
value: number;
}

function CustomTabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;

return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
</div>
);
}

function a11yProps(index: number) {
return {
id: `simple-tab-${index}`,
"aria-controls": `simple-tabpanel-${index}`,
};
}

export default function ReviewTab(props: { standard: XASStandard }) {
const [value, setValue] = useState(0);
export default function ReviewTab(props: { standard: AdminXASStandard }) {
const [value, setValue] = useState(0);

const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};

return (
<Box sx={{ width: '100%' }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Box sx={{ width: "100%" }}>
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
<Tabs
value={value}
onChange={handleChange}
aria-label="basic tabs example"
>
<Tab label="Standard" {...a11yProps(0)} />
<Tab label="Submitted File" {...a11yProps(1)} />
<Tab label="Review" {...a11yProps(2)} />
</Tabs>
</Box>
<CustomTabPanel value={value} index={0}>
<StandardMetadataCard standard={props.standard}/>
<StandardMetadataCard standard={props.standard} />
</CustomTabPanel>
<CustomTabPanel value={value} index={1}>
<ReviewTextView standard={props.standard}/>
<ReviewTextView standard={props.standard} />
</CustomTabPanel>
<CustomTabPanel value={value} index={2}>
<ReviewCard standard={props.standard} />
<ReviewCard standard={props.standard} />
</CustomTabPanel>
</Box>
);
}
}
Loading

0 comments on commit f9ee57c

Please sign in to comment.