granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement saving/unsaving on collection pages

Browse source
This commit is contained in:
Justin Edmund 2022-02-28 01:02:47 -08:00
parent 69aa0ec528
commit a1f9f41567
3 changed files with 108 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
pages/saved.tsx
View file

@ -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 <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>
)
}

57
pages/teams.tsx
View file

@ -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>
)
}

8
utils/api.tsx
View file

@ -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) {