Add builds page and build creation

src/renderer/App.tsx

@@ -13,25 +13,27 @@ import { useCharacterContext } from './contexts/characterContext';
 import { ItemsPage } from './pages/ItemsPage';
 import { CharacterPage } from './pages/CharacterPage';
 import { LoaderPage } from './pages/LoaderPage';
-import { DamagePage } from './feature/damage/DamagePage'
+import { DamagePage } from './feature/damage/DamagePage';
 import { ItemPage } from './pages/ItemPage';
 import { FishingPage } from './pages/FishingPage';
 import { LastRunInfoPage } from './pages/LastRunInfoPage';
 import { useSettingsContext } from './contexts/settingsContext';
 import { iconFromId } from './icons/icons';
+import { BuildsPage } from './pages/BuildsPage';
+import { BuildPage } from './pages/BuildPage';
 
 export default function App() {
   const { loadClasses } = useCharacterContext();
   const { wc3path } = useSettingsContext();
 
   const onRefreshClick = () => {
-    loadClasses()
+    loadClasses();
     window.electron.ipcRenderer.sendMessage('request_last_run', wc3path);
     window.electron.ipcRenderer.sendMessage('get_latest_damage_by_type');
-  }
+  };
 
   return (
-    <Router initialEntries={[ '/characters' ]}>
+    <Router initialEntries={['/characters']}>
       <ThemeProvider theme={theme}>
         <Box sx={{ display: 'flex' }}>
           <CssBaseline />
@@ -68,6 +70,9 @@ export default function App() {
                 <MenuItem component={Link} to="/items">
                   Items
                 </MenuItem>
+                <MenuItem component={Link} to="/builds">
+                  Builds
+                </MenuItem>
                 <MenuItem component={Link} to="/fishing">
                   Fishing
                 </MenuItem>
@@ -97,16 +102,25 @@ export default function App() {
             }}
           >
             <Box sx={{ maxWidth: '105ch' }}>
-            <Routes>
-              <Route path="/items" element={<ItemsPage/>}/>
-              <Route path="/item/:id" element={<ItemPage/>}/>
-              <Route path="/characters/:accountURL?" element={<LoaderPage />}/>
-              <Route path="/settings" element={<Settings />}/>
-              <Route path="/damagereport/:type" element={<DamagePage />}/>
-              <Route path="/fishing" element={<FishingPage />} />
-              <Route path="/lastruninfo" element={<LastRunInfoPage />}/>
-              <Route path="/character/:accountURL/:id" element={<CharacterPage />} />
-            </Routes>
+              <Routes>
+                <Route path="/items" element={<ItemsPage />} />
+                <Route path="/item/:id" element={<ItemPage />} />
+                <Route
+                  path="/characters/:accountURL?"
+                  element={<LoaderPage />}
+                />
+                <Route path="/settings" element={<Settings />} />
+                <Route path="/damagereport/:type" element={<DamagePage />} />
+                <Route path="/fishing" element={<FishingPage />} />
+                <Route path="/lastruninfo" element={<LastRunInfoPage />} />
+                <Route
+                  path="/character/:accountURL/:id"
+                  element={<CharacterPage />}
+                />
+                <Route path="/builds" element={<BuildsPage />} />
+                <Route path="/builds/new" element={<BuildPage />} />
+                <Route path="/builds/:id" element={<BuildPage />} />
+              </Routes>
             </Box>
           </Box>
         </Box>

src/renderer/components/BackButton.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import { IconButton, Typography, ButtonProps } from '@mui/material';
+import { useNavigate } from 'react-router-dom';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+interface BackButtonProps extends ButtonProps {
+  onClick?: () => void;
+}
+
+export const BackButton: FC<BackButtonProps> = ({ ...props }) => {
+  const { onClick } = props;
+  const navigate = useNavigate();
+  return (
+    <IconButton
+      {...props}
+      style={{ left: -10 }}
+      onClick={() => (onClick ? onClick() : navigate(-1))}
+    >
+      <ArrowBackIcon />
+      <Typography variant="caption" />
+    </IconButton>
+  );
+};

src/renderer/components/CompactItem.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, useCallback } from 'react';
 import Avatar from '@mui/material/Avatar';
 import Tooltip from '@mui/material/Tooltip';
 import { grey } from '@mui/material/colors';
@@ -8,14 +8,21 @@ import { useNavigate } from 'react-router-dom';
 import { useItemContext } from '../contexts/itemsContext';
 
 interface Props {
-  id?: string,
-  noTooltip?: boolean,
-  onClick?: () => void,
+  id?: string;
+  noTooltip?: boolean;
+  onClick?: () => void;
 }
 
 export const CompactItem: FC<Props> = ({ id, noTooltip, onClick }) => {
   const { items } = useItemContext();
   const navigate = useNavigate();
+  const handleClick = useCallback(() => {
+    if (onClick) {
+      onClick();
+    } else {
+      navigate(`/item/${id}`);
+    }
+  }, [onClick]);
   if (!id) {
     return (
       <Avatar src={iconFromId('EmptySlotIcon')} variant="rounded">
@@ -35,20 +42,16 @@ export const CompactItem: FC<Props> = ({ id, noTooltip, onClick }) => {
   return (
     <Tooltip
       sx={{
-        boxShadow: 3
+        boxShadow: 3,
       }}
-      title={
-        !noTooltip 
-          ? <ItemCard id={id} item={items[id]} /> 
-          : null
-        }
+      title={!noTooltip ? <ItemCard id={id} item={items[id]} /> : null}
       placement="right-start"
     >
       <Avatar
         sx={{ cursor: 'pointer' }}
         variant="rounded"
         src={iconFromId(items[id].icon)}
-        onClick={() => navigate(`/item/${id}`)}
+        onClick={handleClick}
       />
     </Tooltip>
   );

src/renderer/components/Stash.tsx

@@ -1,19 +1,52 @@
 import Box from '@mui/material/Box';
 import { BoxProps } from '@mui/material';
 import { CompactItem } from './CompactItem';
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 
 interface EvoStashProps extends BoxProps {
   itemIds: string[];
+  onItemClick?: (index: number) => void;
+  playerItems?: string[] | null;
 }
 
 export function EvoStash(props: EvoStashProps) {
-  const { itemIds, ...rest } = props;
+  const { itemIds, onItemClick, playerItems, ...rest } = props;
+  const navigate = useNavigate();
+
+  const handleItemClick = useCallback(
+    (id: string, index: number) => {
+      if (playerItems) {
+        navigate(`/item/${id}`, {
+          state: { playerItems: [...(playerItems || [])] },
+        });
+      } else if (onItemClick) {
+        onItemClick(index);
+      }
+    },
+    [onItemClick],
+  );
+
+  const getOnClickHandler = useCallback(
+    (id: string, index: number) => {
+      if (playerItems || onItemClick) {
+        return () => handleItemClick(id, index);
+      }
+      return undefined;
+    },
+    [handleItemClick, playerItems, onItemClick],
+  );
+
   return (
     <Box {...rest}>
       {itemIds.map((id, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <CompactItem key={id + index} id={id} />
+        <CompactItem
+          key={id + index}
+          id={id}
+          onClick={getOnClickHandler(id, index)}
+        />
       ))}
     </Box>
   );
-};
+}

src/renderer/contexts/buildsContext.tsx

@@ -9,7 +9,7 @@ import {
 } from 'react';
 
 export interface TBuild {
-  id: number;
+  id: number | null;
   name: string;
   items: string[];
 }
@@ -57,11 +57,8 @@ export const BuildsProvider: FC<PropsWithChildren> = ({ children }) => {
   };
 
   const saveBuild = (build: TBuild) => {
+    console.log('saveBuild', build);
     window.electron.ipcRenderer.sendMessage('save_build', build);
-    setBuildsState({
-      ...builds,
-      [build.id]: build,
-    });
   };
 
   const saveSelectedBuild = (
@@ -74,13 +71,6 @@ export const BuildsProvider: FC<PropsWithChildren> = ({ children }) => {
       playerClass: hero,
       buildId,
     });
-    setSelectedBuilds({
-      ...selectedBuilds,
-      [playerName]: {
-        ...selectedBuilds[playerName],
-        [hero]: buildId,
-      },
-    });
   };
 
   const value = useMemo(

src/renderer/feature/builds/components/BuildCard.tsx

@@ -0,0 +1,65 @@
+import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import { useNavigate } from 'react-router-dom';
+import { EvoStash } from '../../../components/Stash';
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import { useSettingsContext } from '../../../contexts/settingsContext';
+import { TBuild } from '../../../contexts/buildsContext';
+import { ExportBuildButton } from './ExportBuildButton';
+
+interface BuildCardProps {
+  build: TBuild;
+  playerItems?: string[] | null;
+}
+
+export function BuildCard({ build, playerItems }: BuildCardProps) {
+  const navigate = useNavigate();
+  const { addFavouriteClass, removeFavouriteClass } = useSettingsContext();
+
+  const handleNavigate = () => {
+    navigate(`/builds/${build.id}`, {
+      state: { playerItems: [...(playerItems || [])] },
+    });
+  };
+
+  return (
+    <Box sx={{ padding: '10px' }}>
+      <Card
+        sx={{ width: 280, padding: '15px', cursor: 'pointer' }}
+        onClick={handleNavigate}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingBottom: '10px',
+          }}
+        >
+          <Typography variant="body1">{build.name}</Typography>
+          <IconButton onClick={() => console.log('favourite')}>
+            {true ? <StarIcon /> : <StarBorderIcon />}
+          </IconButton>
+        </Box>
+        <Box sx={{ paddingBottom: '10px' }}>
+          <EvoStash
+            sx={{ display: 'flex', flexDirection: 'row', gap: '2px' }}
+            itemIds={build.items}
+            playerItems={playerItems}
+          />
+        </Box>
+        <Box>
+          <ExportBuildButton
+            name={build.name}
+            items={build.items}
+            tooltipTitle="Export build (copy to clipboard)"
+          />
+        </Box>
+      </Card>
+    </Box>
+  );
+}