got Bin page to render with BinTour not giving errors but the tour doesn't actually happen

package-lock.json

@@ -39,6 +39,7 @@
         "react-horizontal-scrolling-menu": "^7.1.1",
         "react-image": "^4.1.0",
         "react-infinite-scroller": "^1.2.6",
+        "react-joyride": "^2.9.3",
         "react-phone-input-2": "^2.15.1",
         "react-router-dom": "^6.28.0",
         "react-virtualized-auto-sizer": "^1.0.25",
@@ -2365,6 +2366,12 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@gilbarbara/deep-equal": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.3.1.tgz",
+      "integrity": "sha512-I7xWjLs2YSVMc5gGx1Z3ZG1lgFpITPndpi8Ku55GeEIKpACCPQNS/OTqQbxgTCfq0Ncvcc+CrFov96itVh6Qvw==",
+      "license": "MIT"
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -4866,6 +4873,12 @@
         "node": ">= 16"
       }
     },
+    "node_modules/deep-diff": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-1.0.2.tgz",
+      "integrity": "sha512-aWS3UIVH+NPGCD1kki+DCU9Dua032iSsO43LqQpcs4R3+dVv7tX0qBGjiVHJHjplsoUM2XRO/KB92glqc68awg==",
+      "license": "MIT"
+    },
     "node_modules/deep-eql": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-5.0.2.tgz",
@@ -4892,7 +4905,6 @@
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
       "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -6298,6 +6310,12 @@
       "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
       "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
     },
+    "node_modules/is-lite": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-1.2.1.tgz",
+      "integrity": "sha512-pgF+L5bxC+10hLBgf6R2P4ZZUBOQIIacbdo8YvuCP8/JvsWxG7aZ9p10DYuLtifFci4l3VITphhMlMV4Y+urPw==",
+      "license": "MIT"
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -7294,6 +7312,17 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -7503,6 +7532,45 @@
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
       "license": "MIT"
     },
+    "node_modules/react-floater": {
+      "version": "0.7.9",
+      "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.9.tgz",
+      "integrity": "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "is-lite": "^0.8.2",
+        "popper.js": "^1.16.0",
+        "prop-types": "^15.8.1",
+        "tree-changes": "^0.9.1"
+      },
+      "peerDependencies": {
+        "react": "15 - 18",
+        "react-dom": "15 - 18"
+      }
+    },
+    "node_modules/react-floater/node_modules/@gilbarbara/deep-equal": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz",
+      "integrity": "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA==",
+      "license": "MIT"
+    },
+    "node_modules/react-floater/node_modules/is-lite": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-0.8.2.tgz",
+      "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw==",
+      "license": "MIT"
+    },
+    "node_modules/react-floater/node_modules/tree-changes": {
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.9.3.tgz",
+      "integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.1.1",
+        "is-lite": "^0.8.2"
+      }
+    },
     "node_modules/react-full-screen": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/react-full-screen/-/react-full-screen-1.1.1.tgz",
@@ -7558,11 +7626,62 @@
         "react": "^0.14.9 || ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/react-innertext": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/react-innertext/-/react-innertext-1.1.5.tgz",
+      "integrity": "sha512-PWAqdqhxhHIv80dT9znP2KvS+hfkbRovFp4zFYHFFlOoQLRiawIic81gKb3U1wEyJZgMwgs3JoLtwryASRWP3Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": ">=0.0.0 <=99",
+        "react": ">=0.0.0 <=99"
+      }
+    },
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
+    "node_modules/react-joyride": {
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/react-joyride/-/react-joyride-2.9.3.tgz",
+      "integrity": "sha512-1+Mg34XK5zaqJ63eeBhqdbk7dlGCFp36FXwsEvgpjqrtyywX2C6h9vr3jgxP0bGHCw8Ilsp/nRDzNVq6HJ3rNw==",
+      "license": "MIT",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "deep-diff": "^1.0.2",
+        "deepmerge": "^4.3.1",
+        "is-lite": "^1.2.1",
+        "react-floater": "^0.7.9",
+        "react-innertext": "^1.1.5",
+        "react-is": "^16.13.1",
+        "scroll": "^3.0.1",
+        "scrollparent": "^2.1.0",
+        "tree-changes": "^0.11.2",
+        "type-fest": "^4.27.0"
+      },
+      "peerDependencies": {
+        "react": "15 - 18",
+        "react-dom": "15 - 18"
+      }
+    },
+    "node_modules/react-joyride/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-joyride/node_modules/type-fest": {
+      "version": "4.37.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.37.0.tgz",
+      "integrity": "sha512-S/5/0kFftkq27FPNye0XM1e2NsnoD/3FS+pBmbjmmtLT6I+i344KoOf7pvXreaFsDamWeaJX55nczA1m5PsBDg==",
+      "license": "(MIT OR CC0-1.0)",
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/react-phone-input-2": {
       "version": "2.15.1",
       "integrity": "sha512-W03abwhXcwUoq+vUFvC6ch2+LJYMN8qSOiO889UH6S7SyMCQvox/LF3QWt+cZagZrRdi5z2ON3omnjoCUmlaYw==",
@@ -8027,6 +8146,12 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "node_modules/scroll": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/scroll/-/scroll-3.0.1.tgz",
+      "integrity": "sha512-pz7y517OVls1maEzlirKO5nPYle9AXsFzTMNJrRGmT951mzpIBy7sNHOg5o/0MQd/NqliCiWnAi0kZneMPFLcg==",
+      "license": "MIT"
+    },
     "node_modules/scroll-into-view-if-needed": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.1.0.tgz",
@@ -8036,6 +8161,12 @@
         "compute-scroll-into-view": "^3.0.2"
       }
     },
+    "node_modules/scrollparent": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.1.0.tgz",
+      "integrity": "sha512-bnnvJL28/Rtz/kz2+4wpBjHzWoEzXhVg/TE8BeVGJHUqE8THNIRnDxDWMktwM+qahvlRdvlLdsQfYe+cuqfZeA==",
+      "license": "ISC"
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
@@ -8617,6 +8748,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/tree-changes": {
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.11.3.tgz",
+      "integrity": "sha512-r14mvDZ6tqz8PRQmlFKjhUVngu4VZ9d92ON3tp0EGpFBE6PAHOq8Bx8m8ahbNoGE3uI/npjYcJiqVydyOiYXag==",
+      "license": "MIT",
+      "dependencies": {
+        "@gilbarbara/deep-equal": "^0.3.1",
+        "is-lite": "^1.2.1"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",

package.json

@@ -49,6 +49,7 @@
     "react-horizontal-scrolling-menu": "^7.1.1",
     "react-image": "^4.1.0",
     "react-infinite-scroller": "^1.2.6",
+    "react-joyride": "^2.9.3",
     "react-phone-input-2": "^2.15.1",
     "react-router-dom": "^6.28.0",
     "react-virtualized-auto-sizer": "^1.0.25",

src/bin/BinTour.tsx

@@ -1,17 +1,17 @@
-import { Typography } from "@material-ui/core";
+// import { useAuth0 } from "@auth0/auth0-react";
+import { Typography } from "@mui/material";
 import Tour from "common/Tour";
 import { random } from "lodash";
 import moment from "moment";
-import { useAuth, useGlobalState, useSnackbar, useUserAPI } from "providers";
+import { useGlobalState, useSnackbar, useUserAPI } from "providers";
 import React, { useEffect, useState } from "react";
-import Emoji from "react-emoji-render";
 import { Step } from "react-joyride";
+// import Emoji from "react-emoji-render";
 
-interface Props {}
+export default function BinTour() {
-
+  // const { userID } = useAuth0();
-export default function BinTour(props: Props) {
-  const { userID } = useAuth();
   const [{ user }, dispatch] = useGlobalState();
+  const userID = user.id()
   const { error } = useSnackbar();
   const [isTourRunning, setIsTourRunning] = useState(true);
   const [joyKey, setJoyKey] = useState(random());
@@ -40,15 +40,15 @@ export default function BinTour(props: Props) {
       {
         title: (
           <React.Fragment>
-            Welcome to Bin Management
+            Welcome to Bin Management 🎉
-            <Emoji text=" 🎉" />
+            {/* <Emoji text=" 🎉" /> */}
           </React.Fragment>
         ),
         content: (
           <React.Fragment>
             <Typography variant="subtitle2" gutterBottom>
-              {"Hello " + user.name()}
+              {"Hello " + user.name() + " 👋"}
-              <Emoji text=" 👋" />
+              {/* <Emoji text=" 👋" /> */}
             </Typography>
             <Typography variant="body2" paragraph>
               Looks like this is your first time using our bin management system! Let me show you
@@ -138,12 +138,12 @@ export default function BinTour(props: Props) {
             <ul>
               <li>Storage mode: default</li>
               <li>
-                Drying mode: use heat to dry grain
+                Drying mode: use heat to dry grain ☀️
-                <Emoji text=" ☀️" />
+                {/* <Emoji text=" ☀️" /> */}
               </li>
               <li>
-                Cooldown mode: use fans to hold bin temperature lower
+                Cooldown mode: use fans to hold bin temperature lower  ❆❅
-                <Emoji text="  ❆❅" />
+                {/* <Emoji text="  ❆❅" /> */}
               </li>
             </ul>
           </React.Fragment>
@@ -156,6 +156,8 @@ export default function BinTour(props: Props) {
     return steps;
   };
 
+  console.log(user.status.finishedBinIntro)
+
   // if this intro has been done, return null
   if (user.status.finishedBinIntro.length > 1) return null;
 

src/common/ResponsiveTable.tsx

@@ -70,7 +70,7 @@ export interface Column<T> {
 interface Props<T> {
   rows: T[],
   columns?: Column<T>[] | (() => Column<T>[]),
-  title?: string | JSX.Element;
+  title?: string | JSX.Element | (() => string | JSX.Element);
   subtitle?: string | JSX.Element | (() => string | JSX.Element);
   total: number,
   pageSize: number,
@@ -97,7 +97,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     pageSize, 
     setPage, 
     handleRowsPerPageChange, 
-    title, 
+    // title, 
     // subtitle,
     renderGutter,
     setSearchText, 
@@ -114,6 +114,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   const classes = useStyles();
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
   const subtitle = typeof(props.subtitle) === "function" ? props.subtitle() : props.subtitle
+  const title = typeof(props.title) === "function" ? props.title() : props.title
 
   const isMobile = useMobile()
 

src/common/Tour.tsx

@@ -1,5 +1,4 @@
-import { useTheme, makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+// import { useTheme, makeStyles, createStyles, Theme } from "@material-ui/core/styles";
-import React from "react";
 import Joyride, { Step, CallBackProps, STATUS, TooltipRenderProps, Locale } from "react-joyride";
 import {
   Button,
@@ -7,17 +6,20 @@ import {
   CardContent,
   CardHeader,
   CardActions,
-  Grid,
+  Grid2 as Grid,
   MobileStepper,
   Tooltip,
-  IconButton
+  IconButton,
-} from "@material-ui/core";
+  Theme,
-import { KeyboardArrowLeft, KeyboardArrowRight, Close as CloseIcon } from "@material-ui/icons";
+  useTheme
+} from "@mui/material";
+import { KeyboardArrowLeft, KeyboardArrowRight, Close as CloseIcon } from "@mui/icons-material";
 import classNames from "classnames";
-import { grey } from "@material-ui/core/colors";
+import { grey } from "@mui/material/colors";
+import { makeStyles } from "@mui/styles";
 
-const useStyles = makeStyles((theme: Theme) =>
+const useStyles = makeStyles((theme: Theme) => {
-  createStyles({
+  return ({
     stepContainer: {
       width: "60vw",
       [theme.breakpoints.only("sm")]: {
@@ -43,7 +45,7 @@ const useStyles = makeStyles((theme: Theme) =>
       width: "100%"
     }
   })
-);
+});
 
 const StepContainer = (props: TooltipRenderProps, numSteps: number, skip: () => void) => {
   const {
@@ -99,7 +101,7 @@ const StepContainer = (props: TooltipRenderProps, numSteps: number, skip: () =>
         ) : (
           !step.hideCloseButton && (
             <CardActions>
-              <Grid container justify="flex-end">
+              <Grid container justifyContent="flex-end">
                 <Button size="small" {...closeProps}>
                   Close
                 </Button>
@@ -143,7 +145,7 @@ export default function Tour(props: Props) {
       locale={{ back: "Back", close: "Close", last: "Done", next: "Next", skip: "Skip" } as Locale}
       styles={{
         options: {
-          arrowColor: theme.palette.type === "light" ? grey["100"] : grey["800"],
+          arrowColor: theme.palette.mode === "light" ? grey["100"] : grey["800"],
           backgroundColor: theme.palette.background.default,
           overlayColor: "rgba(0, 0, 0, 0.5)",
           primaryColor: theme.palette.primary.main,

src/pages/Bin.tsx

@@ -1160,7 +1160,7 @@ export default function Bin(props: Props) {
       </Box>
       {objectTeams()}
       {deviceMenu()}
-      {/* <BinTour /> */}
+      <BinTour />
     </PageContainer>
   );
 }

src/pages/Users.tsx

@@ -352,7 +352,7 @@ export default function Users() {
       <ResponsiveTable<User> 
         title="Users"
         rows={rows}
-        columns={columns()}
+        columns={columns}
         total={total}
         page={page}
         pageSize={pageSize}