Reordered imports

client/src/App.jsx

@@ -1,5 +1,4 @@
-import React, { useState } from 'react';
-
+import React from 'react';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 
 import Header from './components/Header';
@@ -15,6 +14,7 @@ import JoinedOrgs from './components/JoinedOrgs';
 import OrgDashboard from './components/OrgDashboard';
 
 import OwnedGroups from './components/OwnedGroups';
+import GroupDashboard from './componenets/GroupDashboard';
 
 import NotFound from './components/NotFound';
 
@@ -41,7 +41,7 @@ function App() {
 
                         <Route path='group'>
                             <Route index element={<OwnedGroups />} />
-                            <Route path=':id' />
+                            <Route path=':id' element={<GroupDashboard />} />
                         </Route>
 
                         <Route path='*' element={<NotFound />} />

client/src/components/Dashboard.jsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+
 import { Paper, Box, IconButton } from '@mui/material';
-import { DataGrid } from '@mui/x-data-grid';
 import { useTheme } from '@mui/material/styles';
+import { DataGrid } from '@mui/x-data-grid';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 
 function Dashboard({ children, rows }) {
+    const theme = useTheme();
+
     const columns = [
         { field: 'id', headerName: 'ID', flex: 1 },
         { field: 'firstName', headerName: 'First Name', flex: 3 },
@@ -31,7 +34,6 @@ function Dashboard({ children, rows }) {
         { field: 'pronouns', headerName: 'Pronouns', flex: 2 },
         { field: 'email', headerName: 'Email', flex: 10, sortable: false },
     ];
-    const theme = useTheme();
 
     return (
         <React.Fragment>

client/src/components/EditUser.jsx

@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+
 import axios from 'axios';
 import Cookies from 'js-cookie';
+
 import { Box, Typography, TextField, Button } from '@mui/material';
 
 import Form from './Form';
 
 function EditUser() {
+    const navigate = useNavigate();
+
     const [form, setForm] = useState({
         firstName: '',
         lastName: '',
@@ -16,7 +20,6 @@ function EditUser() {
         ethnicity: '',
     });
     const [error, setError] = useState('');
-    const navigate = useNavigate();
 
     const linkStyle = { textDecoration: 'none', color: 'inherit' };
 

client/src/components/Form.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+
 import { Box, Grid, Paper } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 

client/src/components/GroupDashboard.jsx

@@ -1,14 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+
 import axios from 'axios';
 import Cookies from 'js-cookie';
+
 import { Typography, Grid, Stack, Box } from '@mui/material';
 
 import Dashboard from './Dashboard';
 
-function OrgDashboard() {
+function GroupDashboard() {
     const navigate = useNavigate();
     const { groupID } = useParams();
+
     const [group, setGroup] = useState({
         groupID: '',
         groupName: '',
@@ -82,4 +85,4 @@ function OrgDashboard() {
     );
 }
 
-export default OrgDashboard;
+export default GroupDashboard;

client/src/components/GroupUnit.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Box, Stack, Typography } from '@mui/material';
-
-function OrgUnit({ group }) {
-    const { groupID, groupName, memberCount, groupCreatedAt } = group;
-
-    return (
-        <React.Fragment>
-            <Link to={groupID}>Name: {groupName}</Link>
-            <Box>
-                <Stack spacing={2} direction={{ xs: 'column', md: 'row' }}>
-                    <Typography variant='body1'>
-                        Members: {memberCount}
-                    </Typography>
-                    <Typography variant='body1'>
-                        Created On: {groupCreatedAt}
-                    </Typography>
-                </Stack>
-            </Box>
-        </React.Fragment>
-    );
-}
-
-export default OrgUnit;

client/src/components/Header.jsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { Link, Outlet, useNavigate } from 'react-router-dom';
+
 import axios from 'axios';
 import Cookies from 'js-cookie';
+
 import {
     AppBar,
     Button,
@@ -24,6 +26,10 @@ function Header() {
         },
     });
 
+    useEffect(() => {
+        setToken(() => Cookies.get('token'));
+    }, [navigate]);
+
     async function handleLogout() {
         await axios.post(`${process.env.DOMAIN_ROOT}/auth/logout`, {
             token: Cookies.get('token'),
@@ -32,10 +38,6 @@ function Header() {
         Cookies.remove('userID');
     }
 
-    useEffect(() => {
-        setToken(() => Cookies.get('token'));
-    }, [navigate]);
-
     return (
         <React.Fragment>
             <ThemeProvider theme={darkTheme}>

client/src/components/JoinedOrgs.jsx

@@ -1,15 +1,37 @@
 import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
 import axios from 'axios';
 import Cookies from 'js-cookie';
-import { Paper, Typography, Box } from '@mui/material';
+
+import { Paper, Typography, Box, Stack } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 
-import OrgUnit from './OrgUnit';
+function OrgUnit({ org }) {
+    const { orgID, orgName, memberCount, orgCreatedAt } = org;
+
+    return (
+        <React.Fragment>
+            <Link to={orgID}>Name: {orgName}</Link>
+            <Box>
+                <Stack spacing={2} direction={{ xs: 'column', md: 'row' }}>
+                    <Typography variant='body1'>
+                        Members: {memberCount}
+                    </Typography>
+                    <Typography variant='body1'>
+                        Created On: {orgCreatedAt}
+                    </Typography>
+                </Stack>
+            </Box>
+        </React.Fragment>
+    );
+}
 
 function JoinedOrgs() {
-    const [orgs, setOrgs] = useState([]);
     const theme = useTheme();
 
+    const [orgs, setOrgs] = useState([]);
+
     useEffect(() => {
         async function getOrgs() {
             axios

client/src/components/Login.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+
 import axios from 'axios';
 import Cookies from 'js-cookie';
+
 import {
     Box,
     Typography,
@@ -14,13 +16,14 @@ import {
 import Form from './Form';
 
 function Login() {
+    const navigate = useNavigate();
+
     const [form, setForm] = useState({
         email: '',
         password: '',
         remember: false,
     });
     const [error, setError] = useState('');
-    const navigate = useNavigate();
 
     useEffect(() => {
         if (Cookies.get('token')) {

client/src/components/NotFound.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Box } from '@mui/material';
 
 function NotFound() {

client/src/components/OrgDashboard.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+
 import axios from 'axios';
 import Cookies from 'js-cookie';
+
 import {
     Typography,
     Grid,
@@ -14,6 +16,9 @@ import {
 import Dashboard from './Dashboard';
 
 function OrgDashboard() {
+    const { orgID } = useParams();
+    const navigate = useNavigate();
+
     const [org, setOrg] = useState({
         orgID: '',
         orgName: '',
@@ -26,8 +31,6 @@ function OrgDashboard() {
         createdAt: '',
     });
     const [rows, setRows] = useState([]);
-    const { orgID } = useParams();
-    const navigate = useNavigate();
 
     useEffect(() => {
         async function getData() {

client/src/components/OrgUnit.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-import { Box, Stack, Typography } from '@mui/material';
-
-function OrgUnit({ org }) {
-    const { orgID, orgName, memberCount, orgCreatedAt } = org;
-
-    return (
-        <React.Fragment>
-            <Link to={orgID}>Name: {orgName}</Link>
-            <Box>
-                <Stack spacing={2} direction={{ xs: 'column', md: 'row' }}>
-                    <Typography variant='body1'>
-                        Members: {memberCount}
-                    </Typography>
-                    <Typography variant='body1'>
-                        Created On: {orgCreatedAt}
-                    </Typography>
-                </Stack>
-            </Box>
-        </React.Fragment>
-    );
-}
-
-export default OrgUnit;

client/src/components/OwnedGroups.jsx

@@ -1,10 +1,31 @@
 import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+
 import axios from 'axios';
 import Cookies from 'js-cookie';
-import { Paper, Typography, Box } from '@mui/material';
+
+import { Paper, Typography, Box, Stack } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 
-import GroupUnit from './GroupUnit';
+function GroupUnit({ group }) {
+    const { groupID, groupName, memberCount, groupCreatedAt } = group;
+
+    return (
+        <React.Fragment>
+            <Link to={groupID}>Name: {groupName}</Link>
+            <Box>
+                <Stack spacing={2} direction={{ xs: 'column', md: 'row' }}>
+                    <Typography variant='body1'>
+                        Members: {memberCount}
+                    </Typography>
+                    <Typography variant='body1'>
+                        Created On: {groupCreatedAt}
+                    </Typography>
+                </Stack>
+            </Box>
+        </React.Fragment>
+    );
+}
 
 function JoinedOrgs() {
     const [groups, setGroups] = useState([]);

client/src/components/Recover.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import axios from 'axios';
+
 import { Box, Typography, TextField, Button } from '@mui/material';
 
 function Recover() {

client/src/components/Register.jsx

@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+
 import axios from 'axios';
+
 import { Box, Typography, TextField, Button } from '@mui/material';
 
 import Form from './Form';
 
 function Register() {
+    const navigate = useNavigate();
+
     const [form, setForm] = useState({
         firstName: '',
         lastName: '',
@@ -17,7 +21,6 @@ function Register() {
         confirmPassword: '',
     });
     const [error, setError] = useState('');
-    const navigate = useNavigate();
 
     function handleChange(e) {
         const name = e.target.name;

client/src/components/Reset.jsx

@@ -1,16 +1,19 @@
 import React, { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
+
 import axios from 'axios';
+
 import { Box, Typography, TextField, Button } from '@mui/material';
 
 function Reset() {
+    const navigate = useNavigate();
+    const { id } = useParams();
+
     const [form, setForm] = useState({
         password: '',
         confirmPassword: '',
     });
     const [error, setError] = useState('');
-    const navigate = useNavigate();
-    const { id } = useParams();
 
     function handleChange(e) {
         const name = e.target.name;