diff --git a/client/src/components/MainPage.jsx b/client/src/components/MainPage.jsx index 554f8be..48e0219 100644 --- a/client/src/components/MainPage.jsx +++ b/client/src/components/MainPage.jsx @@ -13,10 +13,31 @@ import { TextField, FormGroup, } from '@mui/material'; +import { styled } from '@mui/material/styles'; import OrgUnit from './utils/OrgUnit'; import StackItem from './utils/StackItem'; +const Form = styled(FormGroup)(({ theme }) => ({ + [theme.breakpoints.only('xs')]: { + column: true, + }, +})); +const FormField = styled(TextField)(({ theme }) => ({ + [theme.breakpoints.only('xs')]: { + column: true, + width: '75%', + }, +})); +const FormButton = styled(Button)(({ theme }) => ({ + disableElevation: true, + color: theme.palette.primary.main, + [theme.breakpoints.only('xs')]: { + column: true, + width: '25%', + }, +})); + function MainPage() { const navigate = useNavigate(); @@ -30,17 +51,13 @@ function MainPage() { const linkStyle = { textDecoration: 'none', color: 'inherit' }; useEffect(() => { - if (!Cookies.get('token')) { + if (Cookies.get('token')) { + getMemberOrgs(); + getOwnedOrgs(); + } else { navigate('/login'); } - }); - - useEffect(() => {}, []); - - useEffect(() => { - getMemberOrgs(); - getOwnedOrgs(); - }, []); + }, [navigate]); function handleChange(e) { const name = e.target.name; @@ -106,7 +123,6 @@ function MainPage() { orgName: form.name, }) .then(() => { - navigate(''); getOwnedOrgs(); }); } @@ -132,51 +148,43 @@ function MainPage() { alignItems='center' style={{ height: '95vh' }} > - - + +
- - + - - + +
- - + - - + +
@@ -214,7 +222,7 @@ function MainPage() { - + diff --git a/client/src/components/Navbar.jsx b/client/src/components/Navbar.jsx index f6cdb12..7b2ad64 100644 --- a/client/src/components/Navbar.jsx +++ b/client/src/components/Navbar.jsx @@ -8,15 +8,25 @@ import { Typography, IconButton, CssBaseline, + useMediaQuery, } from '@mui/material'; import MenuIcon from '@mui/icons-material/Menu'; import { ThemeProvider, createTheme } from '@mui/material/styles'; function Navbar({ token }) { const linkStyle = { textDecoration: 'none', color: 'inherit' }; + const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)'); + const darkTheme = createTheme({ palette: { - mode: 'dark', + mode: prefersDarkMode ? 'dark' : 'light', + }, + breakpoints: { + values: { + xs: 0, + sm: 768, + md: 1024, + }, }, }); diff --git a/client/src/components/forms/EditUser.jsx b/client/src/components/forms/EditUser.jsx index 3cbfd02..936de71 100644 --- a/client/src/components/forms/EditUser.jsx +++ b/client/src/components/forms/EditUser.jsx @@ -63,7 +63,7 @@ function EditUser() { token: Cookies.get('token'), }) .then(() => { - navigate('/login'); + navigate('/'); }) .catch((e) => setError(() => e.response.data)); } diff --git a/client/src/components/orgs/OrgDashboard.jsx b/client/src/components/orgs/OrgDashboard.jsx index 1504998..243b59f 100644 --- a/client/src/components/orgs/OrgDashboard.jsx +++ b/client/src/components/orgs/OrgDashboard.jsx @@ -11,16 +11,32 @@ import { Box, ButtonGroup, Button, + Accordion, + AccordionSummary, + AccordionDetails, + useMediaQuery, } from '@mui/material'; +import { styled, useTheme } from '@mui/material/styles'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Dashboard from '../utils/Dashboard'; +const DynamicStack = styled(Stack)(({ theme }) => ({ + [theme.breakpoints.up('sm')]: { + spacing: 2, + alignItems: 'flex-end', + }, +})); + function OrgDashboard() { + const xs = useMediaQuery((theme) => theme.breakpoints.only('xs')); + const sm = useMediaQuery((theme) => theme.breakpoints.only('sm')); + const md = useMediaQuery((theme) => theme.breakpoints.only('md')); const { orgID } = useParams(); const navigate = useNavigate(); const [org, setOrg] = useState({ - orgID: '', + orgID: orgID, orgName: '', orgOwner: { firstName: '', @@ -31,11 +47,24 @@ function OrgDashboard() { createdAt: '', memberCount: 0, }); - const [rows, setRows] = useState([]); - const [status, setStatus] = useState(''); - const [selection, setSelection] = useState(); + const [rows, setRows] = useState([ + { + id: 'asdf', + firstName: 'asdf', + lastName: 'asdf', + nickname: 'asdf', + pronouns: 'asdf', + email: 'asdf', + }, + ]); + const [status, setStatus] = useState(true); + const [selection, setSelection] = useState(null); + const [open, setOpen] = useState(false); const linkStyle = { textDecoration: 'none', color: 'inherit' }; + const buttonGroupOrientation = () => { + if (xs) return 'vertical'; + }; useEffect(() => { async function getData() { @@ -131,6 +160,10 @@ function OrgDashboard() { }); } + function handleOpen() { + setOpen((initial) => (initial ? false : true)); + } + async function play(id) { axios .get( @@ -150,94 +183,110 @@ function OrgDashboard() { } return ( - - Organizations/{org.orgName} - - - - - - Organization ID: {org.orgID} - - - Members: {org.memberCount} - - - Created On: {org.createdAt} - - - - - - - Owner:{' '} - {`${org.orgOwner.firstName} ${org.orgOwner.lastName}`} - - - Email: {org.orgOwner.email} - - - - - - {status ? ( - - - + + + }> + + Organizations/{org.orgName} + + + + + + + + + Organization ID: {org.orgID} + + + Members: {org.memberCount} + + + Created On: {org.createdAt} + + + + + + + Owner:{' '} + {`${org.orgOwner.firstName} ${org.orgOwner.lastName}`} + + + Email: {org.orgOwner.email} + + + + + + {status ? ( + + + + + + + + + + + + ) : ( - - - - - - - - ) : ( - - )} - - - - + )} + + + + + + ); } diff --git a/client/src/components/utils/Dashboard.jsx b/client/src/components/utils/Dashboard.jsx index 1a8661a..5ebb5c8 100644 --- a/client/src/components/utils/Dashboard.jsx +++ b/client/src/components/utils/Dashboard.jsx @@ -1,13 +1,34 @@ import React from 'react'; -import { Outlet } from 'react-router-dom'; -import { Paper, Box, IconButton } from '@mui/material'; -import { useTheme } from '@mui/material/styles'; +import { Paper, Box, IconButton, useMediaQuery, Collapse } from '@mui/material'; +import { styled } from '@mui/material/styles'; import { DataGrid } from '@mui/x-data-grid'; import PlayArrowIcon from '@mui/icons-material/PlayArrow'; -function Dashboard({ children, rows, setSelection, onClick }) { - const theme = useTheme(); +import MemberUnit from '../utils/MemberUnit'; + +const DynamicPaper = styled(Paper)(({ theme }) => ({ + ...theme.typography.body2, + padding: '2vh', + textAlign: 'center', + color: theme.palette.text.secondary, + flexGrow: 1, + margin: '0 2vh', + [theme.breakpoints.only('xs')]: { + height: '80vh', + }, + [theme.breakpoints.only('sm')]: { + height: '80vh', + }, + [theme.breakpoints.only('md')]: { + height: '82vh', + }, +})); + +function Dashboard({ children, rows, setSelection, onClick, open }) { + const xs = useMediaQuery((theme) => theme.breakpoints.only('xs')); + const sm = useMediaQuery((theme) => theme.breakpoints.only('sm')); + const md = useMediaQuery((theme) => theme.breakpoints.only('md')); const columns = [ { field: 'id', headerName: 'ID', flex: 1 }, @@ -36,47 +57,46 @@ function Dashboard({ children, rows, setSelection, onClick }) { { field: 'email', headerName: 'Email', flex: 10, sortable: false }, ]; + function calculateCollapsedSize() { + if (xs) return '37vh'; + if (sm) return '63vh'; + if (md) return '68vh'; + } + + function calculateTableHeight() { + return open ? '64vh' : '100%'; + } + return ( - {children} + - {children} - - - - - { - setSelection(newSelection.rows); - }} - checkboxSelection - /> - - + + {(xs || sm) && + rows.map((member) => { + return ( + + ); + })} + {md && ( + + { + setSelection(() => newSelection.rows); + }} + checkboxSelection + /> + + )} + + ); } diff --git a/client/src/components/utils/Form.jsx b/client/src/components/utils/Form.jsx index f6cb2cb..a4c6235 100644 --- a/client/src/components/utils/Form.jsx +++ b/client/src/components/utils/Form.jsx @@ -16,8 +16,8 @@ function Form({ children }) { alignItems='center' style={{ height: '95vh' }} > - - + + - + diff --git a/client/src/components/utils/MemberUnit.jsx b/client/src/components/utils/MemberUnit.jsx new file mode 100644 index 0000000..8f0ab0b --- /dev/null +++ b/client/src/components/utils/MemberUnit.jsx @@ -0,0 +1,48 @@ +import React from 'react'; + +import { + Accordion, + AccordionSummary, + AccordionDetails, + Typography, + IconButton, + Grid, +} from '@mui/material'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; +import PlayArrowIcon from '@mui/icons-material/PlayArrow'; + +function MemberUnit({ member, onClick }) { + const { id, firstName, lastName, nickname, pronouns, email } = member; + + return ( + + }> + + {firstName} {lastName} ({nickname}): {pronouns} + + + + + + ID: {id} + Email: {email} + + + onClick(member.id)} + > + + + + + + + ); +} + +export default MemberUnit; diff --git a/client/src/components/utils/OrgUnit.jsx b/client/src/components/utils/OrgUnit.jsx index 5c18ef8..154d840 100644 --- a/client/src/components/utils/OrgUnit.jsx +++ b/client/src/components/utils/OrgUnit.jsx @@ -1,27 +1,33 @@ import React from 'react'; import { Link } from 'react-router-dom'; -import { Stack, Box, Typography } from '@mui/material'; +import { + Typography, + Accordion, + AccordionSummary, + AccordionDetails, +} from '@mui/material'; +import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; function OrgUnit({ org }) { const { orgID, orgName, memberCount, createdAt } = org; + const linkStyle = { textDecoration: 'none', color: 'inherit' }; + return ( - - - Name: {orgName} - - - - - Members: {memberCount} - - - Created On: {createdAt} - - - - + + }> + + + {orgName} + + + + + Members: {memberCount} + Created On: {createdAt} + + ); } diff --git a/client/src/components/utils/Organizations.jsx b/client/src/components/utils/Organizations.jsx index 1ed3bf6..f9e7c40 100644 --- a/client/src/components/utils/Organizations.jsx +++ b/client/src/components/utils/Organizations.jsx @@ -8,7 +8,14 @@ import OrgUnit from './OrgUnit'; function Organizations({ retrieveOrgs }) { const theme = useTheme(); - const [orgs, setOrgs] = useState([]); + const [orgs, setOrgs] = useState([ + { + orgID: 12341234, + orgName: 'Org', + memberCount: 15, + createdAt: 15, + }, + ]); useEffect(() => { retrieveOrgs(setOrgs); @@ -26,9 +33,10 @@ function Organizations({ retrieveOrgs }) { }} > Organizations +
- {orgs.map((org) => ( - + {orgs.map((org, index) => ( + ))}