Merge pull request #39 from quayside-app/switch-projects

When you switch projects the URL also changes

readme.md

@@ -7,8 +7,9 @@ You need to install npm (you can do this by installing [Node.js](https://nodejs.
 
 For accessing the mongo database locally, you will need the following generated database Atlas creds in an `.env.local` file (fyi, these creds are different than your creds to login to Mongo Atlas). In the same file you will also ned your oath creds(for Google and GitHub as examples). Here is the forma:
 
-```bash
+For accessing the mongo database locally, you will need the following generated database Atlas creds in an `.env.local` file (fyi, these creds are different than your creds to login to Mongo Atlas). In the same file you will also ned your oath creds(for google and github as examples). You will also need your chatGPT key. Here is the forma:
 
+```bash
 MONGO_USERNAME=<your username>
 MONGO_PASSWORD=<your password>
 
@@ -19,6 +20,8 @@ GITHUB_ID=<github ID>
 
 GOOGLE_CLIENT_SECRET=<google secret>
 GOOGLE_CLIENT_ID=<google client ID>
+
+QUAYSIDE_API_KEY=<ChatGPT key>
 ```
 
 ## Usage

src/app/[...projectIds]/page.js

@@ -0,0 +1,20 @@
+import TreeGraph from '../../components/Graph'
+
+/**
+ * Renders a page component that displays the tree graph with a dynamic route
+ *
+ * @param {Object} props - The props passed to the page component.
+ * @param {Object} props.params - The route parameters object.
+ * @param {string} props.params.projectIds - The IDs of the project.
+ * @returns {ReactElement} A React element that represents the page, displaying
+ *                         the project IDs and a TreeGraph component for the project.
+ */
+export default function page ({ params }) {
+  return (
+    <div>
+
+      Project: {params.projectIds}
+      <TreeGraph projectID={params.projectIds} />
+    </div>
+  )
+}

src/app/page.js

@@ -1,13 +1,9 @@
-import TreeGraph from '../components/Graph'
-
 export default function Home () {
   return (
     <main className='flex flex-wrap w-full flex-col items-center'>
       <div className='flex w-full flex-wrap items-center'>
-        <div className='w-full'><TreeGraph /></div>
-
+        Create or Select a project.
       </div>
-
     </main>
   )
 }

src/components/Graph.js

@@ -15,15 +15,17 @@ import { useApiResponse } from '@/app/ApiResponseContext'
  * // Using the component
  * <TreeGraph />
  */
-function TreeGraph () {
+function TreeGraph ({ projectID }) {
   // Fetch Tree data
   const [tasks, setTasks] = useState(null)
 
   const containerRef = useRef(null)
   const { apiResponse } = useApiResponse()
+  if (!projectID) {
+    projectID = '65256c7adec443373f9bf10e' // TODO
+  }
 
   useEffect(() => {
-    const projectID = '65256c7adec443373f9bf10e' // TODO
     // Fetch Tree data
     fetch(`/api/mongoDB/getTasks?projectID=${projectID}`, {
       method: 'GET'

src/components/LeftSidebar.js

@@ -1,5 +1,6 @@
 'use client'
 import React, { useEffect, useState } from 'react'
+import Link from 'next/link'
 import { useSession } from 'next-auth/react'
 
 import NewProjectButton from '../components/NewProjectButton'
@@ -48,7 +49,9 @@ export default function LeftSidebar ({ className }) {
           <div>
             <ul>
               {body.projects.map((project, index) => (
-                <li key={index} className=' font-light text-sm'> <Button label={project.name} /></li>
+                <li key={index} className=' font-light text-sm'>
+                  <Link href={`/${project._id}`}><Button label={project.name} /></Link>
+                </li>
               ))}
             </ul>
           </div>