better messaging for no players found

2026-04-24 03:00:09 -04:00 · 2021-07-13 15:39:06 +05:30
parent 85fd06f35c
commit 893e1b7a55
7 changed files with 116 additions and 88 deletions
--- a/packages/web/assets/no-players-found.svg
+++ b/packages/web/assets/no-players-found.svg
@@ -0,0 +1,11 @@
+<svg width="80" height="64" viewBox="0 0 80 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.25" clip-path="url(#clip0)">
+<path opacity="0.4" d="M21.6362 34.3238C20.1395 32.8331 18.1124 31.9973 16 32H8C5.87888 32.002 3.8452 32.8455 2.34534 34.3453C0.845478 35.8452 0.00198576 37.8789 0 40V44C0 45.0609 0.421427 46.0783 1.17157 46.8284C1.92172 47.5786 2.93913 48 4 48H12.2388C12.6192 45.1419 13.6684 42.4139 15.3013 40.0376C16.9342 37.6612 19.1046 35.7036 21.6362 34.3238ZM54 18C54.0012 16.1612 53.6398 14.3402 52.9367 12.6411C52.2335 10.942 51.2023 9.39819 49.9021 8.09794C48.6018 6.79769 47.058 5.7665 45.3589 5.06335C43.6599 4.36019 41.8388 3.99885 40 4C32.8587 4 27.04 9.35375 26.175 16.2588L45.125 30.9025C50.305 28.8663 54 23.9125 54 18ZM68 28C69.5823 28 71.129 27.5308 72.4446 26.6518C73.7602 25.7727 74.7855 24.5233 75.391 23.0615C75.9965 21.5997 76.155 19.9911 75.8463 18.4393C75.5376 16.8874 74.7757 15.462 73.6569 14.3431C72.538 13.2243 71.1126 12.4624 69.5607 12.1537C68.0089 11.845 66.4003 12.0035 64.9385 12.609C63.4767 13.2145 62.2273 14.2398 61.3482 15.5554C60.4692 16.871 60 18.4178 60 20C60.002 22.1211 60.8455 24.1548 62.3453 25.6547C63.8452 27.1545 65.8789 27.998 68 28ZM12 28C13.6413 27.9987 15.2418 27.4886 16.5812 26.54L4.52625 17.2225C4.18579 18.1093 4.00754 19.0501 4 20C4.00199 22.1211 4.84548 24.1548 6.34534 25.6547C7.8452 27.1545 9.87888 27.998 12 28ZM16 50.4V54C16 55.5913 16.6321 57.1174 17.7574 58.2427C18.8826 59.3679 20.4087 60 22 60H58C58.5319 59.9929 59.0604 59.9143 59.5713 59.7663L29 36.1413C21.7175 36.8525 16 42.9275 16 50.4ZM72 32H64C61.8876 31.9973 59.8605 32.8331 58.3638 34.3238C60.8955 35.7023 63.0654 37.6597 64.6966 40.0365C66.3279 42.4132 67.3741 45.1419 67.75 48H76C77.0609 48 78.0783 47.5786 78.8284 46.8284C79.5786 46.0783 80 45.0609 80 44V40C79.998 37.8789 79.1545 35.8452 77.6547 34.3453C76.1548 32.8455 74.1211 32.002 72 32Z" fill="white"/>
+<path d="M0.774183 6.73874C0.355517 6.41315 0.0833159 5.93461 0.0174458 5.40835C-0.0484244 4.88209 0.0974309 4.35122 0.422933 3.93249L2.87543 0.77374C3.03667 0.56608 3.23726 0.392247 3.46574 0.262186C3.69423 0.132125 3.94611 0.0483868 4.20698 0.0157631C4.46786 -0.0168606 4.7326 0.00226986 4.98607 0.0720602C5.23955 0.14185 5.47677 0.260931 5.68418 0.42249L79.2279 57.2625C79.6466 57.5881 79.9188 58.0666 79.9847 58.5929C80.0505 59.1191 79.9047 59.65 79.5792 60.0687L77.1254 63.2275C76.7999 63.6462 76.3213 63.9184 75.795 63.9842C75.2688 64.0501 74.7379 63.9042 74.3192 63.5787L0.774183 6.73874Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="80" height="64" fill="white"/>
+</clipPath>
+</defs>
+</svg>
--- a/packages/web/components/Player/Filter/AdjascentTimezonePlayers.tsx
+++ b/packages/web/components/Player/Filter/AdjascentTimezonePlayers.tsx
@@ -21,9 +21,7 @@ const getAdjacentTimezoneQueryVariables = (
        (t) =>
          Math.abs(t.offset - timezone.offset) <= 4 &&
          t.value !== timezoneValue,
-      )
-        .sort((a, b) => (a.offset < b.offset ? -1 : 1))
-        .map((t) => t.value)
+      ).map((t) => t.value)
    : [];
  return {
    ...defaultQueryVariables,
@@ -33,14 +31,17 @@ const getAdjacentTimezoneQueryVariables = (
 };

 export const AdjascentTimezonePlayers: React.FC<Props> = ({
-  queryVariables: defaultQueryVariables,
+  queryVariables,
 }) => {
-  const moreRef = useRef<HTMLDivElement>(null);
-
-  const [queryVariables] = useState(
-    getAdjacentTimezoneQueryVariables(defaultQueryVariables),
+  const [variables, setVariables] = useState<GetPlayersQueryVariables>(
+    getAdjacentTimezoneQueryVariables(queryVariables),
  );

+  useEffect(() => {
+    setVariables(getAdjacentTimezoneQueryVariables(queryVariables));
+  }, [queryVariables]);
+
+  const moreRef = useRef(null);
  const onScreen = useOnScreen(moreRef);

  const {
@@ -51,13 +52,13 @@ export const AdjascentTimezonePlayers: React.FC<Props> = ({
    error,
    nextPage,
    moreAvailable,
-  } = usePlayerFilter(queryVariables);
+  } = usePlayerFilter(variables);

  useEffect(() => {
-    if (onScreen) {
+    if (onScreen && !fetching && !fetchingMore && moreAvailable) {
      nextPage();
    }
-  }, [nextPage, onScreen]);
+  }, [nextPage, onScreen, fetching, fetchingMore, moreAvailable]);

  const isLoading = useMemo(() => fetching || fetchingMore || moreAvailable, [
    fetching,
@@ -78,12 +79,13 @@ export const AdjascentTimezonePlayers: React.FC<Props> = ({
            justify="space-between"
            w="100%"
            maxW="80rem"
-            px="4"
+            pr="4"
            align="center"
+            pb={{ base: 4, md: 0 }}
          >
            <Text fontWeight="bold" fontSize="xl" w="100%" maxW="79rem">
-              Found {totalCount} player{totalCount === 1 ? '' : 's'} in adjacent
-              time zones
+              {totalCount} player{totalCount === 1 ? '' : 's'} in adjacent time
+              zones
            </Text>
          </Flex>
          <PlayerList players={players} />
--- a/packages/web/components/Player/Filter/PlayerFilter.tsx
+++ b/packages/web/components/Player/Filter/PlayerFilter.tsx
@@ -282,7 +282,7 @@ export const PlayerFilter: React.FC<Props> = ({
          justify="space-between"
          w="100%"
          maxW="80rem"
-          px="4"
+          pr="4"
          align="center"
        >
          <Text fontWeight="bold" fontSize="xl" w="100%" maxW="79rem">
--- a/packages/web/components/Player/Filter/PlayersNotFound.tsx
+++ b/packages/web/components/Player/Filter/PlayersNotFound.tsx
@@ -0,0 +1,22 @@
+import { Image, Text, VStack } from '@metafam/ds';
+import PlayersNotFoundImage from 'assets/no-players-found.svg';
+import React from 'react';
+
+export const PlayersNotFound: React.FC = () => (
+  <VStack
+    w="100%"
+    p={{ base: 8, md: 16 }}
+    spacing={{ base: 4, md: 6 }}
+    color="white"
+    borderRadius="0.5rem"
+    bg="blackAlpha.500"
+  >
+    <Image src={PlayersNotFoundImage} />
+    <Text fontWeight="bold" fontSize="xl" textAlign="center">
+      No players found
+    </Text>
+    <Text textAlign="center">
+      It seems we can’t find any players that match the filters you selected.
+    </Text>
+  </VStack>
+);
--- a/packages/web/lib/hooks/players.ts
+++ b/packages/web/lib/hooks/players.ts
@@ -56,8 +56,10 @@ const useFilteredPlayers = (queryVariables: GetPlayersQueryVariables) => {
  const [{ fetching, data, error }] = useGetPlayersQuery({
    variables,
  });
+
  const players = data?.player || [];
  const totalCount = data?.player_aggregate.aggregate?.count || 0;
+
  return { fetching, players, totalCount, error };
 };

@@ -71,6 +73,7 @@ export const usePlayerFilter = (

  const aggregates = usePlayerAggregates();

+  const shouldAppend = useRef(false);
  const setQueryVariable: QueryVariableSetter = useCallback(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (key: string, value: any) => {
@@ -83,6 +86,7 @@ export const usePlayerFilter = (
        offset: 0,
        [key]: value !== '' ? value : null,
      }));
+      shouldAppend.current = key === 'offset';
    },
    [],
  );
@@ -90,19 +94,35 @@ export const usePlayerFilter = (
  const resetFilter = () => setQueryVariables(defaultQueryVariables);

  const {
-    players,
+    fetchedPlayers,
    fetching,
-    fetchingMore,
    error,
    nextPage,
    totalCount,
    moreAvailable,
  } = usePaginatedPlayers(queryVariables, setQueryVariable);

+  const [players, setPlayers] = useState<PlayerFragmentFragment[]>(
+    fetchedPlayers,
+  );
+
+  useEffect(() => {
+    if (error || fetching) {
+      if (error || !shouldAppend.current) {
+        setPlayers([]);
+      }
+    } else if (shouldAppend.current) {
+      setPlayers((p) => [...p, ...fetchedPlayers]);
+      shouldAppend.current = false;
+    } else {
+      setPlayers(fetchedPlayers);
+    }
+  }, [fetchedPlayers, fetching, error]);
+
  return {
    players,
    fetching,
-    fetchingMore,
+    fetchingMore: shouldAppend.current,
    error,
    aggregates,
    queryVariables,
@@ -177,15 +197,11 @@ const usePaginatedPlayers = (
    [currentOffset, itemsPerPage],
  );

-  const shouldAppend = useRef(false);
-
  const nextPage = useCallback(() => {
-    if (currentPage < maxPage && !fetching && !shouldAppend.current) {
-      shouldAppend.current = true;
+    if (currentPage < maxPage && !fetching) {
      setQueryVariable('offset', currentOffset + itemsPerPage);
    }
  }, [
-    shouldAppend,
    fetching,
    setQueryVariable,
    currentOffset,
@@ -194,30 +210,12 @@ const usePaginatedPlayers = (
    maxPage,
  ]);

-  const [players, setPlayers] = useState<PlayerFragmentFragment[]>(
-    fetchedPlayers,
-  );
-
-  useEffect(() => {
-    if (error || fetching) {
-      if (error || !shouldAppend.current) {
-        setPlayers([]);
-      }
-    } else if (shouldAppend.current) {
-      setPlayers((p) => [...p, ...fetchedPlayers]);
-      shouldAppend.current = false;
-    } else {
-      setPlayers(fetchedPlayers);
-    }
-  }, [fetchedPlayers, fetching, error]);
-
  return {
    nextPage,
-    players,
+    fetchedPlayers,
    totalCount,
    fetching,
    error,
-    fetchingMore: shouldAppend.current,
    moreAvailable: currentPage < maxPage,
  };
 };
--- a/packages/web/pages/players.tsx
+++ b/packages/web/pages/players.tsx
@@ -2,6 +2,7 @@ import { LoadingState, Text, VStack } from '@metafam/ds';
 import { PageContainer } from 'components/Container';
 import { AdjascentTimezonePlayers } from 'components/Player/Filter/AdjascentTimezonePlayers';
 import { PlayerFilter } from 'components/Player/Filter/PlayerFilter';
+import { PlayersNotFound } from 'components/Player/Filter/PlayersNotFound';
 import { PlayerList } from 'components/Player/PlayerList';
 import { HeadComponent } from 'components/Seo';
 import { GetPlayersQueryVariables } from 'graphql/autogen/types';
@@ -53,10 +54,10 @@ const Players: React.FC<Props> = () => {
  const onScreen = useOnScreen(moreRef);

  useEffect(() => {
-    if (onScreen) {
+    if (onScreen && !fetching && !fetchingMore && moreAvailable) {
      nextPage();
    }
-  }, [nextPage, onScreen]);
+  }, [nextPage, onScreen, fetching, fetchingMore, moreAvailable]);

  const isLoading = useMemo(() => fetching || fetchingMore || moreAvailable, [
    fetching,
@@ -113,19 +114,11 @@ const MorePlayers = React.forwardRef<HTMLDivElement, MorePlayersProps>(

    return (
      <VStack w="100%" ref={ref}>
-        {fetching ? (
-          <LoadingState color="white" />
-        ) : (
-          <Text color="white">
-            {totalCount > 0
-              ? `No more players available${
-                  isTimezoneSelected ? ' in this time zone' : ''
-                }`
-              : `There were no matches${
-                  isTimezoneSelected ? ' for this time zone' : ''
-                }`}
-          </Text>
-        )}
+        {fetching ? <LoadingState color="white" /> : null}
+        {!fetching && !isTimezoneSelected && totalCount > 0 ? (
+          <Text color="white">No more players available</Text>
+        ) : null}
+        {!fetching && totalCount === 0 ? <PlayersNotFound /> : null}
        {!fetching && isTimezoneSelected ? (
          <AdjascentTimezonePlayers queryVariables={queryVariables} />
        ) : null}