feat: start on get but I gtg

packages/mui/src/components/CreateTokenFormComponent/CreateTokenFormComponent.tsx

@@ -118,7 +118,6 @@ const CreateTokenFormComponent = () => {
           />
         </FormControl>
         <FormControl fullWidth>
-
           <Controller
             name="hitPoints"
             control={control}

packages/mui/src/components/FindTokenComponent/FindTokenComponent.lazy.tsx

@@ -0,0 +1,11 @@
+import React, { lazy, Suspense } from 'react';
+
+const LazyFindTokenComponent = lazy(() => import('./FindTokenComponent'));
+
+const FindTokenComponent = (props: JSX.IntrinsicAttributes & { children?: React.ReactNode; }) => (
+  <Suspense fallback={null}>
+    <LazyFindTokenComponent {...props} />
+  </Suspense>
+);
+
+export default FindTokenComponent;

packages/mui/src/components/FindTokenComponent/FindTokenComponent.module.css

@@ -0,0 +1 @@
+.FindTokenComponent {}

packages/mui/src/components/FindTokenComponent/FindTokenComponent.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import FindTokenComponent from './FindTokenComponent';
+
+describe('<FindTokenComponent />', () => {
+  test('it should mount', () => {
+    render(<FindTokenComponent />);
+
+    const findTokenComponent = screen.getByTestId('FindTokenComponent');
+
+    expect(findTokenComponent).toBeInTheDocument();
+  });
+});

packages/mui/src/components/FindTokenComponent/FindTokenComponent.tsx

@@ -0,0 +1,91 @@
+import { Box, ListItem, ListSubheader, Paper, TextField } from "@mui/material";
+import { AppReducerState } from "../../reducers/AppReducer";
+import { useSelector } from "react-redux";
+import { useEffect } from "react";
+// import styles from "./FindTokenComponent.module.css";
+
+// interface FindTokenComponentProps {}
+
+const FindTokenComponent = () => {
+  const tokens = useSelector((state: AppReducerState) => state.content.tokens);
+
+  useEffect(() => {}, []);
+
+  /**        {scenes.map((scene) => (
+          <ListItem
+            key={scene._id}
+            secondaryAction={
+              <IconButton
+                edge="end"
+                aria-label="delete"
+                onClick={() => handleDeleteScene(scene)}
+              >
+                <DeleteIcon />
+              </IconButton>
+            } */
+  return (
+    // , height: `calc(100vh - 72px)`
+    <Box sx={{ overflow: "auto" }}>
+      <ListSubheader>
+        <TextField
+          autoFocus
+          label="Name"
+          variant="standard"
+          // onChange={search}
+          sx={{ m: 1, margin: "1em" }}
+        ></TextField>
+      </ListSubheader>
+      {/* <ListItem
+            key={scene._id}
+            secondaryAction={
+              <IconButton
+                edge="end"
+                aria-label="delete"
+                onClick={() => handleDeleteScene(scene)}
+              >
+                <DeleteIcon />
+              </IconButton>
+            }
+          > */}
+      {tokens.map((token) => (
+        <ListItem key={token._id}>{token.name}</ListItem>
+      ))}
+      {/* <TextField
+        variant="standard"
+        label="Class"
+        defaultValue=""
+        disabled={classes.length === 0}
+        select
+        onChange={(event) => setClassSelected(event.target.value)}
+        sx={{ m: 1, margin: "1em" }}
+      >
+        {classes.map((classroom: ClassRoom) => (
+          <MenuItem key={classroom._id} value={classroom._id}>
+            {classroomText(classroom)}
+          </MenuItem>
+        ))}
+      </TextField> */}
+      {/* <SearchResultsList
+        value={searchValue}
+        onSelected={(student: Student) => selected(student)}
+      /> */}
+      {/* The text field above is 3.5em, so we shrink the paper by 3.5em and let it handle overflow
+      to keep the scrolling to within the list it contains. */}
+      <Paper
+        sx={{
+          display: "flex",
+          justifyContent: "left",
+          flexWrap: "wrap",
+          listStyle: "none",
+          padding: 0,
+          margin: "0 0 3.5em 0",
+          overflow: "auto",
+        }}
+        component="ul"
+        elevation={0}
+      ></Paper>
+    </Box>
+  );
+};
+
+export default FindTokenComponent;

packages/mui/src/components/TokenInfoDrawerComponent/TokenInfoDrawerComponent.tsx

@@ -7,14 +7,13 @@ import {
   ListItemButton,
   ListItemIcon,
   ListItemText,
-  Paper,
-  TextField,
 } from "@mui/material";
 import SearchIcon from "@mui/icons-material/Search";
 import AddIcon from "@mui/icons-material/Add";
 import { useState } from "react";
 import { ExpandLess, ExpandMore } from "@mui/icons-material";
 import CreateTokenFormComponent from "../CreateTokenFormComponent/CreateTokenFormComponent.lazy";
+import FindTokenComponent from "../FindTokenComponent/FindTokenComponent.lazy";
 // interface TokenInfoDrawerComponentProps {}
 
 const TokenInfoDrawerComponent = () => {
@@ -37,47 +36,7 @@ const TokenInfoDrawerComponent = () => {
       </ListItem>
       <Collapse in={searchOpen} timeout="auto" unmountOnExit>
         <ListItem>
-          <TextField
-            autoFocus
-            label="Name"
-            variant="standard"
-            // onChange={search}
-            sx={{ m: 1, margin: "1em" }}
-          ></TextField>
-          {/* <TextField
-        variant="standard"
-        label="Class"
-        defaultValue=""
-        disabled={classes.length === 0}
-        select
-        onChange={(event) => setClassSelected(event.target.value)}
-        sx={{ m: 1, margin: "1em" }}
-      >
-        {classes.map((classroom: ClassRoom) => (
-          <MenuItem key={classroom._id} value={classroom._id}>
-            {classroomText(classroom)}
-          </MenuItem>
-        ))}
-      </TextField> */}
-          {/* <SearchResultsList
-        value={searchValue}
-        onSelected={(student: Student) => selected(student)}
-      /> */}
-          {/* The text field above is 3.5em, so we shrink the paper by 3.5em and let it handle overflow
-      to keep the scrolling to within the list it contains. */}
-          <Paper
-            sx={{
-              display: "flex",
-              justifyContent: "left",
-              flexWrap: "wrap",
-              listStyle: "none",
-              padding: 0,
-              margin: "0 0 3.5em 0",
-              overflow: "auto",
-            }}
-            component="ul"
-            elevation={0}
-          ></Paper>
+          <FindTokenComponent />
         </ListItem>
         <Divider />
       </Collapse>

packages/mui/src/middleware/ContentMiddleware.ts

@@ -37,10 +37,10 @@ function isBlob(payload: URL | Blob): payload is File {
 
 type Operation = "put" | "delete";
 
-const FriendlyOperation : {[key in Operation]: string } = {
-  "put": "Update succesfull",
-  "delete": "Deletion successful"
-}
+const FriendlyOperation: { [key in Operation]: string } = {
+  put: "Update succesfull",
+  delete: "Deletion successful",
+};
 
 async function update<T extends Asset | Token>(
   state: AppReducerState,
@@ -94,6 +94,21 @@ async function operate<T extends Asset | Token>(
     next({ type: "content/error", payload: err });
   }
 }
+// async function retrieve(
+//   state: AppReducerState,
+//   store: MiddlewareAPI<Dispatch<AnyAction>, unknown>,
+//   path: string,
+//   action: unknown & { type: string; payload: T },
+// ) {
+//   const url = `${state.environment.api}/${path}`;
+//   getToken(state, store)
+//     .then((headers) => axios.get(url, { headers: headers }))
+//     .then((value) => next({ type: action.type, payload: value.data }))
+//     .catch((err) =>
+//       // TODO MICAH display error
+//       console.error(`Unable to fetch assets: ${JSON.stringify(err)}`),
+//     );
+// }
 
 async function updateAssetData(
   state: AppReducerState,
@@ -226,6 +241,9 @@ export const ContentMiddleware: Middleware =
         operate(state, store, next, "delete", "asset", action);
         break;
       }
+      case "content/tokens": {
+        // operate(state, store, next, "get", "asset");
+      }
       case "content/assets": {
         const url = `${state.environment.api}/asset`;
         getToken(state, store)