bin list will show grid view now

src/bin/BinCardV2.tsx

@@ -2,7 +2,7 @@ import {
   Box,
   Card,
   darken,
-  Grid,
+  Grid2 as Grid,
   IconButton,
   Theme,
   Typography,
@@ -296,10 +296,10 @@ export default function BinCard(props: Props) {
     return (
       <Box className={classes.displayBox}>
         <Grid container alignContent="center" alignItems="center" direction="row">
-          <Grid item xs={3}>
+          <Grid size={{ xs: 3 }}>
             <TemperatureIcon heightWidth={20} />
           </Grid>
-          <Grid item xs={9}>
+          <Grid size={{ xs: 9 }}>
             <Box>
               {tempDisplay()}
               <Typography
@@ -311,10 +311,10 @@ export default function BinCard(props: Props) {
               </Typography>
             </Box>
           </Grid>
-          <Grid item xs={3} style={{ paddingLeft: 5 }}>
+          <Grid size={{ xs: 3 }} style={{ paddingLeft: 5 }}>
             <HumidityIcon height={20} />
           </Grid>
-          <Grid item xs={9}>
+          <Grid size={{ xs: 9 }}>
             <Box>
               {percentDisplay()}
               <Typography
@@ -335,10 +335,10 @@ export default function BinCard(props: Props) {
     return (
       <Box className={classes.displayBox} key={controller.key}>
         <Grid container direction="row" alignItems="center" alignContent="center">
-          <Grid item xs={3} style={{ paddingLeft: 5, paddingTop: 5 }}>
+          <Grid size={{ xs: 3 }} style={{ paddingLeft: 5, paddingTop: 5 }}>
             <AerationFanIcon size={18} />
           </Grid>
-          <Grid item xs={9}>
+          <Grid size={{ xs: 9 }}>
             <Box>
               <Typography
                 align="center"
@@ -361,11 +361,11 @@ export default function BinCard(props: Props) {
     return (
       <Box className={classes.displayBox} key={controller.key}>
         <Grid container direction="row" alignItems="center" alignContent="center">
-          <Grid item xs={3} style={{ paddingLeft: 5, paddingTop: 3 }}>
+          <Grid size={{ xs: 3 }} style={{ paddingLeft: 5, paddingTop: 3 }}>
             {/* <ObjectHeaterIcon height={18} width={18} /> */}
             <ObjectHeaterIcon />
           </Grid>
-          <Grid item xs={9}>
+          <Grid size={{ xs: 9 }}>
             <Box>
               <Typography
                 align="center"

src/bin/BinsList.tsx

@@ -2,19 +2,16 @@ import {
   Box, 
   Button, 
   Grid2 as Grid, 
-  Theme, 
   Typography 
 } from "@mui/material";
 import { Bin } from "models";
-import React, { useContext, useRef, useState } from "react";
-// import ScrollMenu from "react-horizontal-scroll-menu";
-// import { useHistory } from "react-router";
+import React, { useContext, useState } from "react";
 import { ArrowForward, ArrowBack, Replay } from "@mui/icons-material";
 import { useMobile } from "hooks";
 import BinCardV2 from "./BinCardV2";
 import { makeStyles } from "@mui/styles";
 import { useNavigate } from "react-router-dom";
-import { publicApiType, ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";
+import { ScrollMenu, VisibilityContext } from "react-horizontal-scrolling-menu";
 import 'react-horizontal-scrolling-menu/dist/styles.css';
 
 interface Props {
@@ -27,7 +24,7 @@ interface Props {
   valDisplay?: "high" | "low" | "average";
 }
 
-const useStyles = makeStyles((theme: Theme) => {
+const useStyles = makeStyles((_theme) => {
   return ({
     gridListTile: {
       position: "relative",
@@ -56,53 +53,6 @@ export default function BinsList(props: Props) {
     navigate(path, { state: {bin: bins[i]} });
   };
 
-  // const scroll = () => {
-  //   return (
-  //     <ScrollMenu
-  //       wheel={false}
-  //       ref={scrollRef}
-  //       alignCenter={false}
-  //       inertiaScrolling
-  //       translate={startingTranslate}
-  //       hideArrows
-  //       hideSingleArrow
-  //       arrowDisabledClass={classes.hidden}
-  //       onUpdate={params => {
-  //         if (scrollRef.current.state) {
-  //           if (scrollRef.current.getOffsetAtEnd() === params.translate && loadMore) {
-  //             loadMore(params.translate);
-  //           }
-  //         }
-  //       }}
-  //       onSelect={e => {
-  //         if (!duplicate) {
-  //           goToBin(e as number);
-  //         }
-  //       }}
-  //       arrowLeft={
-  //         <Button style={{ height: 184, display: isMobile ? "none" : "block" }}>
-  //           <ArrowBack />
-  //         </Button>
-  //       }
-  //       arrowRight={
-  //         <Button style={{ height: 184, display: isMobile ? "none" : "block" }}>
-  //           <ArrowForward />
-  //         </Button>
-  //       }
-  //       data={bins.map((b, i) => (
-  //         <Box key={i} className={classes.gridListTile}>
-  //           <BinCardV2
-  //             bin={b}
-  //             duplicateBin={duplicateBin}
-  //             dupHovered={setDuplicate}
-  //             valDisplay={valDisplay}
-  //           />
-  //         </Box>
-  //       ))}
-  //     />
-  //   );
-  // };
-
   const leftArrow = () => {
     const visibility = useContext(VisibilityContext);
     //const isFirstVisible = visibility.useIsVisible('first', false)
@@ -200,9 +150,9 @@ export default function BinsList(props: Props) {
   return (
     <React.Fragment>
       {title && <Typography>{title}</Typography>}
-      {/* {gridView ? grid() : scroll()} */}
+      {gridView ? grid() : scroll()}
       {/* {grid()} */}
-      {scroll()}
+      {/* {scroll()} */}
     </React.Fragment>
   );
 }

src/pages/Bins.tsx

@@ -31,9 +31,7 @@ import {
   ToggleButtonGroup,
   Typography,
   useTheme,
-  withStyles
 } from "@mui/material";
-// import { green, yellow } from "@material-ui/core/colors";
 import {
   ArrowBackIos,
   ArrowForwardIos,
@@ -43,8 +41,6 @@ import {
   ViewComfy,
   ViewList
 } from "@mui/icons-material";
-// import { Skeleton } from "@material-ui/lab";
-// import AddBinFab from "bin/AddBinFab";
 // import BinsFansStatusTable from "bin/BinFansStatusTable";
 // import BinSettings from "bin/BinSettings";
 import BinsList from "bin/BinsList";