John's suggest - Update state after workspace create

CHANGELOG-more-workspace-api-exercise.md

@@ -0,0 +1 @@
+- Demostrate the Workspaces API to start jobs and collect job information.

context/app/static/js/components/workspaces/WorkspacesList.jsx

@@ -6,37 +6,55 @@ import { AppContext } from 'js/components/Providers';
 import { DeleteIcon, AddIcon } from 'js/shared-styles/icons';
 import { SpacedSectionButtonRow } from 'js/shared-styles/sections/SectionButtonRow';
 
-import { createNotebookWorkspace } from './utils';
-import { useWorkspacesList } from './hooks';
+import { createNotebookWorkspace, startJob } from './utils';
+import { useWorkspaces, useJobsList } from './hooks';
 import { StyledButton } from './style';
 
 function WorkspacesList() {
   const { workspacesEndpoint, workspacesToken } = useContext(AppContext);
-  const { workspacesList } = useWorkspacesList();
+  const { workspaces, updateWorkspaces } = useWorkspaces();
+  const { jobsList } = useJobsList();
 
   async function handleDelete() {
+    // eslint-disable-next-line no-alert
+    alert('TODO: API does not yet support deletion.');
     // TODO: Put up modal and get user input.
     // TODO: Update workspacesList
     // Waiting on delete to be implemented.
   }
 
   async function handleCreate() {
-    // TODO: Put up modal and get user input.
-    // TODO: Update workspacesList
+    // TODO: Put up a better modal and get user input.
+    // eslint-disable-next-line no-alert
+    const content = prompt('Intial content for notebook');
 
     createNotebookWorkspace({
       workspacesEndpoint,
       workspacesToken,
       workspaceName: 'Workspace Timestamp',
       workspaceDescription: 'TODO: description',
-      notebookContent: 'TODO',
+      notebookContent: content,
     });
+    // TODO: Update list on page
+  }
+
+  function createHandleStart(workspaceId) {
+    async function handleStart() {
+      startJob({ workspaceId, workspacesEndpoint, workspacesToken });
+    }
+    return handleStart;
   }
 
   return (
+    // TODO: Finish implementing design:
+    // https://www.figma.com/file/NgBjvs0jRbDHhiyn5nicDm/Workspace?node-id=14%3A5427
     <>
       <SpacedSectionButtonRow
-        leftText={<Typography variant="subtitle1">[TODO: Count] Workspaces</Typography>}
+        leftText={
+          <Typography variant="subtitle1">
+            {workspaces.length} Workspace{workspaces.length === 1 ? '' : 's'}
+          </Typography>
+        }
         buttons={
           <>
             <StyledButton onClick={handleDelete}>
@@ -49,9 +67,32 @@ function WorkspacesList() {
         }
       />
       <Paper>
-        {`TODO: Use token "${workspacesToken}" with "${workspacesEndpoint}"`}
-        <hr />
-        {JSON.stringify(workspacesList)}
+        {workspaces.map((workspace) => (
+          <div key={workspace.id}>
+            <details>
+              <summary>JSON</summary>
+              <pre>{JSON.stringify(workspace, 0, 2)}</pre>
+            </details>
+            <div>
+              <b>{workspace.name}</b> | Created {workspace.datetime_created.slice(0, 10)}
+            </div>
+            <button onClick={createHandleStart(workspace.id)} type="button">
+              Start Jupyter
+            </button>
+          </div>
+        ))}
+      </Paper>
+      <SpacedSectionButtonRow leftText={<Typography variant="subtitle1">Jobs</Typography>} />
+      <Paper>
+        TODO: The current API responses give us no way to connect Workspaces to Jobs.
+        {jobsList.map((job) => (
+          <div key={job.id}>
+            <details>
+              <summary>JSON</summary>
+              <pre>{JSON.stringify(job, 0, 2)}</pre>
+            </details>
+          </div>
+        ))}
       </Paper>
     </>
   );

context/app/static/js/components/workspaces/hooks.js

@@ -1,17 +1,83 @@
-import { useContext, useState, useEffect } from 'react';
+import { useContext, useState, useEffect, useCallback } from 'react';
 
 import { AppContext } from 'js/components/Providers';
 
-function useWorkspacesList() {
-  const [workspacesList, setWorkspacesList] = useState([]);
-  // TODO: isLoading:
-  // const [isLoading, setIsLoading] = useState(true);
+function useWorkspaces() {
+  const [workspaces, setWorkspaces] = useState([]);
+  const { workspacesEndpoint, workspacesToken } = useContext(AppContext);
+  const getAndSetWorkspaces = useCallback(async () => {
+    const response = await fetch(`${workspacesEndpoint}/workspaces`, {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+        'UWS-Authorization': `Token ${workspacesToken}`,
+      },
+    });
+    console.info('setWorkspaces:', response);
+    setWorkspaces(response?.data?.workspaces || []);
+  }, [workspacesEndpoint, workspacesToken]);
+
+  async function updateWorkspaces() {
+    // const response = await fetch();
+    // if (!response.ok) {
+    //   console.error('Update failed', response);
+    //   return;
+    // }
+    getAndSetWorkspaces();
+  }
+
+  useEffect(() => {
+    async function fetchData() {
+      getAndSetWorkspaces();
+    }
+    fetchData();
+  }, [getAndSetWorkspaces]);
+
+  return { workspaces, updateWorkspaces };
+}
+
+// function useWorkspacesList() {
+//   const [workspacesList, setWorkspacesList] = useState([]);
+//   // TODO: isLoading:
+//   // const [isLoading, setIsLoading] = useState(true);
+
+//   const { workspacesEndpoint, workspacesToken } = useContext(AppContext);
+
+//   useEffect(() => {
+//     async function getAndSetWorkspacesList() {
+//       const response = await fetch(`${workspacesEndpoint}/workspaces`, {
+//         method: 'GET',
+//         headers: {
+//           'Content-Type': 'application/json',
+//           'UWS-Authorization': `Token ${workspacesToken}`,
+//         },
+//       });
+
+//       if (!response.ok) {
+//         console.error('Workspaces API failed', response);
+//         return;
+//       }
+//       const results = await response.json();
+
+//       setWorkspacesList(results.data.workspaces);
+//       // TODO:
+//       // setIsLoading(false);
+//     }
+//     getAndSetWorkspacesList();
+//   }, [workspacesEndpoint, workspacesToken]);
+
+//   return { workspacesList };
+// }
+
+function useJobsList() {
+  // TODO: Right now the API does not support querying, so we just need to get the whole list.
+  const [jobsList, setJobsList] = useState([]);
 
   const { workspacesEndpoint, workspacesToken } = useContext(AppContext);
 
   useEffect(() => {
-    async function getAndSetWorkspacesList() {
-      const response = await fetch(`${workspacesEndpoint}/workspaces`, {
+    async function getAndSetJobsList() {
+      const response = await fetch(`${workspacesEndpoint}/jobs`, {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json',
@@ -25,14 +91,14 @@ function useWorkspacesList() {
       }
       const results = await response.json();
 
-      setWorkspacesList(results);
+      setJobsList(results.data.jobs);
       // TODO:
       // setIsLoading(false);
     }
-    getAndSetWorkspacesList();
+    getAndSetJobsList();
   }, [workspacesEndpoint, workspacesToken]);
 
-  return { workspacesList };
+  return { jobsList };
 }
 
-export { useWorkspacesList };
+export { useJobsList, useWorkspaces };

context/app/static/js/components/workspaces/utils.js

@@ -27,4 +27,18 @@ async function createNotebookWorkspace({
   });
 }
 
-export { createNotebookWorkspace };
+async function startJob({ workspaceId, workspacesEndpoint, workspacesToken }) {
+  await fetch(`${workspacesEndpoint}/workspaces/${workspaceId}/start`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      'UWS-Authorization': `Token ${workspacesToken}`,
+    },
+    body: JSON.stringify({
+      job_type: 'JupyterLabJob',
+      job_details: {},
+    }),
+  });
+}
+
+export { createNotebookWorkspace, startJob };