Update party page for SSR

pages/p/[party].tsx

@@ -1,53 +1,101 @@
-import React from 'react'
+import React from "react"
-import { useRouter } from 'next/router'
+import { getCookie } from "cookies-next"
-import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 
-import Party from '~components/Party'
+import Party from "~components/Party"
 
-const PartyRoute: React.FC = () => {
+import api from "~utils/api"
-    const { party: slug } = useRouter().query
 
-    return (
+import type { NextApiRequest, NextApiResponse } from "next"
-        <div id="Content">
-            <Party slug={slug as string} />
-        </div>
-    )
 
-    // function renderNotFound() {
+interface Props {
-    //     return (
+  party: Party
-    //         <div id="NotFound">
+  raids: Raid[]
-    //             <h2>There&apos;s no grid here.</h2>
+  sortedRaids: Raid[][]
-    //             <Button type="new">New grid</Button>
-    //         </div>
-    //     )
-    // }
-
-    // if (!found && !loading) {
-    //     return renderNotFound()
-    // } else if (found && !loading) {
-    //     return render()
-    // } else {
-    //     return (<div />)
-    // }
 }
 
-export async function getStaticPaths() {
+const PartyRoute: React.FC<Props> = (props) => {
-    return {
+  return (
-        paths: [
+    <div id="Content">
-            // Object variant:
+      <Party team={props.party} raids={props.sortedRaids} />
-            { params: { party: 'string' } },
+    </div>
-        ],
+  )
-        fallback: true,
-    }
 }
 
-export async function getStaticProps({ locale }: { locale: string }) {
+// prettier-ignore
-    return {
+export const getServerSidePaths = async () => {
-        props: {
+  return {
-            ...(await serverSideTranslations(locale, ['common'])),
+    paths: [
-            // Will be passed to the page component as props
+      // Object variant:
-        },
+      { params: { party: "string" } },
-    }
+    ],
+    fallback: true,
+  }
 }
 
-export default PartyRoute
+// prettier-ignore
+export const getServerSideProps = async ({ req, res, locale, query }: { req: NextApiRequest, res: NextApiResponse, locale: string, query: { [index: string]: string } }) => {
+  // Cookies
+  const cookie = getCookie("account", { req, res })
+  const accountData: AccountCookie = cookie
+    ? JSON.parse(cookie as string)
+    : null
+
+  const headers = accountData
+    ? { headers: { Authorization: `Bearer ${accountData.token}` } }
+    : {}
+
+  let { raids, sortedRaids } = await api.endpoints.raids
+    .getAll()
+    .then((response) => organizeRaids(response.data.map((r: any) => r.raid)))
+
+  let party: Party | null = null
+  if (query.party) {
+    let response = await api.endpoints.parties.getOne({ id: query.party, params: headers })
+    party = response.data.party
+  } else {
+    console.log("No party code")
+  }
+
+  return {
+    props: {
+      party: party,
+      raids: raids,
+      sortedRaids: sortedRaids,
+      ...(await serverSideTranslations(locale, ["common"])),
+      // Will be passed to the page component as props
+    },
+  }
+}
+
+const organizeRaids = (raids: Raid[]) => {
+  // Set up empty raid for "All raids"
+  const all = {
+    id: "0",
+    name: {
+      en: "All raids",
+      ja: "全て",
+    },
+    slug: "all",
+    level: 0,
+    group: 0,
+    element: 0,
+  }
+
+  const numGroups = Math.max.apply(
+    Math,
+    raids.map((raid) => raid.group)
+  )
+  let groupedRaids = []
+
+  for (let i = 0; i <= numGroups; i++) {
+    groupedRaids[i] = raids.filter((raid) => raid.group == i)
+  }
+
+  return {
+    raids: raids,
+    sortedRaids: groupedRaids,
+  }
+}
+
+export default PartyRoute