From f62e453d7c5ca65cb0e1c4e2d3ed397edecedb9a Mon Sep 17 00:00:00 2001
From: kaimsfd <kai.mansfield@diamond.ac.uk>
Date: Mon, 6 Nov 2023 07:51:56 +0000
Subject: [PATCH] created UpdatePinStatus mutation

---
 frontend/src/App.tsx                        | 55 +--------------------
 frontend/src/components/Table.tsx           | 21 ++++++--
 frontend/src/components/UpdatePinStatus.tsx | 51 +++++++++++++++++++
 3 files changed, 71 insertions(+), 56 deletions(-)
 create mode 100644 frontend/src/components/UpdatePinStatus.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ab7319ce..d2be215a 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable no-template-curly-in-string */
-import { useMutation, useQuery } from "@apollo/client";
+import { useQuery } from "@apollo/client";
 import { gql } from './__generated__/gql';
 import React from "react";
 import { theme } from "@diamondlightsource/ui-components"
@@ -27,57 +27,6 @@ query pinInfo ($after: String) {
 }
 `);
 
-const UPDATE_PIN_STATUS = gql(`
-  mutation updatePinStatus($barcode: String!, $status: PinStatus!) {
-    updateLibraryPinStatus(barcode: $barcode, status: $status) {
-      barcode
-      status
-    }
-  }
-`);
-
-function UpdatePin() {
-  const { loading, error, data } = useQuery(
-    GET_INFO,
-    {
-      notifyOnNetworkStatusChange: true,
-    });
-  const [
-    updateLibraryPinStatus,
-    { loading: mutationLoading, error: mutationError }
-  ] = useMutation(UPDATE_PIN_STATUS);
-
-  if (loading) return <p>Loading...</p>;
-  if (error) return <p>Error :(</p>;
-
-  return data.libraryPins.edges.map((edge) => {
-    let input;
-
-    return (
-      <div >
-        <p></p>
-        <form
-          onSubmit={e => {
-            e.preventDefault();
-            updateLibraryPinStatus({ variables: { barcode: edge.node.barcode, status: input.value } });
-
-            input.value = "";
-          }}
-        >
-          <input
-            ref={node => {
-              input = node;
-            }}
-          />
-          <button type="submit">Update Todo</button>
-        </form>
-        {mutationLoading && <p>Loading...</p>}
-        {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(
@@ -175,7 +124,7 @@ export default function App(): React.JSX.Element {
   return (
     <ChakraProvider theme={theme}>
       <DisplayPinInfo />
-      <UpdatePin/>
+      {/* <UpdatePin/> */}
     </ChakraProvider>
   );
 }
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
index 54a89ca9..5867a196 100644
--- a/frontend/src/components/Table.tsx
+++ b/frontend/src/components/Table.tsx
@@ -1,6 +1,7 @@
 import { EditIcon } from "@chakra-ui/icons";
-import { Box, BoxProps, HStack, Heading, Skeleton, Spacer, Stack, Table, Tbody, Td, Th, Thead, Tr, Text } from "@chakra-ui/react";
-import React, { useCallback } from "react";
+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";
 
 export interface TableProps extends Omit<BoxProps, "onClick"> {
   /** Table data */
@@ -39,6 +40,8 @@ const TableView = ({
     [data, onClick],
   );
 
+  const [show, setShow] = useState(true);
+
   return (
     <Box overflowY='scroll' {...props}>
       {data === null || data.length === 0 ? (
@@ -65,9 +68,21 @@ const TableView = ({
                     {item[header.key]}
                     </Text>
                     <Text>
-                    {header.key === 'status' ? <EditIcon/> : []}
+                      {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>
diff --git a/frontend/src/components/UpdatePinStatus.tsx b/frontend/src/components/UpdatePinStatus.tsx
new file mode 100644
index 00000000..0011aed7
--- /dev/null
+++ b/frontend/src/components/UpdatePinStatus.tsx
@@ -0,0 +1,51 @@
+import { useMutation } from "@apollo/client";
+import React from "react";
+import { gql } from "../__generated__/gql";
+
+
+export interface UpdatePinStatusProps {
+    item: Record<string, any>
+ }
+
+const UpdatePinStatus = ({item }: UpdatePinStatusProps) => {
+
+    const UPDATE_PIN_STATUS = gql(`
+        mutation updatePinStatus($barcode: String!, $status: PinStatus!) {
+            updateLibraryPinStatus(barcode: $barcode, status: $status) {
+                barcode
+                status
+            }
+        }
+    `);
+
+    const [
+        updateLibraryPinStatus,
+        { loading: mutationLoading, error: mutationError }
+      ] = useMutation(UPDATE_PIN_STATUS);
+
+    let input;
+
+    return (
+        <div>
+            <form
+                onSubmit={e => {
+                e.preventDefault();
+                updateLibraryPinStatus({ variables: { barcode: item['barcode'], status: input.value } });
+
+                input.value = "";
+                }}
+            >
+                <input
+                ref={node => {
+                    input = node;
+                }}
+                />
+                <button type="submit">Update Todo</button>
+            </form>
+            {mutationLoading && <p>Loading...</p>}
+            {mutationError && <p>Error :( Please try again</p>}
+        </div>
+    )
+}
+
+export { UpdatePinStatus }
\ No newline at end of file