diff --git a/components/filters/FilterBar/index.module.scss b/components/filters/FilterBar/index.module.scss
index 14275f19..9690d232 100644
--- 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;
diff --git a/components/reps/GridRep/index.module.scss b/components/reps/GridRep/index.module.scss
index 76909c85..7b113762 100644
--- 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 {
diff --git a/components/reps/GridRep/index.tsx b/components/reps/GridRep/index.tsx
index 5bc83389..36a088c6 100644
--- 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 = (
-
- }
- active={party.favorited}
- bound={true}
- size="small"
- onClick={sendSaveData}
- />
-
+ }
+ active={party.favorited}
+ bound={true}
+ size="small"
+ onClick={sendSaveData}
+ />
)
const renderFavoriteButton =
@@ -563,11 +561,12 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
)}
-
- {renderPrivateIcon}
- {renderVisibilityIcon}
- {renderFavoriteButton}
-
+ {[2, 3].includes(party.visibility) && (
+
+ {renderPrivateIcon}
+ {renderVisibilityIcon}
+
+ )}
{attribution()}
@@ -587,49 +586,51 @@ const GridRep = ({ party, loading, onClick, onSave }: Props) => {
}
return (
-
changeView('weapons')}
- >
- {detailsWithUsername}
-
- {currentView === 'characters'
- ? renderCharacterGrid
- : currentView === 'summons'
- ? renderSummonGrid
- : renderWeaponGrid}
-
-
- - changeView('characters')}
- >
-
- Characters
-
- - changeView('weapons')}
- >
-
- Weapons
-
- - changeView('summons')}
- >
-
- Summons
-
-
-
+
+ {renderFavoriteButton}
+
changeView('weapons')}
+ >
+ {detailsWithUsername}
+
+ {currentView === 'characters'
+ ? renderCharacterGrid
+ : currentView === 'summons'
+ ? renderSummonGrid
+ : renderWeaponGrid}
+
+
+ - changeView('characters')}
+ >
+
+ Characters
+
+ - changeView('weapons')}
+ >
+
+ Weapons
+
+ - changeView('summons')}
+ >
+
+ Summons
+
+
+
+
)
}
diff --git a/hooks/useTeamFilter.tsx b/hooks/useTeamFilter.tsx
index ac6cf9f6..07866c5b 100644
--- a/hooks/useTeamFilter.tsx
+++ b/hooks/useTeamFilter.tsx
@@ -171,7 +171,7 @@ export const useTeamFilter = (
isFetching,
setFetching,
fetchError,
- fetchTeams,
+ fetch,
processTeams,
currentPage,
setCurrentPage,
diff --git a/pages/[username].tsx b/pages/[username].tsx
index 7636bc25..70e1396f 100644
--- 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
= ({
isFetching,
setFetching,
fetchError,
- fetchTeams,
+ fetch,
processTeams,
setPagination,
} = useTeamFilter(CollectionPage.Profile, context)
@@ -85,20 +82,17 @@ const ProfileRoute: React.FC = ({
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,
}
}
diff --git a/pages/saved.tsx b/pages/saved.tsx
index ae20a6bc..8a71b722 100644
--- 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 = ({
isFetching,
setFetching,
fetchError,
- fetchTeams,
+ fetch,
processTeams,
setPagination,
} = useTeamFilter(CollectionPage.Saved, context)
@@ -83,20 +77,17 @@ const SavedRoute: React.FC = ({
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'])),
diff --git a/pages/teams.tsx b/pages/teams.tsx
index b25edb31..2be3e330 100644
--- 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 = ({
isFetching,
setFetching,
fetchError,
- fetchTeams,
+ fetch,
processTeams,
setPagination,
} = useTeamFilter(CollectionPage.Teams, context)
@@ -80,20 +74,17 @@ const TeamsRoute: React.FC = ({
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 = ({
}
const renderInfiniteScroll = (
- 0 ? parties.length : 0}
- next={() => setCurrentPage(currentPage + 1)}
- hasMore={totalPages > currentPage}
- loader={renderLoading(3)}
- >
- {renderParties()}
-
+ <>
+ {parties.length === 0 && renderLoading(3)}
+ 0 ? parties.length : 0}
+ next={() => setCurrentPage(currentPage + 1)}
+ hasMore={totalPages > currentPage}
+ loader={renderLoading(3)}
+ >
+ {renderParties()}
+
+ >
)
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'])),
diff --git a/utils/serverSideUtils.tsx b/utils/serverSideUtils.tsx
index a0cdf088..569fe000 100644
--- 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,