created dropdown menu and refetched defualt query after mutation so t…

…hat page updates instantly

.devcontainer/docker-compose.yaml

@@ -7,13 +7,11 @@ services:
       dockerfile: Dockerfile.backend
     volumes:
       - ..:/workspace:z
-    command: cargo run --manifest-path /workspace/backend/Cargo.toml --release -p pin_packing  serve --database-url postgres://postgres:password@postgres/pin_packing
+    command: sleep infinity
     environment:
       OPA_URL: http://opa:8181
       DATABASE_URL: postgres://postgres:password@postgres
       RABBITMQ_URL: amqp://rabbitmq:password@rabbitmq
-    ports:
-      - "8080:80"
 
   frontend:
     image: docker.io/library/node:20.6.0-bookworm

.gitignore

@@ -3,6 +3,3 @@
 
 # Developer Tooling
 .vscode
-
-# Generated Schema
-pin_packing.graphql

frontend/package.json

@@ -59,9 +59,7 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "format": "prettier --write **/*.js",
-    "eslint-lint": "node scripts/lint.js",
-    "compile": "graphql-codegen",
-    "watch": "graphql-codegen -w"
+    "eslint-lint": "node scripts/lint.js"
   },
   "eslintConfig": {
     "extends": [
@@ -92,9 +90,7 @@
     "graphql": "^16.3.0",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0",
-    "react-toggle-dark-mode": "^1.1.1"
+    "react-dom": "^18.2.0"
   },
   "jest": {
     "roots": [

frontend/src/App.tsx

@@ -1,10 +1,10 @@
-/* eslint-disable no-template-curly-in-string */
-import { useQuery } from "@apollo/client";
+import { useMutation, useQuery } from "@apollo/client";
 import { gql } from './__generated__/gql';
 import React from "react";
 import { theme } from "@diamondlightsource/ui-components"
-import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack } from "@chakra-ui/react";
+import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack, Select } from "@chakra-ui/react";
 import { PaginationTable } from "./components/PaginationTable";
+import { PinStatus } from "./__generated__/graphql";
 
 const GET_INFO = gql(`
 query pinInfo ($after: String) {
@@ -27,6 +27,98 @@ query pinInfo ($after: String) {
 }
 `);
 
+const UPDATE_PIN_STATUS = gql(`
+        mutation updatePinStatus($barcode: String!, $status: PinStatus!) {
+            updateLibraryPinStatus(barcode: $barcode, status: $status) {
+                barcode
+                status
+            }
+        }
+    `);
+
+const PIN_FRAGMENT = gql(`
+fragment pin on LibraryPin {
+  barcode,
+  status
+}
+`)
+
+
+const LIBRARY_PINS_FRAGMENT = gql(`
+fragment pinPage on LibraryPinConnection {
+  edges {
+    cursor
+    node {
+      ...pin
+      loopSize,
+    }
+  }
+}
+
+`)
+
+export interface UpdatePinStatusProps {
+  item: Record<string, any>
+}
+
+const UpdatePinStatus = ({item }: UpdatePinStatusProps) => {
+
+  const [status, setStatus] = React.useState(item['status']);
+
+  const handleStatusChange = (event) => {
+      setStatus(event.target.value);
+  }; 
+      const [
+          updateLibraryPinStatus,
+          { error: mutationError }
+        ] = useMutation(UPDATE_PIN_STATUS, {
+
+          update(cache, {data: {updateLibraryPinStatus}}) {
+
+            cache.writeFragment({
+              fragment: PIN_FRAGMENT,
+              data: updateLibraryPinStatus,
+              fragmentName: "pin",
+            });
+
+            const libraryPins = cache.readFragment({
+              id: "barcode",
+              fragment: LIBRARY_PINS_FRAGMENT,
+              fragmentName: 'pinPage'
+            });
+            if (libraryPins) {    
+              const newEdges = [...libraryPins.edges, updateLibraryPinStatus]
+              cache.writeFragment({
+                id: "barcode",
+                fragment: LIBRARY_PINS_FRAGMENT,
+                fragmentName: 'pinPage',
+                data: { ...libraryPins, edges: newEdges }
+              });
+            }
+          }
+        })
+
+      return (
+          <div>
+              <form
+                  onSubmit={e => {
+                  e.preventDefault();
+                  updateLibraryPinStatus({ variables: { barcode: item['barcode'], status: status } });
+
+                  ;
+                  }}
+              >
+                      <Select value={status} onChange={handleStatusChange}>
+                        {Object.values(PinStatus).map((status) => (
+                          <option value={status}>{status}</option>))}
+                      </Select>
+                  <button type="submit">Update Status</button>
+              </form>
+              {mutationError && <p>Error :( Please try again</p>}
+          </div>
+      )
+  }
+
 // Displays libraryPins query in table component. The table can load more data if required 
 function DisplayPinInfo(): React.JSX.Element {
   const { loading, error, data, fetchMore } = useQuery(
@@ -35,10 +127,7 @@ function DisplayPinInfo(): React.JSX.Element {
       notifyOnNetworkStatusChange: true,
     });
 
-  const { toggleColorMode } = useColorMode()
-
   var loadingRows = loading ? 2 : 0
-  const bgColour = useColorModeValue('white', 'black')
 
   if (error) return (
     <Alert status='error'>
@@ -104,7 +193,7 @@ function DisplayPinInfo(): React.JSX.Element {
         rowVariant={"diamondStriped"}
       />
       <HStack justify='center' width='100%'>
-        <Button marginTop={'10px'}
+        <Button marginTop={'1em'}
           colorScheme='teal' 
           variant='outline' 
           onClick={loadMore} 
@@ -115,7 +204,6 @@ function DisplayPinInfo(): React.JSX.Element {
           Load More
         </Button>
       </HStack>
-    </div>
     </>
   );
 }
@@ -124,7 +212,9 @@ export default function App(): React.JSX.Element {
   return (
     <ChakraProvider theme={theme}>
       <DisplayPinInfo />
-      {/* <UpdatePin/> */}
     </ChakraProvider>
   );
 }
+
+export {GET_INFO}
+export { UpdatePinStatus }

frontend/src/components/PaginationTable.tsx

@@ -1,5 +1,7 @@
-import { Box, BoxProps, Heading, Skeleton, Table, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
-import React, { useCallback } from "react";
+import { EditIcon } from "@chakra-ui/icons";
+import { Box, BoxProps, HStack, Heading, Skeleton, Table, Tbody, Td, Th, Thead, Tr, Text, IconButton } from "@chakra-ui/react";
+import React, { useCallback, useState } from "react";
+import { UpdatePinStatus } from "../App";
 
 export interface TableProps extends Omit<BoxProps, "onClick"> {
   /** Table data */
@@ -38,6 +40,8 @@ export const PaginationTable = ({
     [data, onClick],
   );
 
+  const [show, setShow] = useState(true);
+
   return (
     <Box overflowY='scroll' {...props}>
       {data === null || data.length === 0 ? (
@@ -58,7 +62,26 @@ export const PaginationTable = ({
               <Tr h='2vh' key={i} onClick={handleClick}>
                 {headers.map((header) => (
                   <Td data-id={i} key={header.key}>
+                    <HStack spacing={2}>
+                      <Text>
                     {item[header.key]}
+                    </Text>
+                    <Text>
+                      {header.key === 'status' ? 
+                          <IconButton 
+                            aria-label='editButton' 
+                            icon={<EditIcon color={'white'}/>} 
+                            colorScheme='black' 
+                            variant={'unstyled'}
+                            onClick={() => setShow(!show)}
+                          />  
+                        : null}
+
+                    </Text>
+                    </HStack>
+                    <Text>
+                    {header.key === 'status' && show ? <UpdatePinStatus item={item}/> : null}
+                    </Text>
                   </Td>
                 ))}
               </Tr>