Further GridRep and Collection fixes (#417)

* z-index issues
* Some issues with GridRep (but there are still issues)
* Added a message when no teams are found for the current set of filters

---------

Co-authored-by: Justin Edmund <383021+jedmund@users.noreply.github.com>

components/filters/FilterBar/index.module.scss

@@ -16,7 +16,7 @@
   width: 100%;
   max-width: 996px;
   min-height: 80px;
-  z-index: 999;
+  z-index: 100;
 
   @include breakpoint(tablet) {
     position: static;

components/reps/GridRep/index.module.scss

@@ -68,12 +68,12 @@
   }
 
   .gridContainer {
-    aspect-ratio: 2/0.95;
+    aspect-ratio: 2.1/1;
     width: 100%;
   }
 
   .characterGrid {
-    aspect-ratio: 2/0.95;
+    aspect-ratio: 2.1/1;
     display: flex;
     justify-content: space-between;
 
@@ -121,7 +121,7 @@
       border-radius: $item-corner-small;
       aspect-ratio: 69/142;
       list-style: none;
-      height: calc(100% - $unit-half);
+      height: calc(100% - $unit);
 
       img {
         border-radius: $item-corner-small;
@@ -131,9 +131,9 @@
   }
 
   .weaponGrid {
-    aspect-ratio: 2/0.8;
+    aspect-ratio: 3.25/1;
     display: grid;
-    grid-template-columns: 1fr 3.6fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
+    grid-template-columns: 1fr 3.55fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
     grid-gap: $unit; /* add a gap of 8px between grid items */
 
     .weapon {
@@ -145,7 +145,7 @@
       aspect-ratio: 73/153;
       display: grid;
       grid-column: 1 / 2; /* spans one column */
-      height: calc(100% - $unit-fourth);
+      height: 100%;
     }
 
     .weapons {
@@ -176,7 +176,7 @@
   }
 
   .summonGrid {
-    aspect-ratio: 2/0.94;
+    aspect-ratio: 2/0.91;
     display: flex;
     gap: $unit;
     justify-content: space-between;
@@ -259,6 +259,7 @@
         flex-direction: column;
         flex-grow: 1;
         gap: calc($unit / 2);
+        max-width: calc(100% - 44px - $unit);
       }
 
       .iconWrapper {

components/reps/GridRep/index.tsx

@@ -586,7 +586,7 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
   }
 
   return (
-    <div className={gridRepClasses}>
+    <div className={gridRepClasses} title={party.name}>
       {renderFavoriteButton}
       <Link
         href={`/p/${party.shortcode}`}

hooks/useFetchTeams.tsx

@@ -9,7 +9,8 @@ export const useFetchTeams = (
   setTotalPages: (value: number) => void,
   setRecordCount: (value: number) => void
 ) => {
-  const [isLoading, setIsLoading] = useState(false)
+  const [loaded, setLoaded] = useState(false)
+  const [fetching, setFetching] = useState(false)
   const [error, setError] = useState(false)
 
   function parseTeams(response: { [key: string]: any }, replace: boolean) {
@@ -17,15 +18,17 @@ export const useFetchTeams = (
 
     setTotalPages(meta.total_pages)
     setRecordCount(meta.count)
+    setLoaded(true)
 
     if (replace) {
       replaceResults(parties)
-      setIsLoading(false)
+      setFetching(false)
     } else appendResults(parties)
   }
 
   function parseError(error: any) {
-    setIsLoading(false)
+    setLoaded(true)
+    setFetching(false)
     setError(true)
   }
 
@@ -62,7 +65,7 @@ export const useFetchTeams = (
 
   const fetchTeams = useCallback(
     ({ replace } = { replace: false }) => {
-      if (replace) setIsLoading(true)
+      if (replace) setFetching(true)
 
       const params = createParams()
 
@@ -89,7 +92,7 @@ export const useFetchTeams = (
       username: string | undefined
       replace: boolean
     }) => {
-      if (replace) setIsLoading(true)
+      if (replace) setFetching(true)
 
       const params = createParams()
 
@@ -115,7 +118,7 @@ export const useFetchTeams = (
 
   const fetchSaved = useCallback(
     ({ replace } = { replace: false }) => {
-      if (replace) setIsLoading(true)
+      if (replace) setFetching(true)
 
       const params = createParams()
 
@@ -139,8 +142,9 @@ export const useFetchTeams = (
     fetchProfile,
     fetchSaved,
     processTeams,
-    isLoading,
-    setIsLoading,
+    loaded,
+    fetching,
+    setFetching,
     error,
   }
 }

hooks/useTeamFilter.tsx

@@ -76,8 +76,9 @@ export const useTeamFilter = (
     fetchProfile,
     fetchSaved,
     processTeams,
-    isLoading: isFetching,
-    setIsLoading: setFetching,
+    loaded,
+    fetching,
+    setFetching,
     error: fetchError,
   } = useFetchTeams(
     currentPage,
@@ -168,7 +169,8 @@ export const useTeamFilter = (
     setAdvancedFilters,
     parties,
     setParties,
-    isFetching,
+    loaded,
+    fetching,
     setFetching,
     fetchError,
     fetch,

pages/[username].tsx

@@ -71,7 +71,8 @@ const ProfileRoute: React.FC<Props> = ({
     recordCount,
     parties,
     setParties,
-    isFetching,
+    loaded,
+    fetching,
     setFetching,
     fetchError,
     fetch,
@@ -155,6 +156,13 @@ const ProfileRoute: React.FC<Props> = ({
   }
 
   const renderInfiniteScroll = (
+    <>
+      {parties.length === 0 && !loaded && renderLoading(3)}
+      {parties.length === 0 && loaded && (
+        <div className="notFound">
+          <h2>There are no teams with your specified filters</h2>
+        </div>
+      )}
       <InfiniteScroll
         dataLength={parties && parties.length > 0 ? parties.length : 0}
         next={() => setCurrentPage(currentPage + 1)}
@@ -163,6 +171,7 @@ const ProfileRoute: React.FC<Props> = ({
       >
         <GridRepCollection>{renderParties()}</GridRepCollection>
       </InfiniteScroll>
+    </>
   )
 
   if (context) {

pages/saved.tsx

@@ -66,7 +66,8 @@ const SavedRoute: React.FC<Props> = ({
     recordCount,
     parties,
     setParties,
-    isFetching,
+    loaded,
+    fetching,
     setFetching,
     fetchError,
     fetch,
@@ -150,6 +151,13 @@ const SavedRoute: React.FC<Props> = ({
   }
 
   const renderInfiniteScroll = (
+    <>
+      {parties.length === 0 && !loaded && renderLoading(3)}
+      {parties.length === 0 && loaded && (
+        <div className="notFound">
+          <h2>There are no teams with your specified filters</h2>
+        </div>
+      )}
       <InfiniteScroll
         dataLength={parties && parties.length > 0 ? parties.length : 0}
         next={() => setCurrentPage(currentPage + 1)}
@@ -158,6 +166,7 @@ const SavedRoute: React.FC<Props> = ({
       >
         <GridRepCollection>{renderParties()}</GridRepCollection>
       </InfiniteScroll>
+    </>
   )
 
   if (context) {

pages/teams.tsx

@@ -63,7 +63,8 @@ const TeamsRoute: React.FC<Props> = ({
     recordCount,
     parties,
     setParties,
-    isFetching,
+    loaded,
+    fetching,
     setFetching,
     fetchError,
     fetch,
@@ -126,7 +127,7 @@ const TeamsRoute: React.FC<Props> = ({
       <GridRep
         party={party}
         key={`party-${i}`}
-        loading={isFetching}
+        loading={fetching}
         onClick={() => goTo(party.shortcode)}
         onSave={(teamId, favorited) => toggleFavorite(teamId, favorited)}
       />
@@ -145,7 +146,12 @@ const TeamsRoute: React.FC<Props> = ({
 
   const renderInfiniteScroll = (
     <>
-      {parties.length === 0 && renderLoading(3)}
+      {parties.length === 0 && !loaded && renderLoading(3)}
+      {parties.length === 0 && loaded && (
+        <div className="notFound">
+          <h2>There are no teams with your specified filters</h2>
+        </div>
+      )}
       <InfiniteScroll
         dataLength={parties && parties.length > 0 ? parties.length : 0}
         next={() => setCurrentPage(currentPage + 1)}