changed error handling to use a Chakra Alert

.devcontainer/docker-compose.yaml

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

.gitignore

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

frontend/.gitignore

@@ -4,3 +4,6 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# codegen generated code
+src/__generated__/

frontend/codegen.ts

@@ -0,0 +1,16 @@
+import { CodegenConfig } from '@graphql-codegen/cli';
+
+export const config: CodegenConfig = {
+  schema: '../pin_packing.graphql',
+  documents: ['src/**/*.{ts,tsx}'],
+  generates: {
+    './src/__generated__/': {
+      preset: 'client',
+      plugins: [],
+      presetConfig: {
+        gqlTagName: 'gql',
+      }
+    }
+  },
+  ignoreNoDocuments: true,
+};

frontend/package.json

@@ -4,6 +4,9 @@
   "private": true,
   "devDependencies": {
     "@babel/core": "^7.16.0",
+    "@graphql-codegen/cli": "^5.0.0",
+    "@graphql-codegen/client-preset": "^4.1.0",
+    "@graphql-typed-document-node/core": "^3.2.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/jest-dom": "^5.17.0",
@@ -44,7 +47,7 @@
     "source-map-loader": "^3.0.0",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.2.5",
-    "typescript": "5.2.2",
+    "typescript": "^5.2.2",
     "web-vitals": "^2.1.4",
     "webpack": "^5.64.4",
     "webpack-dev-server": "^4.6.0",
@@ -56,7 +59,9 @@
     "build": "node scripts/build.js",
     "test": "node scripts/test.js",
     "format": "prettier --write **/*.js",
-    "eslint-lint": "node scripts/lint.js"
+    "eslint-lint": "node scripts/lint.js",
+    "compile": "graphql-codegen",
+    "watch": "graphql-codegen -w"
   },
   "eslintConfig": {
     "extends": [
@@ -78,7 +83,11 @@
   },
   "dependencies": {
     "@apollo/client": "3.5.4",
+    "@chakra-ui/react": "^2.8.1",
     "@diamondlightsource/ui-components": "^1.0.2",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "framer-motion": "^10.16.4",
     "graphql": "^16.3.0",
     "http-proxy-middleware": "^2.0.6",
     "react": "^18.2.0",

frontend/src/App.tsx

@@ -1,10 +1,11 @@
-import { useQuery, gql, DocumentNode } from "@apollo/client";
+import { useQuery } from "@apollo/client";
+import { gql } from './__generated__/gql';
 import React from "react";
 import { theme } from "@diamondlightsource/ui-components"
-import { ChakraProvider } from "@chakra-ui/react";
-import { LoadMoreTable } from "./components/LoadMoreTable";
+import { ChakraProvider, Alert, AlertIcon, AlertTitle, AlertDescription, Button, HStack } from "@chakra-ui/react";
+import { Table } from "./components/Table";
 
-const GET_INFO: DocumentNode = gql`
+const GET_INFO = gql(`
 query pinInfo ($after: String) {
   libraryPins(first: 2, after: $after) {
     pageInfo {
@@ -23,7 +24,7 @@ query pinInfo ($after: String) {
     }
   }
 }
-`;
+`);
 
 // Displays libraryPins query in table component. The table can load more data if required 
 function DisplayPinInfo(): React.JSX.Element {
@@ -33,7 +34,15 @@ function DisplayPinInfo(): React.JSX.Element {
       notifyOnNetworkStatusChange: true,
     });
 
-  if (error) return <p>Error : {error.message} {error.extraInfo}</p>;
+  var loadingRows = loading ? 2 : 0
+
+  if (error) return (
+    <Alert status='error'>
+      <AlertIcon />
+      <AlertTitle>{error.message}</AlertTitle>
+      <AlertDescription>{error.extraInfo}</AlertDescription>
+    </Alert>
+  )
 
   const loadMore = () => {
     fetchMore({
@@ -67,29 +76,41 @@ function DisplayPinInfo(): React.JSX.Element {
   };
 
   return (
-    <LoadMoreTable
-      headers={[
-        {
-          key: 'barcode',
-          label: 'Barcode',
-          skeletonWidth: 12
-        },
-        {
-          key: 'loopSize',
-          label: 'Loop Size',
-          skeletonWidth: 3
-        },
-        {
-          key: 'status',
-          label: 'Status',
-          skeletonWidth: 7
-        }
-      ]}
-      data={data ? data.libraryPins.edges.map((edge) => edge.node): []} 
-      onButtonClick={loadMore}
-      loadingRows={loading ? 2 : 0}
-      isDisabled={data ? !data.libraryPins.pageInfo.hasNextPage : false}
+    <>
+      <Table 
+        headers={[
+          {
+            key: 'barcode',
+            label: 'Barcode',
+            skeletonWidth: 12
+          },
+          {
+            key: 'loopSize',
+            label: 'Loop Size',
+            skeletonWidth: 3
+          },
+          {
+            key: 'status',
+            label: 'Status',
+            skeletonWidth: 7
+          }
+        ]}
+        data={data ? data.libraryPins.edges.map((edge) => edge.node): []}
+        loadingRows={loadingRows}
       />
+      <HStack justify='center' width='100%'>
+        <Button 
+          colorScheme='teal' 
+          variant='outline' 
+          onClick={loadMore} 
+          isLoading={loadingRows !== 0} 
+          loadingText='Loading' 
+          isDisabled={data ? !data.libraryPins.pageInfo.hasNextPage : false}
+        >
+          Load More
+        </Button>
+      </HStack>
+    </>
   );
 }