created dropdown menu and refetched defualt query after mutation so that page updates instantly

Author: kaimsfd

.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/src/App.tsx

@@ -1,5 +1,5 @@
 /* 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"
@@ -27,6 +27,110 @@ query pinInfo ($after: String) {
 }
 `);
 
+const UPDATE_PIN_STATUS = gql(`
+        mutation updatePinStatus($barcode: String!, $status: PinStatus!) {
+            updateLibraryPinStatus(barcode: $barcode, status: $status) {
+                barcode
+                status
+            }
+        }
+    `);
+
+const pinFragment = gql(`
+fragment pin on LibraryPin {
+  barcode,
+  status
+}
+`)
+
+
+const libraryPinsFragment = 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 textColor = useColorModeValue('#e3e3e3', 'black')
+  const bgColor = useColorModeValue('#525252', '#c2c2c4')
+
+    
+
+      const [
+          updateLibraryPinStatus,
+          { error: mutationError }
+        ] = useMutation(UPDATE_PIN_STATUS, {
+
+          update(cache, {data: {updateLibraryPinStatus}}) {
+
+            cache.writeFragment({
+              fragment: pinFragment,
+              data: updateLibraryPinStatus,
+              fragmentName: "pin",
+            });
+    
+            const libraryPins = cache.readFragment({
+              id: "barcode",
+              fragment: libraryPinsFragment,
+              fragmentName: 'pinPage'
+            });
+            if (libraryPins) {    
+              const newEdges = [...libraryPins.edges, updateLibraryPinStatus]
+              cache.writeFragment({
+                id: "barcode",
+                fragment: libraryPinsFragment,
+                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} textColor={textColor} bgColor={bgColor}>
+                          <option value='READY'>READY</option>
+                          <option value='OCCUPIED'>OCCUPIED</option>
+                          <option value='DIRTY'>DIRTY</option>
+                          <option value='BROKEN'>BROKEN</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(
@@ -128,3 +232,6 @@ export default function App(): React.JSX.Element {
     </ChakraProvider>
   );
 }
+
+export {GET_INFO}
+export { UpdatePinStatus }

frontend/src/components/Table.tsx

@@ -1,7 +1,7 @@
 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 "./UpdatePinStatus";
+import { UpdatePinStatus } from "../App";
 
 export interface TableProps extends Omit<BoxProps, "onClick"> {
   /** Table data */
@@ -43,17 +43,17 @@ const TableView = ({
   const [show, setShow] = useState(true);
 
   return (
-    <Box overflowY='scroll' {...props}>
+    <Box overflowY='scroll' {...props} >
       {data === null || data.length === 0 ? (
         <Heading py={10} w='100%' variant='notFound'>
           No {label.toLowerCase()} found
         </Heading>
       ) : (
         <Table size='sm' variant={rowVariant}>
-          <Thead>
-            <Tr>
+          <Thead >
+            <Tr >
               {headers.map((header) => (
-                <Th key={header.label}>{header.label}</Th>
+                <Th key={header.label} >{header.label} </Th>
               ))}
             </Tr>
           </Thead>
@@ -62,26 +62,25 @@ const TableView = ({
             {data.map((item, i) => (
               <Tr h='2vh' key={i} onClick={handleClick}>
                 {headers.map((header) => (
-                  <Td data-id={i} key={header.key}>
-                    <HStack spacing={2}>
+                  <Td width='25%' 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>
+                        {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}
+                      {header.key === 'status' && show ? <UpdatePinStatus item={item}/> : null}
                     </Text>
                   </Td>
                 ))}