Completed JoinedOrgs route

client/src/components/JoinedOrgs.jsx

@@ -1,10 +1,40 @@
-import React, { useEffect } from 'react';
-import { Paper, Typography } from '@mui/material';
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Cookies from 'js-cookie';
+import { Paper, Typography, Box } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 
+import OrgUnit from './OrgUnit';
+
 function JoinedOrgs() {
+    const [orgs, setOrgs] = useState([]);
     const theme = useTheme();
 
+    useEffect(() => {
+        async function getOrgs() {
+            axios
+                .get(
+                    `${process.env.DOMAIN_ROOT}/auth/orgs?token=${Cookies.get(
+                        'token'
+                    )}`
+                )
+                .then((response) => {
+                    setOrgs(() =>
+                        response.data.map((org) => {
+                            return {
+                                orgID: org.orgID,
+                                orgName: org.orgName,
+                                memberCount: org.memberCount,
+                                orgCreatedAt: org.createdAt,
+                            };
+                        })
+                    );
+                });
+        }
+
+        getOrgs();
+    });
+
     return (
         <Paper
             sx={{
@@ -17,6 +47,11 @@ function JoinedOrgs() {
             }}
         >
             <Typography variant='h6'>Organizations</Typography>
+            <Box sx={{ overflowY: 'auto' }}>
+                {orgs.map((org) => (
+                    <OrgUnit org={org} />
+                ))}
+            </Box>
         </Paper>
     );
 }

client/src/components/OrgUnit.jsx

@@ -0,0 +1,25 @@
+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;