added optional custom card function to the binslist so that on the map page we can have the map move to the bin and open the bin drawer when the card is clicked from the yard drawer

src/bin/BinsList.tsx

@@ -23,6 +23,12 @@ interface Props {
   //startingTranslate: number;
   valDisplay?: "high" | "low" | "average";
   insert?: boolean
+  /**
+   * optional function for when you want clicking the card to do something other than navigate to the bin page
+   * @param bin the bin model for the card that was clicked
+   * @returns void
+   */
+  cardClickFunction?: (bin: Bin) => void
 }
 
 const useStyles = makeStyles((_theme) => {
@@ -40,7 +46,7 @@ const useStyles = makeStyles((_theme) => {
 });
 
 export default function BinsList(props: Props) {
-  const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert } = props;
+  const { bins, duplicateBin, title, gridView, loadMore, valDisplay, insert, cardClickFunction } = props;
   const classes = useStyles();
   // const history = useHistory();
   const navigate = useNavigate()
@@ -53,6 +59,14 @@ export default function BinsList(props: Props) {
     navigate(path, { state: {bin: bins[i]} });
   };
 
+  const cardClicked = (index: number) => {
+    if(cardClickFunction) {
+      cardClickFunction(bins[index])
+    }else{
+      goToBin(index)
+    }
+  }
+
   const leftArrow = () => {
     const visibility = useContext(VisibilityContext);
     //const isFirstVisible = visibility.useIsVisible('first', false)
@@ -95,7 +109,7 @@ export default function BinsList(props: Props) {
             key={i} 
             className={classes.gridListTile} 
             onClick={() => {
-                !duplicate && goToBin(i)
+                !duplicate && cardClicked(i)
               }}>
             <BinCardV2
               bin={b}
@@ -129,7 +143,7 @@ export default function BinsList(props: Props) {
               key={i}
               className={classes.gridListTile}
               onClick={() => {
-                !duplicate && goToBin(i)
+                !duplicate && cardClicked(i)
               }}>
               <BinCardV2
                 bin={b}

src/bin/BinyardDisplay.tsx

@@ -42,6 +42,11 @@ import BinsList from "./BinsList";
 interface Props {
   yardKey: string;
   insert?: boolean;
+  /**
+   * function to run when a bin card is clicked, when not passed in will default to attempting to navigate to the bin page by adding the bin key to the url
+   * @param bin the selected bin model
+   */
+  binClicked?: (bin: Bin) => void
 }
 
 const useStyles = makeStyles((theme: Theme) => ({
@@ -82,7 +87,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 export default function BinyardDisplay(props: Props) {
-  const { yardKey, insert } = props;
+  const { yardKey, insert, binClicked } = props;
   const classes = useStyles();
   const binAPI = useBinAPI();
   const theme = useTheme();
@@ -321,6 +326,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={grainBins}
                   duplicateBin={duplicateBin}
                   title={"Grain Bins"}
+                  cardClickFunction={binClicked}
                 />
               </Grid>
             </React.Fragment>
@@ -338,6 +344,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={fertBins}
                   duplicateBin={duplicateBin}
                   title={"Fertilizer Bins"}
+                  cardClickFunction={binClicked}
                 />
               </Grid>
             </React.Fragment>
@@ -355,6 +362,7 @@ export default function BinyardDisplay(props: Props) {
                   bins={emptyBins}
                   duplicateBin={duplicateBin}
                   title={"Empty Bins"}
+                  cardClickFunction={binClicked}
                   // loadMore={newTranslation => {
                   //   //only triggered in the scroll view so this will never trigger in grid view
                   //   if (yardBins.length < binTotal) {