diff --git a/pages/saved.tsx b/pages/saved.tsx index 2b058ad0..939c5d56 100644 --- a/pages/saved.tsx +++ b/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' @@ -10,8 +11,13 @@ 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 }) } @@ -95,7 +145,7 @@ const SavedRoute: React.FC = () => { function renderNoGrids() { return (
-

No grids found

+

You haven't saved any teams yet

) } diff --git a/pages/teams.tsx b/pages/teams.tsx index b512aacc..c077f778 100644 --- a/pages/teams.tsx +++ b/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 }) } @@ -90,7 +145,7 @@ const TeamsRoute: React.FC = () => { function renderNoGrids() { return (
-

No grids found

+

No teams found

) } diff --git a/utils/api.tsx b/utils/api.tsx index ee947ee2..61d49454 100644 --- a/utils/api.tsx +++ b/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) {