Refactor mutation GQL methods to service class and display organization name (#53)

* Refactor mutation methods to service class

* Refactor database methods to service class

* Display organization name in sidebar

* Handle review comments

---------

Co-authored-by: neeraj <neeraj.rtly@gmail.com>

packages/frontend/src/components/Sidebar.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { Link, NavLink } from 'react-router-dom';
+import { Organization } from 'gql-client';
 
 import { Card, CardBody, Typography } from '@material-tailwind/react';
 
-const Sidebar = () => {
+const Sidebar = ({ organization }: { organization: Organization }) => {
   return (
     <div className="flex flex-col h-full p-4">
       <div className="grow">
@@ -13,8 +14,12 @@ const Sidebar = () => {
           </Link>
         </div>
         <Card className="-ml-1 my-2">
-          <CardBody className="p-1 py-2">
-            <Typography>Organization</Typography>
+          <CardBody className="p-1 py-2 flex gap-2">
+            <div>^</div>
+            <div>
+              <Typography>{organization.name}</Typography>
+              <Typography>Organization</Typography>
+            </div>
           </CardBody>
         </Card>
         <div>

packages/frontend/src/layouts/Dashboard.tsx

@@ -1,19 +1,42 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { Organization } from 'gql-client';
+
 import { Outlet } from 'react-router-dom';
 
 import Sidebar from '../components/Sidebar';
+import { useGQLClient } from '../context/GQLClientContext';
+
+// TODO: Implement organization switcher
+// TODO: Projects get organization details through routes instead of context
+const USER_ORGANIZATION_INDEX = 0;
 
 const Dashboard = () => {
+  const client = useGQLClient();
+  const [organizations, setOrganizations] = useState<Organization[]>([]);
+
+  const fetchUserOrganizations = useCallback(async () => {
+    const { organizations } = await client.getOrganizations();
+    setOrganizations(organizations);
+  }, []);
+
+  useEffect(() => {
+    fetchUserOrganizations();
+  }, []);
+
   return (
     <div className="grid grid-cols-5 h-screen bg-light-blue-50">
-      <div className="h-full">
-        <Sidebar />
-      </div>
-      <div className="col-span-4 h-full p-3 overflow-y-hidden">
-        <div className="bg-white rounded-3xl h-full overflow-y-auto">
-          <Outlet />
-        </div>
-      </div>
+      {organizations.length > 0 && (
+        <>
+          <div className="h-full">
+            <Sidebar organization={organizations[USER_ORGANIZATION_INDEX]} />
+          </div>
+          <div className="col-span-4 h-full p-3 overflow-y-hidden">
+            <div className="bg-white rounded-3xl h-full overflow-y-auto">
+              <Outlet context={organizations[USER_ORGANIZATION_INDEX]} />
+            </div>
+          </div>
+        </>
+      )}
     </div>
   );
 };

packages/frontend/src/layouts/ProjectSearch.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Outlet, useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate, useOutletContext } from 'react-router-dom';
+import { Organization } from 'gql-client';
 
 import { IconButton, Typography } from '@material-tailwind/react';
 
@@ -8,7 +9,7 @@ import ProjectSearchBar from '../components/projects/ProjectSearchBar';
 
 const ProjectSearch = () => {
   const navigate = useNavigate();
-
+  const organization = useOutletContext<Organization>();
   return (
     <div>
       <div className="sticky top-0 bg-white z-30">
@@ -33,7 +34,7 @@ const ProjectSearch = () => {
         <HorizontalLine />
       </div>
       <div className="z-0">
-        <Outlet />
+        <Outlet context={organization} />
       </div>
     </div>
   );

packages/frontend/src/pages/index.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useOutletContext } from 'react-router-dom';
+import { Organization } from 'gql-client';
 
 import { Button, Typography, Chip } from '@material-tailwind/react';
 
@@ -8,16 +9,16 @@ import { useGQLClient } from '../context/GQLClientContext';
 import { ProjectDetails } from '../types/project';
 import { COMMIT_DETAILS } from '../constants';
 
-// TODO: Implement organization switcher
-const USER_ORGANIZATION_ID = '1';
-
 const Projects = () => {
   const client = useGQLClient();
+  const organization = useOutletContext<Organization>();
+
   const [projects, setProjects] = useState<ProjectDetails[]>([]);
 
   const fetchProjects = useCallback(async () => {
-    const { projectsInOrganization } =
-      await client.getProjectsInOrganization(USER_ORGANIZATION_ID);
+    const { projectsInOrganization } = await client.getProjectsInOrganization(
+      organization.id,
+    );
 
     const updatedProjects = projectsInOrganization.map((project) => {
       return {