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>

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;

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 {

components/reps/GridRep/index.tsx

@@ -501,7 +501,6 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
   )
 
   const favoriteButton = (
-    <Link href="#">
     <Button
       className={classNames({
         save: true,
@@ -513,7 +512,6 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
       size="small"
       onClick={sendSaveData}
     />
-    </Link>
   )
 
   const renderFavoriteButton =
@@ -563,11 +561,12 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
             )}
           </div>
         </div>
+        {[2, 3].includes(party.visibility) && (
           <div className={styles.buttonArea}>
             {renderPrivateIcon}
             {renderVisibilityIcon}
-          {renderFavoriteButton}
           </div>
+        )}
       </div>
       <div className={styles.attributed}>
         {attribution()}
@@ -587,9 +586,10 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
   }
 
   return (
+    <div className={gridRepClasses}>
+      {renderFavoriteButton}
       <Link
         href={`/p/${party.shortcode}`}
-      className={gridRepClasses}
         onMouseLeave={() => changeView('weapons')}
       >
         {detailsWithUsername}
@@ -630,6 +630,7 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
           </li>
         </ul>
       </Link>
+    </div>
   )
 }
 

hooks/useTeamFilter.tsx

@@ -171,7 +171,7 @@ export const useTeamFilter = (
     isFetching,
     setFetching,
     fetchError,
-    fetchTeams,
+    fetch,
     processTeams,
     currentPage,
     setCurrentPage,

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) {
+      fetch(true)
-        processTeams(context.teams, true)
-        setPagination(context.pagination)
 
       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(
+      const { user } = await fetchUserProfile(query.username, {})
-        query.username,
-        filters
-      )
 
       context = {
         user: user,
-        teams: teams,
         raidGroups: raidGroups,
-        pagination: pagination,
       }
     }
 

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 {
+import { fetchRaidGroups } from '~utils/serverSideUtils'
-  fetchRaidGroupsAndFilters,
-  fetchSaved,
-  parseAdvancedFilters,
-} 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) {
+      fetch(true)
-        processTeams(context.teams, true)
-        setPagination(context.pagination)
 
       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 raidGroups= await fetchRaidGroups()
-    const { teams, pagination } = await fetchSaved(filters)
 
     return {
       props: {
-        context: { teams, raidGroups, pagination },
+        context: { raidGroups },
         version,
         error: false,
         ...(await serverSideTranslations(locale, ['common'])),

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 {
+import { fetchRaidGroups } from '~utils/serverSideUtils'
-  fetchParties,
-  fetchRaidGroupsAndFilters,
-  parseAdvancedFilters,
-} 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) {
+      fetch(true)
-        processTeams(context.teams, true)
-        setPagination(context.pagination)
 
       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,6 +144,8 @@ const TeamsRoute: React.FC<Props> = ({
   }
 
   const renderInfiniteScroll = (
+    <>
+      {parties.length === 0 && renderLoading(3)}
       <InfiniteScroll
         dataLength={parties && parties.length > 0 ? parties.length : 0}
         next={() => setCurrentPage(currentPage + 1)}
@@ -161,6 +154,7 @@ const TeamsRoute: React.FC<Props> = ({
       >
         <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 raidGroups = await fetchRaidGroups()
-    const convertedFilters = advancedFilters
-      ? convertAdvancedFilters(advancedFilters)
-      : undefined
-    const { raidGroups, filters } = await fetchRaidGroupsAndFilters(query)
-    const { teams, pagination } = await fetchParties(filters, convertedFilters)
 
     return {
       props: {
-        context: { teams, raidGroups, pagination },
+        context: { raidGroups },
         version,
         error: false,
         ...(await serverSideTranslations(locale, ['common'])),

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,