got Bin page to render with BinTour not giving errors but the tour doesn't actually happen
This commit is contained in:
Carter
parent
9bbbf0940e
commit
c46cb5ce4b
7 changed files with 179 additions and 32 deletions
143
package-lock.json
generated
143
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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(props: Props) {
|
||||
const { userID } = useAuth();
|
||||
export default function BinTour() {
|
||||
// const { userID } = useAuth0();
|
||||
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
|
||||
<Emoji text=" 🎉" />
|
||||
Welcome to Bin Management 🎉
|
||||
{/* <Emoji text=" 🎉" /> */}
|
||||
</React.Fragment>
|
||||
),
|
||||
content: (
|
||||
<React.Fragment>
|
||||
<Typography variant="subtitle2" gutterBottom>
|
||||
{"Hello " + user.name()}
|
||||
<Emoji text=" 👋" />
|
||||
{"Hello " + user.name() + " 👋"}
|
||||
{/* <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
|
||||
<Emoji text=" ☀️" />
|
||||
Drying mode: use heat to dry grain ☀️
|
||||
{/* <Emoji text=" ☀️" /> */}
|
||||
</li>
|
||||
<li>
|
||||
Cooldown mode: use fans to hold bin temperature lower
|
||||
<Emoji text=" ❆❅" />
|
||||
Cooldown mode: use fans to hold bin temperature lower ❆❅
|
||||
{/* <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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { useTheme, makeStyles, createStyles, Theme } from "@material-ui/core/styles";
|
||||
import React from "react";
|
||||
// import { useTheme, makeStyles, createStyles, Theme } from "@material-ui/core/styles";
|
||||
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
|
||||
} from "@material-ui/core";
|
||||
import { KeyboardArrowLeft, KeyboardArrowRight, Close as CloseIcon } from "@material-ui/icons";
|
||||
IconButton,
|
||||
Theme,
|
||||
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) =>
|
||||
createStyles({
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
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,
|
||||
|
|
|
|||
|
|
@ -1160,7 +1160,7 @@ export default function Bin(props: Props) {
|
|||
</Box>
|
||||
{objectTeams()}
|
||||
{deviceMenu()}
|
||||
{/* <BinTour /> */}
|
||||
<BinTour />
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -352,7 +352,7 @@ export default function Users() {
|
|||
<ResponsiveTable<User>
|
||||
title="Users"
|
||||
rows={rows}
|
||||
columns={columns()}
|
||||
columns={columns}
|
||||
total={total}
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue