Update profile and filter bar

components/FilterBar/index.tsx

@@ -69,7 +69,7 @@ const FilterBar = (props: Props) => {
     <div className={classes}>
       {props.children}
       <Select
-        defaultValue={-1}
+        defaultValue="-1"
         trigger={'All elements'}
         open={elementOpen}
         onChange={elementSelectChanged}
@@ -110,7 +110,7 @@ const FilterBar = (props: Props) => {
       />
 
       <Select
-        defaultValue={-1}
+        defaultValue="-1"
         trigger={'All time'}
         open={recencyOpen}
         onChange={recencySelectChanged}

components/GridRep/index.tsx

@@ -79,7 +79,7 @@ const GridRep = (props: Props) => {
     let url = ''
 
     if (mainhand) {
-      if (mainhand.element == 0 && props.grid[0].element) {
+      if (mainhand.element == 0 && props.grid[0] && props.grid[0].element) {
         url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${props.grid[0].element}.jpg`
       } else {
         url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}.jpg`

components/SearchModal/index.tsx

@@ -85,8 +85,8 @@ const SearchModal = (props: Props) => {
         page: currentPage,
       })
       .then((response) => {
-        setTotalPages(response.data.total_pages)
+        setTotalPages(response.data.meta.total_pages)
-        setRecordCount(response.data.count)
+        setRecordCount(response.data.meta.count)
 
         if (replace) {
           replaceResults(response.data.count, response.data.results)

pages/[username].tsx

@@ -18,10 +18,12 @@ import GridRepCollection from '~components/GridRepCollection'
 import FilterBar from '~components/FilterBar'
 
 import type { NextApiRequest, NextApiResponse } from 'next'
+import { PaginationObject } from '~types'
 
 interface Props {
   user?: User
-  teams?: { count: number; total_pages: number; results: Party[] }
+  teams?: Party[]
+  meta: PaginationObject
   raids: Raid[]
   sortedRaids: Raid[][]
 }
@@ -95,9 +97,9 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
   // Set the initial parties from props
   useEffect(() => {
     if (props.teams) {
-      setTotalPages(props.teams.total_pages)
+      setTotalPages(props.meta.totalPages)
-      setRecordCount(props.teams.count)
+      setRecordCount(props.meta.count)
-      replaceResults(props.teams.count, props.teams.results)
+      replaceResults(props.meta.count, props.teams)
     }
     setCurrentPage(1)
   }, [])
@@ -113,6 +115,7 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
     if (error.response != null) {
       console.error(error)
     } else {
+      // TODO: Put an alert here
       console.error('There was an error.')
     }
   }, [])
@@ -135,15 +138,14 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
             params: { ...filters, ...{ headers: headers } },
           })
           .then((response) => {
-            setTotalPages(response.data.parties.total_pages)
+            const results = response.data.profile.parties
-            setRecordCount(response.data.parties.count)
+            const meta = response.data.meta
 
-            if (replace)
+            setTotalPages(meta.total_pages)
-              replaceResults(
+            setRecordCount(meta.count)
-                response.data.parties.count,
+
-                response.data.parties.results
+            if (replace) replaceResults(meta.count, results)
-              )
+            else appendResults(results)
-            else appendResults(response.data.parties.results)
           })
           .catch((error) => handleError(error))
       }
@@ -282,11 +284,11 @@ const ProfileRoute: React.FC<Props> = (props: Props) => {
       >
         <div className="UserInfo">
           <img
-            alt={props.user?.picture.picture}
+            alt={props.user?.avatar.picture}
-            className={`profile ${props.user?.picture.element}`}
+            className={`profile ${props.user?.avatar.element}`}
-            srcSet={`/profile/${props.user?.picture.picture}.png,
+            srcSet={`/profile/${props.user?.avatar.picture}.png,
-                                    /profile/${props.user?.picture.picture}@2x.png 2x`}
+                                    /profile/${props.user?.avatar.picture}@2x.png 2x`}
-            src={`/profile/${props.user?.picture.picture}.png`}
+            src={`/profile/${props.user?.avatar.picture}.png`}
           />
           <h1>{props.user?.username}</h1>
         </div>
@@ -374,6 +376,12 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   // Fetch initial set of parties here
   let user: User | null = null
   let teams: Party[] | null = null
+  let meta: PaginationObject = {
+    count: 0,
+    totalPages: 0,
+    perPage: 15
+  }
+
   if (query.username) {
     const response = await api.endpoints.users.getOne({
       id: query.username,
@@ -383,14 +391,19 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
       ...headers,
     })
 
-    user = response.data.user
+    user = response.data.profile
-    teams = response.data.parties
+    teams = response.data.profile.parties
+
+    meta.count = response.data.meta.count
+    meta.totalPages = response.data.meta.total_pages
+    meta.perPage = response.data.meta.per_page
   }
 
   return {
     props: {
       user: user,
       teams: teams,
+      meta: meta,
       raids: raids,
       sortedRaids: sortedRaids,
       ...(await serverSideTranslations(locale, ["common"])),

pages/saved.tsx

@@ -130,11 +130,11 @@ const SavedRoute: React.FC<Props> = (props: Props) => {
       api
         .savedTeams({ ...filters, ...{ headers: headers } })
         .then((response) => {
-          setTotalPages(response.data.total_pages)
+          setTotalPages(response.data.meta.total_pages)
-          setRecordCount(response.data.count)
+          setRecordCount(response.data.meta.count)
 
           if (replace)
-            replaceResults(response.data.count, response.data.results)
+            replaceResults(response.data.meta.count, response.data.results)
           else appendResults(response.data.results)
         })
         .catch((error) => handleError(error))

pages/teams.tsx

@@ -130,11 +130,11 @@ const TeamsRoute: React.FC<Props> = (props: Props) => {
       api.endpoints.parties
         .getAll({ ...filters, ...{ headers: headers } })
         .then((response) => {
-          setTotalPages(response.data.total_pages)
+          setTotalPages(response.data.meta.total_pages)
-          setRecordCount(response.data.count)
+          setRecordCount(response.data.meta.count)
 
           if (replace)
-            replaceResults(response.data.count, response.data.results)
+            replaceResults(response.data.meta.count, response.data.results)
           else appendResults(response.data.results)
         })
         .catch((error) => handleError(error))

types/User.d.ts

@@ -2,7 +2,7 @@ interface User {
   id: string
   username: string
   granblueId: number
-  picture: {
+  avatar: {
     picture: string
     element: string
   }

types/index.d.ts

@@ -7,3 +7,9 @@ export type JobSkillObject = {
   2: JobSkill | undefined
   3: JobSkill | undefined
 }
+
+export type PaginationObject = {
+  count: number
+  totalPages: number
+  perPage: number
+}