From 4a381685939a39c82e624094d773f503aa0aa3b7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 22 Apr 2024 23:57:49 -0700
Subject: [PATCH] Collection fixes (#416)

This fixes some issues that cropped up in the last PR

---------

Co-authored-by: Justin Edmund <383021+jedmund@users.noreply.github.com>
---
 .../filters/FilterBar/index.module.scss       |   1 +
 components/reps/GridRep/index.module.scss     |  25 +++-
 components/reps/GridRep/index.tsx             | 123 +++++++++---------
 hooks/useTeamFilter.tsx                       |   2 +-
 pages/[username].tsx                          |  25 +---
 pages/saved.tsx                               |  28 ++--
 pages/teams.tsx                               |  51 +++-----
 utils/serverSideUtils.tsx                     |   4 +
 8 files changed, 123 insertions(+), 136 deletions(-)

diff --git a/components/filters/FilterBar/index.module.scss b/components/filters/FilterBar/index.module.scss
index 14275f19..9690d232 100644
--- a/components/filters/FilterBar/index.module.scss
+++ b/components/filters/FilterBar/index.module.scss
@@ -16,6 +16,7 @@
   width: 100%;
   max-width: 996px;
   min-height: 80px;
+  z-index: 999;
 
   @include breakpoint(tablet) {
     position: static;
diff --git a/components/reps/GridRep/index.module.scss b/components/reps/GridRep/index.module.scss
index 76909c85..7b113762 100644
--- a/components/reps/GridRep/index.module.scss
+++ b/components/reps/GridRep/index.module.scss
@@ -3,11 +3,8 @@
   border: 1px solid transparent;
   border-radius: $card-corner;
   box-sizing: border-box;
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-  gap: $unit;
-  padding: $unit-2x $unit-2x 0 $unit-2x;
   min-width: 320px;
+  position: relative;
   width: 100%;
   opacity: 1;
 
@@ -54,6 +51,22 @@
     }
   }
 
+  a {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-gap: 8px;
+    gap: 8px;
+    padding: $unit-2x $unit-2x 0 $unit-2x;
+  }
+
+  button {
+    position: absolute;
+    z-index: 2;
+    right: $unit-2x;
+    top: $unit-2x;
+    width: 44px;
+  }
+
   .gridContainer {
     aspect-ratio: 2/0.95;
     width: 100%;
@@ -118,9 +131,9 @@
   }
 
   .weaponGrid {
-    aspect-ratio: 2/0.95;
+    aspect-ratio: 2/0.8;
     display: grid;
-    grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
+    grid-template-columns: 1fr 3.6fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
     grid-gap: $unit; /* add a gap of 8px between grid items */
 
     .weapon {
diff --git a/components/reps/GridRep/index.tsx b/components/reps/GridRep/index.tsx
index 5bc83389..36a088c6 100644
--- a/components/reps/GridRep/index.tsx
+++ b/components/reps/GridRep/index.tsx
@@ -501,19 +501,17 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
   )
 
   const favoriteButton = (
-    <Link href="#">
-      <Button
-        className={classNames({
-          save: true,
-          saved: party.favorited,
-        })}
-        leftAccessoryIcon={<SaveIcon className="stroke" />}
-        active={party.favorited}
-        bound={true}
-        size="small"
-        onClick={sendSaveData}
-      />
-    </Link>
+    <Button
+      className={classNames({
+        save: true,
+        saved: party.favorited,
+      })}
+      leftAccessoryIcon={<SaveIcon className="stroke" />}
+      active={party.favorited}
+      bound={true}
+      size="small"
+      onClick={sendSaveData}
+    />
   )
 
   const renderFavoriteButton =
@@ -563,11 +561,12 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
             )}
           </div>
         </div>
-        <div className={styles.buttonArea}>
-          {renderPrivateIcon}
-          {renderVisibilityIcon}
-          {renderFavoriteButton}
-        </div>
+        {[2, 3].includes(party.visibility) && (
+          <div className={styles.buttonArea}>
+            {renderPrivateIcon}
+            {renderVisibilityIcon}
+          </div>
+        )}
       </div>
       <div className={styles.attributed}>
         {attribution()}
@@ -587,49 +586,51 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
   }
 
   return (
-    <Link
-      href={`/p/${party.shortcode}`}
-      className={gridRepClasses}
-      onMouseLeave={() => changeView('weapons')}
-    >
-      {detailsWithUsername}
-      <div className={styles.gridContainer}>
-        {currentView === 'characters'
-          ? renderCharacterGrid
-          : currentView === 'summons'
-          ? renderSummonGrid
-          : renderWeaponGrid}
-      </div>
-      <ul className={styles.indicators}>
-        <li
-          className={classNames({
-            [styles.active]: currentView === 'characters',
-          })}
-          onMouseEnter={() => changeView('characters')}
-        >
-          <div className={styles.indicator} />
-          <span>Characters</span>
-        </li>
-        <li
-          className={classNames({
-            [styles.active]: currentView === 'weapons',
-          })}
-          onMouseEnter={() => changeView('weapons')}
-        >
-          <div className={styles.indicator} />
-          <span>Weapons</span>
-        </li>
-        <li
-          className={classNames({
-            [styles.active]: currentView === 'summons',
-          })}
-          onMouseEnter={() => changeView('summons')}
-        >
-          <div className={styles.indicator} />
-          <span>Summons</span>
-        </li>
-      </ul>
-    </Link>
+    <div className={gridRepClasses}>
+      {renderFavoriteButton}
+      <Link
+        href={`/p/${party.shortcode}`}
+        onMouseLeave={() => changeView('weapons')}
+      >
+        {detailsWithUsername}
+        <div className={styles.gridContainer}>
+          {currentView === 'characters'
+            ? renderCharacterGrid
+            : currentView === 'summons'
+            ? renderSummonGrid
+            : renderWeaponGrid}
+        </div>
+        <ul className={styles.indicators}>
+          <li
+            className={classNames({
+              [styles.active]: currentView === 'characters',
+            })}
+            onMouseEnter={() => changeView('characters')}
+          >
+            <div className={styles.indicator} />
+            <span>Characters</span>
+          </li>
+          <li
+            className={classNames({
+              [styles.active]: currentView === 'weapons',
+            })}
+            onMouseEnter={() => changeView('weapons')}
+          >
+            <div className={styles.indicator} />
+            <span>Weapons</span>
+          </li>
+          <li
+            className={classNames({
+              [styles.active]: currentView === 'summons',
+            })}
+            onMouseEnter={() => changeView('summons')}
+          >
+            <div className={styles.indicator} />
+            <span>Summons</span>
+          </li>
+        </ul>
+      </Link>
+    </div>
   )
 }
 
diff --git a/hooks/useTeamFilter.tsx b/hooks/useTeamFilter.tsx
index ac6cf9f6..07866c5b 100644
--- a/hooks/useTeamFilter.tsx
+++ b/hooks/useTeamFilter.tsx
@@ -171,7 +171,7 @@ export const useTeamFilter = (
     isFetching,
     setFetching,
     fetchError,
-    fetchTeams,
+    fetch,
     processTeams,
     currentPage,
     setCurrentPage,
diff --git a/pages/[username].tsx b/pages/[username].tsx
index 7636bc25..70e1396f 100644
--- a/pages/[username].tsx
+++ b/pages/[username].tsx
@@ -8,19 +8,16 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 // Hooks
 import { useFavorites } from '~hooks/useFavorites'
 import { useTeamFilter } from '~hooks/useTeamFilter'
-import useDidMountEffect from '~hooks/useDidMountEffect'
 
 // Utils
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import { appState } from '~utils/appState'
-import { convertAdvancedFilters } from '~utils/convertAdvancedFilters'
 import { CollectionPage } from '~utils/enums'
 import { permissiveFilterset } from '~utils/defaultFilters'
 import { setHeaders } from '~utils/userToken'
 import {
   fetchRaidGroupsAndFilters,
   fetchUserProfile,
-  parseAdvancedFilters,
 } from '~utils/serverSideUtils'
 
 // Types
@@ -77,7 +74,7 @@ const ProfileRoute: React.FC<Props> = ({
     isFetching,
     setFetching,
     fetchError,
-    fetchTeams,
+    fetch,
     processTeams,
     setPagination,
   } = useTeamFilter(CollectionPage.Profile, context)
@@ -85,20 +82,17 @@ const ProfileRoute: React.FC<Props> = ({
   const { toggleFavorite } = useFavorites(parties, setParties)
 
   // Set the initial parties from props
-  useDidMountEffect(() => {
+  useEffect(() => {
     if (context) {
-      if (context.teams && context.pagination) {
-        processTeams(context.teams, true)
-        setPagination(context.pagination)
+      fetch(true)
 
-        appState.raidGroups = context.raidGroups
-        appState.version = version
-      }
+      appState.raidGroups = context.raidGroups
+      appState.version = version
     }
 
     setCurrentPage(1)
     setFetching(false)
-  }, [context])
+  }, [])
 
   // Fetch all raids on mount, then find the raid in the URL if present
   useEffect(() => {
@@ -230,16 +224,11 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
 
     // Perform a request only if we received a username
     if (query.username) {
-      const { user, teams, pagination } = await fetchUserProfile(
-        query.username,
-        filters
-      )
+      const { user } = await fetchUserProfile(query.username, {})
 
       context = {
         user: user,
-        teams: teams,
         raidGroups: raidGroups,
-        pagination: pagination,
       }
     }
 
diff --git a/pages/saved.tsx b/pages/saved.tsx
index ae20a6bc..8a71b722 100644
--- a/pages/saved.tsx
+++ b/pages/saved.tsx
@@ -8,20 +8,14 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 // Hooks
 import { useFavorites } from '~hooks/useFavorites'
 import { useTeamFilter } from '~hooks/useTeamFilter'
-import useDidMountEffect from '~hooks/useDidMountEffect'
 
 // Utils
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import { appState } from '~utils/appState'
-import { convertAdvancedFilters } from '~utils/convertAdvancedFilters'
 import { CollectionPage } from '~utils/enums'
 import { permissiveFilterset } from '~utils/defaultFilters'
 import { setHeaders } from '~utils/userToken'
-import {
-  fetchRaidGroupsAndFilters,
-  fetchSaved,
-  parseAdvancedFilters,
-} from '~utils/serverSideUtils'
+import { fetchRaidGroups } from '~utils/serverSideUtils'
 
 // Types
 import type { AxiosError } from 'axios'
@@ -75,7 +69,7 @@ const SavedRoute: React.FC<Props> = ({
     isFetching,
     setFetching,
     fetchError,
-    fetchTeams,
+    fetch,
     processTeams,
     setPagination,
   } = useTeamFilter(CollectionPage.Saved, context)
@@ -83,20 +77,17 @@ const SavedRoute: React.FC<Props> = ({
   const { toggleFavorite } = useFavorites(parties, setParties)
 
   // Set the initial parties from props
-  useDidMountEffect(() => {
+  useEffect(() => {
     if (context) {
-      if (context.teams && context.pagination) {
-        processTeams(context.teams, true)
-        setPagination(context.pagination)
+      fetch(true)
 
-        appState.raidGroups = context.raidGroups
-        appState.version = version
-      }
+      appState.raidGroups = context.raidGroups
+      appState.version = version
     }
 
     setCurrentPage(1)
     setFetching(false)
-  }, [context])
+  }, [])
 
   // Fetch all raids on mount, then find the raid in the URL if present
   useEffect(() => {
@@ -222,12 +213,11 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
 
   try {
     // We don't pre-load advanced filters here
-    const { raidGroups, filters } = await fetchRaidGroupsAndFilters(query)
-    const { teams, pagination } = await fetchSaved(filters)
+    const raidGroups= await fetchRaidGroups()
 
     return {
       props: {
-        context: { teams, raidGroups, pagination },
+        context: { raidGroups },
         version,
         error: false,
         ...(await serverSideTranslations(locale, ['common'])),
diff --git a/pages/teams.tsx b/pages/teams.tsx
index b25edb31..2be3e330 100644
--- a/pages/teams.tsx
+++ b/pages/teams.tsx
@@ -9,19 +9,13 @@ import InfiniteScroll from 'react-infinite-scroll-component'
 // Hooks
 import { useFavorites } from '~hooks/useFavorites'
 import { useTeamFilter } from '~hooks/useTeamFilter'
-import useDidMountEffect from '~hooks/useDidMountEffect'
 
 // Utils
 import fetchLatestVersion from '~utils/fetchLatestVersion'
 import { appState } from '~utils/appState'
-import { convertAdvancedFilters } from '~utils/convertAdvancedFilters'
 import { defaultFilterset } from '~utils/defaultFilters'
 import { setHeaders } from '~utils/userToken'
-import {
-  fetchParties,
-  fetchRaidGroupsAndFilters,
-  parseAdvancedFilters,
-} from '~utils/serverSideUtils'
+import { fetchRaidGroups } from '~utils/serverSideUtils'
 
 // Types
 import type { NextApiRequest, NextApiResponse } from 'next'
@@ -72,7 +66,7 @@ const TeamsRoute: React.FC<Props> = ({
     isFetching,
     setFetching,
     fetchError,
-    fetchTeams,
+    fetch,
     processTeams,
     setPagination,
   } = useTeamFilter(CollectionPage.Teams, context)
@@ -80,20 +74,17 @@ const TeamsRoute: React.FC<Props> = ({
   const { toggleFavorite } = useFavorites(parties, setParties)
 
   // Set the initial parties from props
-  useDidMountEffect(() => {
+  useEffect(() => {
     if (context) {
-      if (context.teams && context.pagination) {
-        processTeams(context.teams, true)
-        setPagination(context.pagination)
+      fetch(true)
 
-        appState.raidGroups = context.raidGroups
-        appState.version = version
-      }
+      appState.raidGroups = context.raidGroups
+      appState.version = version
     }
 
     setCurrentPage(1)
     setFetching(false)
-  }, [context])
+  }, [])
 
   // Fetch all raids on mount, then find the raid in the URL if present
   useEffect(() => {
@@ -153,14 +144,17 @@ const TeamsRoute: React.FC<Props> = ({
   }
 
   const renderInfiniteScroll = (
-    <InfiniteScroll
-      dataLength={parties && parties.length > 0 ? parties.length : 0}
-      next={() => setCurrentPage(currentPage + 1)}
-      hasMore={totalPages > currentPage}
-      loader={renderLoading(3)}
-    >
-      <GridRepCollection>{renderParties()}</GridRepCollection>
-    </InfiniteScroll>
+    <>
+      {parties.length === 0 && renderLoading(3)}
+      <InfiniteScroll
+        dataLength={parties && parties.length > 0 ? parties.length : 0}
+        next={() => setCurrentPage(currentPage + 1)}
+        hasMore={totalPages > currentPage}
+        loader={renderLoading(3)}
+      >
+        <GridRepCollection>{renderParties()}</GridRepCollection>
+      </InfiniteScroll>
+    </>
   )
 
   if (context) {
@@ -205,16 +199,11 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   const version = await fetchLatestVersion()
 
   try {
-    const advancedFilters = parseAdvancedFilters(req, res)
-    const convertedFilters = advancedFilters
-      ? convertAdvancedFilters(advancedFilters)
-      : undefined
-    const { raidGroups, filters } = await fetchRaidGroupsAndFilters(query)
-    const { teams, pagination } = await fetchParties(filters, convertedFilters)
+    const raidGroups = await fetchRaidGroups()
 
     return {
       props: {
-        context: { teams, raidGroups, pagination },
+        context: { raidGroups },
         version,
         error: false,
         ...(await serverSideTranslations(locale, ['common'])),
diff --git a/utils/serverSideUtils.tsx b/utils/serverSideUtils.tsx
index a0cdf088..569fe000 100644
--- a/utils/serverSideUtils.tsx
+++ b/utils/serverSideUtils.tsx
@@ -23,6 +23,10 @@ export async function fetchRaidGroupsAndFilters(query: {
   return { raidGroups, filters }
 }
 
+export async function fetchRaidGroups() {
+  return await api.raidGroups().then((response) => response.data)
+}
+
 // Fetch initial set of parties
 export async function fetchParties(
   filters: FilterObject,