Implement saving/unsaving on collection pages

pages/saved.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
 import { useCookies } from 'react-cookie'
+import clonedeep from 'lodash.clonedeep'
 
 import api from '~utils/api'
 
@@ -11,7 +12,12 @@ import FilterBar from '~components/FilterBar'
 const SavedRoute: React.FC = () => {
     const router = useRouter()
     
+    // Cookies
     const [cookies, _] = useCookies(['user'])
+    const headers = (cookies.user != null) ? {
+        'Authorization': `Bearer ${cookies.user.access_token}`
+    } : {}
+
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
     const [scrolled, setScrolled] = useState(false)
@@ -59,6 +65,47 @@ const SavedRoute: React.FC = () => {
             })
     }
 
+    function toggleFavorite(teamId: string, favorited: boolean) {
+        if (favorited)
+            unsaveFavorite(teamId)
+        else
+            saveFavorite(teamId)
+    }
+
+    function saveFavorite(teamId: string) {
+        api.saveTeam({ id: teamId, params: headers })
+            .then((response) => {
+                if (response.status == 201) {
+                    const index = parties.findIndex(p => p.id === teamId)
+                    const party = parties[index]
+
+                    party.favorited = true
+
+                    let clonedParties = clonedeep(parties)
+                    clonedParties[index] = party
+
+                    setParties(clonedParties)
+                }
+            })
+    }
+
+    function unsaveFavorite(teamId: string) {
+        api.unsaveTeam({ id: teamId, params: headers })
+            .then((response) => {
+                if (response.status == 200) {
+                    const index = parties.findIndex(p => p.id === teamId)
+                    const party = parties[index]
+
+                    party.favorited = false
+
+                    let clonedParties = clonedeep(parties)
+                    clonedParties.splice(index, 1)
+
+                    setParties(clonedParties)
+                }
+            })
+    }
+
     function handleScroll() {
         if (window.pageYOffset > 90)
             setScrolled(true)
@@ -76,15 +123,18 @@ const SavedRoute: React.FC = () => {
                 {
                     parties.map((party, i) => {
                         return <GridRep 
+                            id={party.id}
                             shortcode={party.shortcode} 
                             name={party.name}
                             createdAt={new Date(party.created_at)}
                             raid={party.raid}
                             grid={party.weapons}
                             user={party.user}
+                            favorited={party.favorited}
                             key={`party-${i}`}
                             displayUser={true}
                             onClick={goTo}
+                            onSave={toggleFavorite}
                         />
                     })
                 }
@@ -95,7 +145,7 @@ const SavedRoute: React.FC = () => {
     function renderNoGrids() {
         return (
             <div id="NotFound">
-                <h2>No grids found</h2>
+                <h2>You haven't saved any teams yet</h2>
             </div>
         )
     }

pages/teams.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import { useRouter } from 'next/router'
+import { useCookies } from 'react-cookie'
+import clonedeep from 'lodash.clonedeep'
 
 import api from '~utils/api'
 
@@ -10,6 +12,12 @@ import FilterBar from '~components/FilterBar'
 const TeamsRoute: React.FC = () => {
     const router = useRouter()
 
+    // Cookies
+    const [cookies, _] = useCookies(['user'])
+    const headers = (cookies.user != null) ? {
+        'Authorization': `Bearer ${cookies.user.access_token}`
+    } : {}
+
     const [found, setFound] = useState(false)
     const [loading, setLoading] = useState(true)
     const [scrolled, setScrolled] = useState(false)
@@ -31,6 +39,9 @@ const TeamsRoute: React.FC = () => {
                 element: (element && element >= 0) ? element : undefined,
                 raid: (raid && raid != '0') ? raid : undefined,
                 recency: (recency && recency > 0) ? recency : undefined
+            },
+            headers: {
+                'Authorization': `Bearer ${cookies.user.access_token}`
             }
         }
 
@@ -54,6 +65,47 @@ const TeamsRoute: React.FC = () => {
             })
     }
 
+    function toggleFavorite(teamId: string, favorited: boolean) {
+        if (favorited)
+            unsaveFavorite(teamId)
+        else
+            saveFavorite(teamId)
+    }
+
+    function saveFavorite(teamId: string) {
+        api.saveTeam({ id: teamId, params: headers })
+            .then((response) => {
+                if (response.status == 201) {
+                    const index = parties.findIndex(p => p.id === teamId)
+                    const party = parties[index]
+
+                    party.favorited = true
+
+                    let clonedParties = clonedeep(parties)
+                    clonedParties[index] = party
+
+                    setParties(clonedParties)
+                }
+            })
+    }
+
+    function unsaveFavorite(teamId: string) {
+        api.unsaveTeam({ id: teamId, params: headers })
+            .then((response) => {
+                if (response.status == 200) {
+                    const index = parties.findIndex(p => p.id === teamId)
+                    const party = parties[index]
+
+                    party.favorited = false
+
+                    let clonedParties = clonedeep(parties)
+                    clonedParties[index] = party
+
+                    setParties(clonedParties)
+                }
+            })
+    }
+
     function handleScroll() {
         if (window.pageYOffset > 90)
             setScrolled(true)
@@ -71,15 +123,18 @@ const TeamsRoute: React.FC = () => {
                 {
                     parties.map((party, i) => {
                         return <GridRep 
+                            id={party.id}
                             shortcode={party.shortcode} 
                             name={party.name}
                             createdAt={new Date(party.created_at)}
                             raid={party.raid}
                             grid={party.weapons}
                             user={party.user}
+                            favorited={party.favorited}
                             key={`party-${i}`}
                             displayUser={true}
                             onClick={goTo}
+                            onSave={toggleFavorite}
                         />
                     })
                 }
@@ -90,7 +145,7 @@ const TeamsRoute: React.FC = () => {
     function renderNoGrids() {
         return (
             <div id="NotFound">
-                <h2>No grids found</h2>
+                <h2>No teams found</h2>
             </div>
         )
     }

utils/api.tsx

@@ -80,20 +80,12 @@ class Api {
         const body = { favorite: { party_id: id } }
         const resourceUrl = `${this.url}/favorites`
         return axios.post(resourceUrl, body, { headers: params })
-            .then((response) => {
-                if (response.status == 201)
-                    appState.party.favorited = true
-            })
     }
 
     unsaveTeam({ id, params }: { id: string, params?: {} }) {
         const body = { favorite: { party_id: id } }
         const resourceUrl = `${this.url}/favorites`
         return axios.delete(resourceUrl, { data: body, headers: params })
-            .then((response) => {
-                if (response.status == 200)
-                    appState.party.favorited = false
-            })
     }
 
     updateUncap(resource: 'character'|'weapon'|'summon', id: string, value: number) {