update modals with new categories

tmoitie · Mar 6, 2024 · 7acbe39 · 7acbe39
1 parent bf6bdb6
commit 7acbe39
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 30 deletions.
diff --git a/src/components/GlobalModals.js b/src/components/GlobalModals.js
@@ -64,7 +64,13 @@ export default function GlobalModals() {
         content={sortedTracks}
         idField="pkgid"
         defaultContent={[...defaultSettings.ownedTracks]}
-        typeFilter={{ key: 'primaryType', oval: 'oval', road: 'road' }}
+        typeFilter={{
+          key: 'primaryType',
+          oval: 'oval',
+          road: 'road',
+          dirtRoad: 'dirt_road',
+          dirtOval: 'dirt_oval',
+        }}
         save={getSettingUpdater('ownedTracks')}
         favourites={favouriteTracks}
         saveFavourites={getSettingUpdater('favouriteTracks')}
@@ -78,7 +84,14 @@ export default function GlobalModals() {
         content={sortedCars}
         idField="sku"
         defaultContent={[...defaultSettings.ownedCars]}
-        typeFilter={{ key: 'discountGroupNames', oval: ['oval car'], road: ['road car'] }}
+        typeFilter={{
+          key: 'categories',
+          oval: ['oval'],
+          sportsCar: ['sports_car'],
+          formulaCar: ['formula_car'],
+          dirtRoad: ['dirt_road'],
+          dirtOval: ['dirt_oval'],
+        }}
         save={getSettingUpdater('ownedCars')}
         favourites={favouriteCars}
         saveFavourites={getSettingUpdater('favouriteCars')}

diff --git a/src/components/modal/ContentModal.js b/src/components/modal/ContentModal.js
@@ -27,12 +27,21 @@ type Props = {
     key: string,
     oval: string,
     road: string,
+    dirtOval: string,
+    dirtRoad: string,
+  }|{
+    key: string,
+    oval: string,
+    formulaCar: string,
+    sportsCar: string,
+    dirtOval: string,
+    dirtRoad: string,
   }
 };
 
 export default function ContentModal({
   id, isOpen, onClose, title, save, content, idField, defaultContent, ownedContent, favourites,
-  saveFavourites, typeFilter,
+  saveFavourites, typeFilter, 
 }: Props) {
   const { t } = useTranslation();
 
@@ -95,7 +104,7 @@ export default function ContentModal({
       <div className={styles['container-fluid']}>
         <p>{t('Use the checkbox to set the content you own, and use the star to set your favourite content.')}</p>
         <div className={styles.row}>
-          <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-4']}`}>
+          <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-3']}`}>
             <div>
               <Checkbox
                 id={`${id}-select-all`}
@@ -114,7 +123,7 @@ export default function ContentModal({
               />
             </div>
           </div>
-          <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-4']}`}>
+          <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-3']}`}>
             <div>
               <Checkbox
                 id={`${id}-select-oval`}
@@ -133,22 +142,107 @@ export default function ContentModal({
               />
             </div>
           </div>
-          <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-4']}`}>
+
+          {typeFilter.road ? (
+            <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-3']}`}>
+              <div>
+                <Checkbox
+                  id={`${id}-select-road`}
+                  checked={allTypeContentChecked('road')}
+                  onChange={(newValue) => setAllTypeContent('road', newValue)}
+                >
+                  {t('Select all road')}
+                </Checkbox>
+              </div> 
+
+              <div className={contentModalStyles.favourite}>
+                <FavouriteStarButton
+                  id={`${id}-favourite-road`}
+                  enabled={allTypeFavouritesChecked('road')}
+                  onClick={(newValue) => setAllTypeFavourites('road', newValue)}
+                />
+              </div>
+            </div>
+          ) : (
+            <>
+              <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-3']}`}>
+                <div>
+                  <Checkbox
+                    id={`${id}-select-sports-cars`}
+                    checked={allTypeContentChecked('sportsCar')}
+                    onChange={(newValue) => setAllTypeContent('sportsCar', newValue)}
+                  >
+                    {t('Select all sports cars')}
+                  </Checkbox>
+                </div> 
+
+                <div className={contentModalStyles.favourite}>
+                  <FavouriteStarButton
+                    id={`${id}-favourite-sports-cars`}
+                    enabled={allTypeFavouritesChecked('sportsCar')}
+                    onClick={(newValue) => setAllTypeFavourites('sportsCar', newValue)}
+                  />
+                </div>
+              </div>
+              <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-3']}`}>
+                <div>
+                  <Checkbox
+                    id={`${id}-select-formula-cars`}
+                    checked={allTypeContentChecked('formulaCar')}
+                    onChange={(newValue) => setAllTypeContent('formulaCar', newValue)}
+                  >
+                    {t('Select all formula cars')}
+                  </Checkbox>
+                </div> 
+
+                <div className={contentModalStyles.favourite}>
+                  <FavouriteStarButton
+                    id={`${id}-favourite-formula-cars`}
+                    enabled={allTypeFavouritesChecked('formulaCar')}
+                    onClick={(newValue) => setAllTypeFavourites('formulaCar', newValue)}
+                  />
+                </div>
+              </div>
+            </>
+          )}
+
+
+          <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-3']}`}>
+            <div>
+              <Checkbox
+                id={`${id}-select-dirt-road`}
+                checked={allTypeContentChecked('dirtRoad')}
+                onChange={(newValue) => setAllTypeContent('dirtRoad', newValue)}
+              >
+                {t('Select all dirt road')}
+              </Checkbox>
+            </div> 
+
+            <div className={contentModalStyles.favourite}>
+              <FavouriteStarButton
+                id={`${id}-favourite-dirt-road`}
+                enabled={allTypeFavouritesChecked('dirtRoad')}
+                onClick={(newValue) => setAllTypeFavourites('dirtRoad', newValue)}
+              />
+            </div>
+          </div>
+
+          <div className={`${contentModalStyles.checkboxContainer} ${styles['col-sm-3']}`}>
             <div>
               <Checkbox
-                id={`${id}-select-road`}
-                checked={allTypeContentChecked('road')}
-                onChange={(newValue) => setAllTypeContent('road', newValue)}
+                id={`${id}-select-dirt-oval`}
+                checked={allTypeContentChecked('dirtOval')}
+                onChange={(newValue) => setAllTypeContent('dirtOval', newValue)}
               >
-                {t('Select all road')}
+                {t('Select all dirt oval')}
               </Checkbox>
             </div> 
 
             <div className={contentModalStyles.favourite}>
               <FavouriteStarButton
-                id={`${id}-favourite-road`}
-                enabled={allTypeFavouritesChecked('road')}
-                onClick={(newValue) => setAllTypeFavourites('road', newValue)}
+                id={`${id}-favourite-dirt-oval`}
+                enabled={allTypeFavouritesChecked('dirtOval')}
+                onClick={(newValue) => setAllTypeFavourites('dirtOval', newValue)}
               />
             </div>
           </div>

diff --git a/src/components/modal/FavouriteSeriesModal.js b/src/components/modal/FavouriteSeriesModal.js
@@ -36,14 +36,23 @@ const groupedSeries = (filteredSeries) => filteredSeries.reduce((grouped, single
       ],
     };
   }
+  if (single.catid === 5) {
+    return {
+      ...grouped,
+      sportsCar: [
+        ...grouped.sportsCar,
+        single,
+      ],
+    };
+  }
   return {
     ...grouped,
-    road: [
-      ...grouped.road,
+    formulaCar: [
+      ...grouped.formulaCar,
       single,
     ],
   };
-}, { oval: [], road: [], dirtOval: [], rx: [] });
+}, { oval: [], road: [], dirtOval: [], rx: [], sportsCar: [], formulaCar: [] });
 
 type Props = {
   onClose: () => void,
@@ -126,11 +135,19 @@ export default function FavouriteSeriesModal({ onClose, isOpen, favouriteSeries,
             </div>
           </>
         )}
-        {groupedSeries(getFilteredSeries()).road.length > 0 && (
+        {groupedSeries(getFilteredSeries()).sportsCar.length > 0 && (
+          <>
+            <h3>{t('Sports Car')}</h3>
+            <div className={styles.row}>
+              {groupedSeries(getFilteredSeries()).sportsCar.map(renderCheckboxes)}
+            </div>
+          </>
+        )}
+        {groupedSeries(getFilteredSeries()).formulaCar.length > 0 && (
           <>
-            <h3>{t('Road')}</h3>
+            <h3>{t('Formula Car')}</h3>
             <div className={styles.row}>
-              {groupedSeries(getFilteredSeries()).road.map(renderCheckboxes)}
+              {groupedSeries(getFilteredSeries()).formulaCar.map(renderCheckboxes)}
             </div>
           </>
         )}

diff --git a/src/components/modal/__tests__/__snapshots__/ContentModal.test.js.snap b/src/components/modal/__tests__/__snapshots__/ContentModal.test.js.snap
@@ -19,7 +19,7 @@ exports[`components/modal/ContentModal renders correctly 1`] = `
       className="row"
     >
       <div
-        className="checkboxContainer col-sm-4"
+        className="checkboxContainer col-sm-3"
       >
         <div>
           <Checkbox
@@ -42,7 +42,7 @@ exports[`components/modal/ContentModal renders correctly 1`] = `
         </div>
       </div>
       <div
-        className="checkboxContainer col-sm-4"
+        className="checkboxContainer col-sm-3"
       >
         <div>
           <Checkbox
@@ -65,7 +65,7 @@ exports[`components/modal/ContentModal renders correctly 1`] = `
         </div>
       </div>
       <div
-        className="checkboxContainer col-sm-4"
+        className="checkboxContainer col-sm-3"
       >
         <div>
           <Checkbox
@@ -87,6 +87,52 @@ exports[`components/modal/ContentModal renders correctly 1`] = `
           />
         </div>
       </div>
+      <div
+        className="checkboxContainer col-sm-3"
+      >
+        <div>
+          <Checkbox
+            checked={true}
+            disabled={false}
+            id="cars-select-dirt-road"
+            onChange={[Function]}
+          >
+            Select all dirt road
+          </Checkbox>
+        </div>
+        <div
+          className="favourite"
+        >
+          <FavouriteStarButton
+            enabled={true}
+            id="cars-favourite-dirt-road"
+            onClick={[Function]}
+          />
+        </div>
+      </div>
+      <div
+        className="checkboxContainer col-sm-3"
+      >
+        <div>
+          <Checkbox
+            checked={true}
+            disabled={false}
+            id="cars-select-dirt-oval"
+            onChange={[Function]}
+          >
+            Select all dirt oval
+          </Checkbox>
+        </div>
+        <div
+          className="favourite"
+        >
+          <FavouriteStarButton
+            enabled={true}
+            id="cars-favourite-dirt-oval"
+            onClick={[Function]}
+          />
+        </div>
+      </div>
     </div>
     <hr />
     <div

diff --git a/src/components/modal/__tests__/__snapshots__/FavouriteSeriesModal.test.js.snap b/src/components/modal/__tests__/__snapshots__/FavouriteSeriesModal.test.js.snap
@@ -101,7 +101,7 @@ exports[`components/modal/FavouriteSeriesModal renders with checkbox saving 1`]
             </div>
           </div>
           <h3>
-            Road
+            Sports Car
           </h3>
           <div
             className="row"

diff --git a/src/i18n.js b/src/i18n.js
@@ -92,13 +92,6 @@ const resources = {
   pl,
 };
 
-/* istanbul ignore next */
-if (process.env.NODE_ENV === 'development') {
-  languages.test = { flag: '👀', name: 'Test' };
-  // eslint-disable-next-line global-require
-  resources.test = require('../translations/fake').default;
-}
-
 i18n
   .use(LanguageDetector)
   .use(initReactI18next)

diff --git a/translations/en.js b/translations/en.js
@@ -17,6 +17,8 @@ export default {
     'Oval': 'Oval',
     'Dirt': 'Dirt',
     'Road': 'Road',
+    'Sports Car': 'Sports Car',
+    'Formula Car': 'Formula Car',
     'RX': 'RX', // Rally Cross/Road Dirt
     'Licence': 'Licence',
     'Official/Fixed': 'Official/Fixed',
@@ -63,6 +65,10 @@ export default {
     'Select all': 'Select all',
     'Select all oval': 'Select all oval',
     'Select all road': 'Select all road',
+    'Select all dirt oval': 'Select all dirt oval',
+    'Select all dirt road': 'Select all dirt road',
+    'Select all sports car': 'Select all sports car',
+    'Select all formula car': 'Select all formula road',
     'Choose favorite series': 'Choose favorite series',
     'Close': 'Close',
     'Contributors': 'Contributors',
-Original file line number
+Diff line change
@@ Expand Up @@
                 </div>
               </div>
               <h3>
-                Road
+                Sports Car
               </h3>
               <div
                 className="row"
@@ Expand Down @@