Merge remote-tracking branch 'origin/master' into equip-shared-loadout

src/app/App.tsx

@@ -24,6 +24,10 @@ const theme = createTheme({
       xl: 3000,
     },
   },
+  palette: {
+    mode: 'dark',
+    background: {},
+  },
 });
 
 function App() {

src/app/routes/Dashboard.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useState, useMemo } from 'react';
 import { styled } from '@mui/system';
 import { useDispatch, useSelector } from 'react-redux';
 import { AppDispatch, RootState } from '../../store';
-import { updateSelectedExoticItemHash, updateSelectedValues } from '../../store/DashboardReducer';
 import { generatePermutations } from '../../features/armor-optimization/generate-permutations';
 import { filterPermutations } from '../../features/armor-optimization/filter-permutations';
 import SingleDiamondButton from '../../components/SingleDiamondButton';
@@ -11,17 +10,17 @@ import { getDestinyMembershipId } from '../../features/membership/bungie-account
 import { updateMembership } from '../../store/MembershipReducer';
 import { getProfileData } from '../../features/profile/destiny-profile';
 import { updateProfileData, updateSelectedCharacter } from '../../store/ProfileReducer';
-import { Character, FilteredPermutation } from '../../types/d2l-types';
+import { Character, FilteredPermutation, SubclassConfig } from '../../types/d2l-types';
 import StatsTable from '../../features/armor-optimization/StatsTable';
 import HeaderComponent from '../../components/HeaderComponent';
-import ExoticSearch from '../../components/ExoticSearch';
 import { db } from '../../store/db';
 import { resetLoadout, updateLoadoutCharacter, updateSubclass } from '../../store/LoadoutReducer';
-import { ManifestSubclass } from '../../types/manifest-types';
 import SubclassCustomizationWrapper from '../../features/subclass/SubclassCustomizationWrapper';
 import { updateManifest } from '../../lib/bungie_api/manifest';
 import LoadoutCustomization from '../../components/LoadoutCustomization';
 import greyBackground from '../../assets/grey.png';
+import ExoticSelector from '../../features/armor-optimization/ExoticSelector';
+import { DAMAGE_TYPE } from '../../lib/bungie_api/constants';
 
 const PageContainer = styled('div')({
   display: 'flex',
@@ -104,18 +103,22 @@ const NewComponentWrapper = styled('div')({
 
 export const Dashboard: React.FC = () => {
   const dispatch = useDispatch<AppDispatch>();
+
   const membership = useSelector((state: RootState) => state.destinyMembership.membership);
   const characters = useSelector((state: RootState) => state.profile.profileData.characters);
-  const selectedCharacter = useSelector((state: RootState) => state.profile.selectedCharacter);
-  const { selectedValues, selectedExoticItemHash } = useSelector(
+  const { selectedValues, selectedExotic, selectedExoticClassCombo } = useSelector(
     (state: RootState) => state.dashboard
   );
 
-  const [isLoading, setIsLoading] = useState(false);
-  const [subclasses, setSubclasses] = useState<ManifestSubclass[]>([]);
-  const [selectedSubclass, setSelectedSubclass] = useState<ManifestSubclass | null>(null);
-  const [customizingSubclass, setCustomizingSubclass] = useState<ManifestSubclass | null>(null);
-  const [lastNonPrismaticSubclass, setLastNonPrismaticSubclass] = useState<ManifestSubclass | null>(
+  const [selectedCharacter, setSelectedCharacter] = useState<Character | undefined>(undefined);
+  const [dataLoading, setDataLoading] = useState<boolean>(true);
+  const [generatingPermutations, setGeneratingPermutations] = useState(false);
+  const [subclasses, setSubclasses] = useState<
+    { [key: number]: SubclassConfig | undefined } | undefined
+  >(undefined);
+  const [selectedSubclass, setSelectedSubclass] = useState<SubclassConfig | null>(null);
+  const [customizingSubclass, setCustomizingSubclass] = useState<SubclassConfig | null>(null);
+  const [lastNonPrismaticSubclass, setLastNonPrismaticSubclass] = useState<SubclassConfig | null>(
     null
   );
   const [showArmorCustomization, setShowArmorCustomization] = useState(false);
@@ -135,37 +138,56 @@ export const Dashboard: React.FC = () => {
     };
 
     updateProfile().catch(console.error);
-  }, [dispatch]);
+
+    setDataLoading(false);
+  }, []);
 
   useEffect(() => {
     if (selectedCharacter) {
       dispatch(resetLoadout());
       dispatch(updateLoadoutCharacter(selectedCharacter));
-      fetchSubclasses(selectedCharacter).then((subclassesData) => {
-        setSubclasses(subclassesData);
-        if (subclassesData.length > 0) {
-          setSelectedSubclass(subclassesData[0]);
-          const defaultSubclass =
-            subclassesData.find((subclass) => !subclass.name.includes('Prismatic')) ||
-            subclassesData[0];
-          setLastNonPrismaticSubclass(defaultSubclass);
+
+      setSubclasses(selectedCharacter.subclasses);
+
+      const keys = Object.keys(selectedCharacter.subclasses);
+
+      for (let i = 0; i < keys.length; i++) {
+        if (
+          selectedCharacter.subclasses[Number(keys[i])] !== undefined &&
+          selectedCharacter.subclasses[Number(keys[i])]!.damageType !== DAMAGE_TYPE.KINETIC
+        ) {
+          setSelectedSubclass(selectedCharacter.subclasses[Number(keys[i])]!);
+          setLastNonPrismaticSubclass(selectedCharacter.subclasses[Number(keys[i])]!);
+          dispatch(
+            updateSubclass({
+              subclass: selectedCharacter.subclasses[Number(keys[i])],
+            })
+          );
+          break;
         }
-      });
+      }
     }
   }, [selectedCharacter, dispatch]);
 
   const permutations = useMemo(() => {
-    if (selectedCharacter && selectedExoticItemHash !== undefined) {
-      return generatePermutations(selectedCharacter.armor, selectedExoticItemHash);
+    if (selectedCharacter && selectedExotic !== undefined) {
+      if (selectedExoticClassCombo)
+        return generatePermutations(
+          selectedCharacter.armor,
+          selectedExotic,
+          selectedExoticClassCombo
+        );
+
+      return generatePermutations(selectedCharacter.armor, selectedExotic);
     }
     return null;
-  }, [selectedCharacter, selectedExoticItemHash]);
+  }, [selectedCharacter, selectedExotic, selectedExoticClassCombo]);
 
   const filteredPermutations = useMemo(() => {
     if (permutations && selectedValues) {
-      setIsLoading(true);
+      setGeneratingPermutations(true);
       const filtered = filterPermutations(permutations, selectedValues);
-      setIsLoading(false);
+      setGeneratingPermutations(false);
       return filtered;
     }
     return null;
@@ -175,22 +197,28 @@ export const Dashboard: React.FC = () => {
     dispatch(updateSelectedCharacter(character));
   };
 
-  const handleSubclassSelect = (subclass: ManifestSubclass) => {
+  const handleSubclassSelect = (subclass: SubclassConfig) => {
     setSelectedSubclass(subclass);
 
-    if (selectedCharacter && subclass.damageType in selectedCharacter.subclasses) {
+    dispatch(
+      updateSubclass({
+        subclass: subclass,
+      })
+    );
+
+    if (selectedCharacter) {
       dispatch(
         updateSubclass({
-          subclass: selectedCharacter.subclasses[subclass.damageType]?.subclass,
+          subclass: selectedCharacter.subclasses[subclass.damageType],
         })
       );
     }
-    if (!subclass.name.includes('Prismatic')) {
+    if (subclass.damageType !== DAMAGE_TYPE.KINETIC) {
       setLastNonPrismaticSubclass(subclass);
     }
   };
 
-  const handleSubclassRightClick = (subclass: ManifestSubclass) => {
+  const handleSubclassRightClick = (subclass: SubclassConfig) => {
     setCustomizingSubclass(subclass);
     setShowAbilitiesModification(true);
   };
@@ -207,29 +235,18 @@ export const Dashboard: React.FC = () => {
     setShowArmorCustomization(false);
   };
 
-  const fetchSubclasses = async (character: Character): Promise<ManifestSubclass[]> => {
-    const data = await db.manifestSubclass
-      .where('class')
-      .equalsIgnoreCase(character.class)
-      .toArray();
-    return data.map((item) => ({
-      ...item,
-      itemHash: item.itemHash,
-    }));
-  };
-
-  return (
+  return !dataLoading ? (
     <PageContainer>
       {showAbilitiesModification && customizingSubclass ? (
         <SubclassCustomizationWrapper
           onBackClick={handleBackClick}
           subclass={customizingSubclass}
-          screenshot={customizingSubclass.screenshot}
+          screenshot={customizingSubclass.subclass.screenshot}
         />
       ) : showArmorCustomization ? (
         <LoadoutCustomization
           onBackClick={handleLoadoutCustomizationBackClick}
-          screenshot={selectedSubclass?.screenshot || ''}
+          screenshot={selectedSubclass?.subclass.screenshot || ''}
           subclass={selectedSubclass!}
         />
       ) : (
@@ -246,9 +263,9 @@ export const Dashboard: React.FC = () => {
           )}
           <Container>
             <NewComponentWrapper>
-              <ExoticSearch
+              <ExoticSelector
                 selectedCharacter={selectedCharacter}
-                selectedExoticItemHash={selectedExoticItemHash}
+                selectedExoticItemHash={selectedExotic.itemHash}
               />
             </NewComponentWrapper>
             <BottomPane>
@@ -267,7 +284,7 @@ export const Dashboard: React.FC = () => {
               </LeftPane>
               <RightPane>
                 <h1 style={{ fontSize: '16px' }}>Armour Combinations</h1>
-                {isLoading ? (
+                {generatingPermutations ? (
                   <p>Loading...</p>
                 ) : filteredPermutations ? (
                   <StatsTable
@@ -283,6 +300,8 @@ export const Dashboard: React.FC = () => {
         </>
       )}
     </PageContainer>
+  ) : (
+    <div>loading...</div>
   );
 };
 

src/components/LoadoutCustomization.tsx

@@ -2,16 +2,16 @@ import React from 'react';
 import './LoadoutCustomization.css';
 import { Button, Box, Container, Grid } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import ModCustomization from '../features/armor/components/ModCustomization';
+import ModCustomization from '../features/armor-mods/components/ModCustomization';
 import EquipLoadout from '../features/loadouts/components/EquipLoadout';
 import AbilitiesModification from '../features/subclass/AbilitiesModification';
-import { ManifestSubclass } from '../types/manifest-types';
 import ShareLoadout from '../features/loadouts/components/ShareLoadout';
+import { SubclassConfig } from '../types/d2l-types';
 
 interface LoadoutCustomizationProps {
   onBackClick: () => void;
   screenshot: string;
-  subclass: ManifestSubclass;
+  subclass: SubclassConfig;
 }
 
 const TransparentButton = styled(Button)(({ theme }) => ({