Integrate gql-client in frontend (#21)

* Integrate gql-client in frontend app

* Populate home page information using gql-client

* Remove non required fields from organizations query

---------

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

packages/frontend/.env

@@ -0,0 +1 @@
+REACT_APP_GQL_SERVER_URL = 'http://localhost:8000/graphql'

packages/frontend/.eslintrc.json

@@ -17,5 +17,7 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:prettier/recommended"
   ],
-  "rules": {}
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off"
+  }
 }

packages/frontend/package.json

@@ -11,6 +11,7 @@
     "@types/node": "^16.18.68",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
+    "assert": "^2.1.0",
     "date-fns": "^3.0.1",
     "downshift": "^8.2.3",
     "luxon": "^3.4.4",

packages/frontend/src/context/GQLClientContext.tsx

@@ -0,0 +1,24 @@
+import React, { createContext, useContext, ReactNode } from 'react';
+import { GQLClient } from 'gql-client';
+
+const GQLClientContext = createContext({} as GQLClient);
+
+export const GQLClientProvider = ({
+  client,
+  children,
+}: {
+  children: ReactNode;
+  client: GQLClient;
+}) => (
+  <GQLClientContext.Provider value={client}>
+    {children}
+  </GQLClientContext.Provider>
+);
+
+export const useGQLClient = () => {
+  const client = useContext(GQLClientContext);
+  if (!client) {
+    throw new Error('useGQLClient must be used within a GQLClientProvider');
+  }
+  return client;
+};

packages/frontend/src/index.tsx

@@ -1,21 +1,32 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import assert from 'assert';
+import { Toaster } from 'react-hot-toast';
+import { GQLClient } from 'gql-client';
 
 import { ThemeProvider } from '@material-tailwind/react';
 
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
-import { Toaster } from 'react-hot-toast';
+import { GQLClientProvider } from './context/GQLClientContext';
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement,
 );
+
+const gqlEndpoint = process.env.REACT_APP_GQL_SERVER_URL;
+assert(gqlEndpoint, 'GQL server URL not provided');
+
+const gqlClient = new GQLClient({ gqlEndpoint });
+
 root.render(
   <React.StrictMode>
     <ThemeProvider>
-      <App />
-      <Toaster position="bottom-center" />
+      <GQLClientProvider client={gqlClient}>
+        <App />
+        <Toaster position="bottom-center" />
+      </GQLClientProvider>
     </ThemeProvider>
   </React.StrictMode>,
 );

packages/frontend/src/pages/index.tsx

@@ -1,12 +1,49 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import { Button, Typography, Chip } from '@material-tailwind/react';
 
 import ProjectCard from '../components/projects/ProjectCard';
 import projectsDetail from '../assets/projects.json';
+import { useGQLClient } from '../context/GQLClientContext';
 
 const Projects = () => {
+  const client = useGQLClient();
+  const [projects, setProjects] = useState([]);
+
+  useEffect(() => {
+    const fetchOrganization = async () => {
+      const res = await client.getOrganizations();
+
+      // Note: select first organization as organization switching not yet implemented
+      const projects = res.organizations[0].projects;
+
+      const updatedProjects = projects.map((project: any) => {
+        return {
+          ...project,
+          // TODO: populate empty fields
+          icon: '',
+          title: '',
+          organization: '',
+          url: '',
+          domain: null,
+          createdBy: '',
+          source: '',
+          // TODO: populate from github API
+          latestCommit: {
+            message: '',
+            createdAt: '',
+            branch: '',
+          },
+        };
+      });
+
+      setProjects(updatedProjects);
+    };
+
+    fetchOrganization();
+  }, [client]);
+
   return (
     <div>
       <div className="flex p-5">
@@ -29,9 +66,10 @@ const Projects = () => {
         </div>
       </div>
       <div className="grid grid-cols-3 gap-5 p-5">
-        {projectsDetail.map((project, key) => {
-          return <ProjectCard project={project} key={key} />;
-        })}
+        {projects.length !== 0 &&
+          projects.map((project, key) => {
+            return <ProjectCard project={project} key={key} />;
+          })}
       </div>
     </div>
   );