Fetch and store the jobs and skills in app state

pages/new/index.tsx

@@ -1,13 +1,17 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { getCookie } from "cookies-next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 
 import Party from "~components/Party"
+
+import { appState } from "~utils/appState"
 import api from "~utils/api"
 
 import type { NextApiRequest, NextApiResponse } from "next"
 
 interface Props {
+  jobs: Job[]
+  jobSkills: JobSkill[]
   raids: Raid[]
   sortedRaids: Raid[][]
 }
@@ -18,6 +22,17 @@ const NewRoute: React.FC<Props> = (props: Props) => {
     window.history.replaceState(null, `Grid Tool`, `${path}`)
   }
 
+  useEffect(() => {
+    persistStaticData()
+  }, [persistStaticData])
+
+  function persistStaticData() {
+    console.log("Persisting static data...")
+    appState.raids = props.raids
+    appState.jobs = props.jobs
+    appState.jobSkills = props.jobSkills
+  }
+
   return (
     <div id="Content">
       <Party new={true} raids={props.sortedRaids} pushHistory={callback} />
@@ -51,8 +66,17 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     .getAll({ params: headers })
     .then((response) => organizeRaids(response.data.map((r: any) => r.raid)))
   
+  let jobs = await api.endpoints.jobs
+    .getAll({ params: headers })
+    .then((response) => { return response.data })
+  
+  let jobSkills = await api.allSkills(headers)
+    .then((response) => { return response.data })
+  
   return {
     props: {
+      jobs: jobs,
+      jobSkills: jobSkills,
       raids: raids,
       sortedRaids: sortedRaids,
       ...(await serverSideTranslations(locale, ["common"])),

pages/p/[party].tsx

@@ -1,20 +1,34 @@
-import React from "react"
+import React, { useEffect } from "react"
 import { getCookie } from "cookies-next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 
 import Party from "~components/Party"
 
+import { appState } from "~utils/appState"
 import api from "~utils/api"
 
 import type { NextApiRequest, NextApiResponse } from "next"
 
 interface Props {
   party: Party
+  jobs: Job[]
+  jobSkills: JobSkill[]
   raids: Raid[]
   sortedRaids: Raid[][]
 }
 
 const PartyRoute: React.FC<Props> = (props: Props) => {
+  useEffect(() => {
+    persistStaticData()
+  }, [persistStaticData])
+
+  function persistStaticData() {
+    console.log("Persisting static data...")
+    appState.raids = props.raids
+    appState.jobs = props.jobs
+    appState.jobSkills = props.jobSkills
+  }
+
   return (
     <div id="Content">
       <Party team={props.party} raids={props.sortedRaids} />
@@ -48,6 +62,16 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
     .getAll()
     .then((response) => organizeRaids(response.data.map((r: any) => r.raid)))
 
+  let jobs = await api.endpoints.jobs
+    .getAll({ params: headers })
+    .then((response) => {
+      return response.data
+    })
+
+  let jobSkills = await api.allSkills(headers).then((response) => {
+    return response.data
+  })
+  
   let party: Party | null = null
   if (query.party) {
     let response = await api.endpoints.parties.getOne({ id: query.party, params: headers })
@@ -59,6 +83,8 @@ export const getServerSideProps = async ({ req, res, locale, query }: { req: Nex
   return {
     props: {
       party: party,
+      job: jobs,
+      jobSkills: jobSkills,
       raids: raids,
       sortedRaids: sortedRaids,
       ...(await serverSideTranslations(locale, ["common"])),