Add message when no teams were found

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/teams.tsx

@@ -32,6 +32,7 @@ import { CollectionPage } from '~utils/enums'
 
 interface Props {
   context?: PageContextObj
+  query: { [key: string]: string }
   version: AppUpdate
   error: boolean
   status?: ResponseStatus
@@ -39,6 +40,7 @@ interface Props {
 
 const TeamsRoute: React.FC<Props> = ({
   context,
+  query,
   version,
   error,
   status,
@@ -63,7 +65,8 @@ const TeamsRoute: React.FC<Props> = ({
     recordCount,
     parties,
     setParties,
-    isFetching,
+    loaded,
+    fetching,
     setFetching,
     fetchError,
     fetch,
@@ -126,7 +129,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 +148,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)}
@@ -204,6 +212,7 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     return {
       props: {
         context: { raidGroups },
+        query,
         version,
         error: false,
         ...(await serverSideTranslations(locale, ['common'])),