ILEX-91 Organization - new organization post integration

src/components/Dashboard/Organizations/index.jsx

@@ -1,15 +1,47 @@
-import {Box, Button, ButtonGroup, Divider, Typography} from "@mui/material";
+import { Box, Button, ButtonGroup, Divider, Typography, CircularProgress } from "@mui/material";
 import { useState } from "react";
+import { useOrganizations } from "../../../helpers/useOrganizations";
 import { vars } from "../../../theme/variables";
 import { ListIcon, TableChartIcon } from "../../../Icons";
 import AddOutlinedIcon from "@mui/icons-material/AddOutlined";
-import organizationss from "../../../static/Organizations.json";
 import OrganizationsList from "../../common/OrganizationsList";
 import CustomViewButton from "../../common/CustomViewButton";
+import MessageDialog from "../../common/MessageDialog";
 
 const { gray600, gray200 } = vars;
+
+
 const Organizations = () => {
-  const [listView, setListView] = useState('list');
+  const [open, setOpen] = useState(false);
+
+  // TODO: change this to be dynamic when we get the response from api call
+  const groupname = "aigul"
+
+  const {
+    listView,
+    setListView,
+    organizations,
+    loading,
+    message,
+    createOrganization
+  } = useOrganizations(groupname);
+
+  const handleCreateOrganization = async (e) => {
+    e.preventDefault();
+    // eslint-disable-next-line no-unused-vars
+    const success = await createOrganization();
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  if (loading) {
+    return <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 1 }}>
+      <CircularProgress />
+    </Box>
+  }
 
   return (
     <Box p='2.5rem 5rem' sx={{
@@ -42,7 +74,7 @@ const Organizations = () => {
             />
           </ButtonGroup>
           <Divider orientation="vertical" flexItem sx={{ borderColor: gray200 }} />
-          <Button type="string" color="secondary" startIcon={<AddOutlinedIcon />}>
+          <Button type="string" color="secondary" startIcon={<AddOutlinedIcon />} onClick={handleCreateOrganization}>
             Create a new organization
           </Button>
           <Button
@@ -53,7 +85,10 @@ const Organizations = () => {
           </Button>
         </Box>
       </Box>
-      <OrganizationsList organizations={organizationss} viewJoinButton={false} />
+      <OrganizationsList organizations={organizations} viewJoinButton={false} />
+      {message && (
+        <MessageDialog open={open} title="Create a new organization" handleClose={handleClose} message={message} />
+      )}
     </Box>
   );
 };

src/components/common/MessageDialog.jsx

@@ -0,0 +1,43 @@
+import PropTypes from "prop-types";
+import { Typography, Link } from '@mui/material';
+import BasicDialog from './BasicDialog';
+import { vars } from '../../theme/variables';
+
+const { gray600, brand700, brand800 } = vars;
+
+const linkStyles = {
+  color: brand700,
+  fontWeight: 600, 
+  textDecoration: "none", 
+  "&:hover": { 
+    color: brand800 
+  }
+}
+
+const MessageDialog = ({ title, open, handleClose, message }) => (
+  <BasicDialog 
+    open={open} 
+    handleClose={handleClose} 
+    title={title}
+    sx={{
+      "& .MuiDialogContent-root": {
+        paddingTop: "0.5rem"
+      }
+    }}
+  >
+    <Typography variant="body2" sx={{ color: gray600 }}>
+      {message?.split(/(\S+@\S+\.\S+)/).map((part, i) => 
+        part.match(/\S+@\S+\.\S+/) ? <Link key={i} href={`mailto:${part}`} sx={linkStyles}>{part}</Link> : part
+      )}
+    </Typography>
+  </BasicDialog>
+)
+
+MessageDialog.propTypes = {
+  title: PropTypes.string, 
+  open: PropTypes.bool, 
+  handleClose: PropTypes.func, 
+  message: PropTypes.string
+};
+
+export default MessageDialog;

src/components/common/OrganizationsList.jsx

@@ -8,6 +8,7 @@ const { gray700, gray500, gray200, brand600 } = vars;
 
 const OrganizationsList = ({organizations, viewJoinButton = true}) => {
   const navigate = useNavigate();
+  console.log("organizations: ", organizations)
   return (
     <List sx={{
       width: '100%',
@@ -73,7 +74,7 @@ const OrganizationsList = ({organizations, viewJoinButton = true}) => {
         }
       }
     }}>
-      {organizations.length > 0 && (
+      {organizations.length > 0 ? (
         organizations?.map((organization, index) => (
           <ListItem key={index} onClick={() => navigate(`/organizations/${organization.name}`)}>
             <Box display='flex' alignItems='center' justifyContent='space-between' width={1}>
@@ -104,6 +105,8 @@ const OrganizationsList = ({organizations, viewJoinButton = true}) => {
             } secondary={organization.description} />
           </ListItem>
         ))
+      ) : (
+        <Typography>There are no organizations</Typography>
       )}
     </List>
   );

src/components/organizations/index.jsx

@@ -1,81 +1,38 @@
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import OrganizationsList from "../common/OrganizationsList";
-import { Box, Typography, CircularProgress, Stack, Button, Link } from "@mui/material";
-import BasicDialog from "../common/BasicDialog";
+import { Box, Typography, CircularProgress, Stack, Button } from "@mui/material";
+import { useOrganizations } from "../../helpers/useOrganizations";
 import GroupAddOutlinedIcon from "@mui/icons-material/GroupAddOutlined";
-import { createNewOrganization, getOrganizations } from "../../api/endpoints/apiService";
+import MessageDialog from "../common/MessageDialog";
 
 import { vars } from "../../theme/variables";
-const { gray600, gray700, brand700, brand800 } = vars;
+const { gray700 } = vars;
 
-const linkStyles = {
-  color: brand700,
-  fontWeight: 600, 
-  textDecoration: "none", 
-  "&:hover": { 
-    color: brand800 
-  }
-}
 
 const Organizations = () => {
-  const [organizations, setOrganizations] = useState([]);
-  const [loading, setLoading] = useState(false);
   const [open, setOpen] = useState(false);
-  const [message, setMessage] = useState();
 
   // TODO: change this to be dynamic when we get the response from api call
-  const groupname = "dariodippi"
-
-  const fetchOrganizations = async() => {
-    setLoading(true);
-
-    try {
-      const response = await getOrganizations(groupname)
-      if(response.length > 0){
-        setOrganizations(response)
-      }
-    } catch (err) {
-      console.error('An unknown error occurred: ', err);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  useEffect( () => {
-    setLoading(true)
-    fetchOrganizations();
-  }, []);
-
-  const handleOpen = () => {
+  const groupname = "aigul"
+
+  const {
+    organizations,
+    loading,
+    message,
+    createOrganization
+  } = useOrganizations(groupname);
+
+  const handleCreateOrganization = async (e) => {
+    e.preventDefault();
+    // eslint-disable-next-line no-unused-vars
+    const success = await createOrganization();
     setOpen(true);
   };
 
   const handleClose = () => {
     setOpen(false);
   };
 
-  const createOrganization = async (event) => {
-    event.preventDefault();
-    setLoading(true);
-
-    try {
-      // eslint-disable-next-line no-unused-vars
-      const response = await createNewOrganization({ group: groupname, data: "a test" })
-
-    } catch (err) {
-      console.error('An unknown error occurred: ', err);
-
-      console.log("error.res.status: ", err.response.status)
-      if(err.response.status === 501) {
-        setMessage(err.response.data)
-      }
-    } finally {
-      setLoading(false);
-    }
-
-    handleOpen()
-  }
-
   if (loading) {
     return <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', width: 1 }}>
       <CircularProgress />
@@ -88,26 +45,11 @@ const Organizations = () => {
         <Typography fontSize='1.5rem' color={gray700} fontWeight={600} mb='1.5rem'>
           {organizations?.length} Organizations
         </Typography>
-        <Button type="string" startIcon={<GroupAddOutlinedIcon />} onClick={createOrganization}>Create a new organization</Button>
+        <Button type="string" startIcon={<GroupAddOutlinedIcon />} onClick={handleCreateOrganization}>Create a new organization</Button>
       </Stack>
       <OrganizationsList organizations={organizations} />
       {message && (
-        <BasicDialog 
-          open={open} 
-          handleClose={handleClose} 
-          title="Create a new organization"
-          sx={{
-            "& .MuiDialogContent-root": {
-              paddingTop: "0.5rem"
-            }
-          }}
-        >
-          <Typography variant="body2" sx={{ color: gray600 }}>
-            {message?.split(/(\S+@\S+\.\S+)/).map((part, i) => 
-              part.match(/\S+@\S+\.\S+/) ? <Link key={i} href={`mailto:${part}`} sx={linkStyles}>{part}</Link> : part
-            )}
-          </Typography>
-        </BasicDialog>
+        <MessageDialog open={open} title="Create a new organization" handleClose={handleClose} message={message} />
       )}
     </Box>
   );

src/helpers/useOrganizations.ts

@@ -0,0 +1,56 @@
+import { useState, useEffect } from 'react';
+import { getOrganizations, createNewOrganization } from '../api/endpoints/apiService';
+
+export const useOrganizations = (groupname: string) => {
+  const [listView, setListView] = useState('list');
+  const [organizations, setOrganizations] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState();
+
+  const fetchOrganizations = async () => {
+    setLoading(true);
+
+    try {
+      const response = await getOrganizations(groupname);
+      if (response.length > 0) {
+        setOrganizations(response[0]);
+      }
+    } catch (err) {
+      console.error('An unknown error occurred: ', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const createOrganization = async (event) => {
+    if (event) event.preventDefault();
+    setLoading(true);
+
+    try {
+      await createNewOrganization({ group: groupname, data: "a test" });
+    } catch (err) {
+      console.error('An unknown error occurred: ', err);
+      if (err.response?.status === 501) {
+        setMessage(err.response.data);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    fetchOrganizations();
+  }, []);
+
+  return {
+    listView,
+    setListView,
+    organizations,
+    loading,
+    message,
+    open,
+    createOrganization,
+    fetchOrganizations
+  };
+};