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>
2024-04-22 23:57:49 -07:00 · 2024-04-22 23:57:49 -07:00 · 4a38168593
commit 4a38168593
parent 2eaaf1baae
8 changed files with 123 additions and 136 deletions
--- 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;
--- 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 {
--- 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>
  )
 }

--- a/hooks/useTeamFilter.tsx
+++ b/hooks/useTeamFilter.tsx
@ -171,7 +171,7 @@ export const useTeamFilter = (
    isFetching,
    setFetching,
    fetchError,
-    fetchTeams,
+    fetch,
    processTeams,
    currentPage,
    setCurrentPage,
--- 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,
      }
    }

--- 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'])),
--- 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'])),
--- 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,