Skip to content

Commit a6e5001

Browse files
ErickLimaSErickLimaS
authored
Merge pull request #105 from ErickLimaS/Cards/Options-btn
Add Options Btn on Media Cards, Block Scroll when components is fullscreen, more...
2 parents a4c8ac1 + f763ad1 commit a6e5001

38 files changed

Lines changed: 1255 additions & 532 deletions

File tree

‎app/api/anilistMedias.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function filterMediasWithAdultContent(mediasList: ApiDefaultResult[] | ApiAiring
3232
axiosRetry(Axios, {
3333
retries: 3,
3434
retryDelay: (retryAttempt) => retryAttempt * 1200,
35-
retryCondition: (error) => error.response?.status == 500 || error.response?.status == 503,
35+
retryCondition: (error) => error.response?.status == 500 || error.response?.status == 404 || error.response?.status == 503,
3636
onRetry: (retryNumber) => console.log(`retry: ${retryNumber} ${retryNumber == 3 ? " - Last Attempt" : ""}`)
3737
})
3838

‎app/api/anilistQueryConstants.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,18 @@ export function defaultApiQueryRequest(otherQueryFields?: unknown, otherMediasFi
8888
}
8989
description(asHtml: true)
9090
isAdult
91+
isFavourite
92+
mediaListEntry {
93+
id
94+
mediaId
95+
status
96+
progress
97+
media {
98+
title{
99+
romaji
100+
}
101+
}
102+
}
91103
status
92104
relations{
93105
nodes{
@@ -120,6 +132,19 @@ export function defaultApiQueryRequest(otherQueryFields?: unknown, otherMediasFi
120132
}
121133
updatedAt
122134
favourites
135+
136+
isFavourite
137+
mediaListEntry {
138+
id
139+
mediaId
140+
status
141+
progress
142+
media {
143+
title{
144+
romaji
145+
}
146+
}
147+
}
123148
tags{
124149
name
125150
description
@@ -626,6 +651,19 @@ export function queryMediaWithUserAuthenticated(otherQueryFields?: unknown, othe
626651
genres
627652
type
628653
format
654+
description
655+
isFavourite
656+
mediaListEntry {
657+
id
658+
mediaId
659+
status
660+
progress
661+
media {
662+
title{
663+
romaji
664+
}
665+
}
666+
}
629667
title{
630668
romaji
631669
native
@@ -725,6 +763,17 @@ export function queryMediaWithUserAuthenticated(otherQueryFields?: unknown, othe
725763
volumes
726764
countryOfOrigin
727765
isLicensed
766+
mediaListEntry {
767+
id
768+
mediaId
769+
status
770+
progress
771+
media {
772+
title{
773+
romaji
774+
}
775+
}
776+
}
728777
source
729778
hashtag
730779
updatedAt

‎app/api/anilistUsers.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -238,8 +238,21 @@ export default {
238238
medium
239239
color
240240
}
241+
description
241242
type
242243
format
244+
isFavourite
245+
mediaListEntry {
246+
id
247+
mediaId
248+
status
249+
progress
250+
media {
251+
title{
252+
romaji
253+
}
254+
}
255+
}
243256
bannerImage
244257
season
245258
seasonYear

‎app/components/Buttons/AddToFavourites/index.tsx‎

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -10,20 +10,22 @@ import { getAuth } from 'firebase/auth'
1010
import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface'
1111
import { useAuthState } from 'react-firebase-hooks/auth'
1212
import { motion } from 'framer-motion';
13-
import ShowUpLoginPanelAnimated from '../../UserLoginModal/animatedVariant'
1413
import { updateUserFavouriteMedias } from '@/app/lib/user/userDocUpdateOptions'
15-
import { useAppSelector } from '@/app/lib/redux/hooks'
14+
import { useAppDispatch, useAppSelector } from '@/app/lib/redux/hooks'
1615
import anilistUsers from '@/app/api/anilistUsers'
16+
import { toggleShowLoginModalValue } from '@/app/lib/redux/features/loginModal'
1717

18-
export function Button({ mediaInfo, children, svgOnlyColor, isActiveOnAnilist }: { mediaInfo: ApiDefaultResult, children?: React.ReactNode[], svgOnlyColor?: string, isActiveOnAnilist?: boolean }) {
18+
export function Button({ mediaInfo, children, svgOnlyColor, isActiveOnAnilist, customText }: {
19+
mediaInfo: ApiDefaultResult, children?: React.ReactNode[], svgOnlyColor?: string, isActiveOnAnilist?: boolean, customText?: string
20+
}) {
1921

2022
const [isLoading, setIsLoading] = useState<boolean>(false)
2123
const [wasAddedToFavourites, setWasAddedToFavourites] = useState<boolean>(isActiveOnAnilist || false)
2224

23-
const [isUserModalOpen, setIsUserModalOpen] = useState(false)
24-
2525
const anilistUser = useAppSelector((state) => (state.UserInfo).value)
2626

27+
const dispatch = useAppDispatch()
28+
2729
const auth = getAuth()
2830

2931
const [user, loading] = useAuthState(auth)
@@ -32,18 +34,19 @@ export function Button({ mediaInfo, children, svgOnlyColor, isActiveOnAnilist }:
3234

3335
useEffect(() => {
3436

35-
if ((!user && !anilistUser) || loading) return
37+
if (!loading) {
3638

37-
setIsUserModalOpen(false)
38-
isMediaOnUserDoc()
39+
isMediaOnUserDoc()
40+
41+
}
3942

4043
}, [user, anilistUser, loading])
4144

4245
// WHEN BUTTON IS CLICKED, RUN FUNCTION TO ADD OR REMOVE MEDIA FROM FIRESTORE
4346
async function handleMediaOnFavourites() {
4447

4548
// Opens Login Modal
46-
if (!user && !anilistUser) return setIsUserModalOpen(true)
49+
if (!user && !anilistUser) return dispatch(toggleShowLoginModalValue())
4750

4851
setIsLoading(true)
4952

@@ -91,45 +94,40 @@ export function Button({ mediaInfo, children, svgOnlyColor, isActiveOnAnilist }:
9194
}
9295

9396
return (
94-
<React.Fragment>
95-
96-
<ShowUpLoginPanelAnimated
97-
apperanceCondition={isUserModalOpen}
98-
customOnClickAction={() => setIsUserModalOpen(false)}
99-
auth={auth}
100-
/>
101-
102-
<motion.button
103-
whileTap={{ scale: 0.85 }}
104-
id={styles.container}
105-
className={children ? styles.custom_text : ""}
106-
onClick={() => handleMediaOnFavourites()}
107-
disabled={isLoading}
108-
data-added={wasAddedToFavourites}
109-
data-unique-color={svgOnlyColor != undefined}
110-
aria-label={wasAddedToFavourites ? "Click To Remove from Favourites" : "Click To Add To Favourites"}
111-
title={wasAddedToFavourites ? `Remove ${mediaInfo.title && mediaInfo.title?.userPreferred} from Favourites` : `Add ${mediaInfo.title && mediaInfo.title?.userPreferred} To Favourites`}
112-
>
113-
114-
{isLoading &&
115-
(<LoadingSvg alt="Loading Icon" width={16} height={16} />)
116-
}
117-
118-
{(!isLoading && wasAddedToFavourites) &&
119-
(children ?
120-
children[1] : (<><FavouriteFillSvg width={16} height={16} fill={"var(--brand-color)"} /> FAVOURITED</>)
121-
)
122-
}
123-
124-
{(!isLoading && !wasAddedToFavourites) &&
125-
(children ?
126-
children[0] : (<><FavouriteSvg width={16} height={16} fill={"var(--white-100)"} /> FAVOURITE</>)
127-
)
128-
}
129-
130-
</motion.button>
131-
132-
</React.Fragment>
97+
<motion.button
98+
whileTap={{ scale: 0.85 }}
99+
id={styles.container}
100+
className={children ? styles.custom_text : ""}
101+
onClick={() => handleMediaOnFavourites()}
102+
disabled={isLoading}
103+
data-added={wasAddedToFavourites}
104+
data-unique-color={svgOnlyColor != undefined}
105+
aria-label={wasAddedToFavourites ? "Click To Remove from Favourites" : "Click To Add To Favourites"}
106+
title={wasAddedToFavourites ?
107+
`Remove ${mediaInfo.title && mediaInfo.title?.userPreferred} from Favourites`
108+
: `Add ${mediaInfo.title && mediaInfo.title?.userPreferred} To Favourites`
109+
}
110+
>
111+
112+
{isLoading &&
113+
(<LoadingSvg alt="Loading Icon" width={16} height={16} />)
114+
}
115+
116+
{(!isLoading && wasAddedToFavourites) &&
117+
(children ?
118+
children[1] : (<><FavouriteFillSvg width={16} height={16} fill={svgOnlyColor || "var(--brand-color)"} /> FAVOURITED</>)
119+
)
120+
}
121+
122+
{(!isLoading && !wasAddedToFavourites) &&
123+
(children ?
124+
children[0] : (<><FavouriteSvg width={16} height={16} fill={svgOnlyColor || "var(--white-100)"} /> FAVOURITE</>)
125+
)
126+
}
127+
128+
{customText || ""}
129+
130+
</motion.button>
133131
)
134132
}
135133

‎app/components/Buttons/AddToList/index.tsx‎

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,39 +7,28 @@ import { getAuth } from 'firebase/auth'
77
import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface'
88
import { useAuthState } from 'react-firebase-hooks/auth'
99
import { AnimatePresence, motion } from 'framer-motion';
10-
import ShowUpLoginPanelAnimated from '../../UserLoginModal/animatedVariant'
1110
import { removeMediaOnListByStatus, updateUserMediaListByStatus } from '@/app/lib/user/userDocUpdateOptions'
12-
import { useAppSelector } from '@/app/lib/redux/hooks'
11+
import { useAppDispatch, useAppSelector } from '@/app/lib/redux/hooks'
1312
import anilistUsers from '@/app/api/anilistUsers'
1413
import { ImdbEpisode } from '@/app/ts/interfaces/apiImdbInterface';
15-
16-
type StatusTypes = "COMPLETED" | "CURRENT" | "PLANNING" | "DROPPED" | "PAUSED" | "REPEATING"
17-
18-
const btnValues = [
19-
{ name: "Completed", value: "COMPLETED" },
20-
{ name: "Watching", value: "CURRENT" },
21-
{ name: "Planning", value: "PLANNING" },
22-
{ name: "Dropped", value: "DROPPED" },
23-
{ name: "Paused", value: "PAUSED" },
24-
{ name: "Repeating", value: "REPEATING" },
25-
]
14+
import { userMediaStatusEntries } from '@/app/lib/dataConstants/anilist';
15+
import { toggleShowLoginModalValue } from '@/app/lib/redux/features/loginModal';
2616

2717
export function Button({ mediaInfo, statusOnAnilist, listEntryId, imdbEpisodesList, amountWatchedOrRead, children }: {
28-
mediaInfo: ApiDefaultResult, imdbEpisodesList?: ImdbEpisode[], statusOnAnilist?: string, listEntryId?: number, amountWatchedOrRead?: number, children?: React.ReactNode[]
18+
mediaInfo: ApiDefaultResult, imdbEpisodesList?: ImdbEpisode[], statusOnAnilist?: ApiDefaultResult["mediaListEntry"]["status"], listEntryId?: number, amountWatchedOrRead?: number, children?: React.ReactNode[]
2919
}) {
3020

3121
const [isLoading, setIsLoading] = useState<boolean>(false)
3222
const [isMenuOpen, setIsMenuOpen] = useState<boolean>(false)
3323

34-
const [mediaStatus, setMediaStatus] = useState<StatusTypes | null>(statusOnAnilist as StatusTypes || null)
35-
36-
const [isUserModalOpen, setIsUserModalOpen] = useState(false)
24+
const [mediaStatus, setMediaStatus] = useState<ApiDefaultResult["mediaListEntry"]["status"] | null>(statusOnAnilist || null)
3725

3826
const anilistUser = useAppSelector((state) => (state.UserInfo).value)
27+
const dispatch = useAppDispatch()
3928

4029
const auth = getAuth()
4130

42-
const [user, loading] = useAuthState(auth)
31+
const [user] = useAuthState(auth)
4332

4433
const db = getFirestore(initFirebase())
4534

@@ -64,11 +53,11 @@ export function Button({ mediaInfo, statusOnAnilist, listEntryId, imdbEpisodesLi
6453

6554
if (!userMediaLists) return
6655

67-
btnValues.map((btn) => {
56+
userMediaStatusEntries.map((btn) => {
6857

6958
const wasMediaFound = userMediaLists[btn.value.toLowerCase()]?.find((media: { id: number }) => media.id == mediaInfo.id)
7059

71-
if (wasMediaFound) setMediaStatus(btn.value as StatusTypes)
60+
if (wasMediaFound) setMediaStatus(btn.value as ApiDefaultResult["mediaListEntry"]["status"])
7261

7362
})
7463

@@ -104,10 +93,10 @@ export function Button({ mediaInfo, statusOnAnilist, listEntryId, imdbEpisodesLi
10493

10594
}
10695

107-
async function handleAddMediaOnList({ status }: { status: StatusTypes }) {
96+
async function handleAddMediaOnList({ status }: { status: ApiDefaultResult["mediaListEntry"]["status"] }) {
10897

10998
// Opens Login Modal
110-
if (!user && !anilistUser) return setIsUserModalOpen(true)
99+
if (!user && !anilistUser) return dispatch(toggleShowLoginModalValue())
111100

112101
setIsLoading(true)
113102

@@ -182,13 +171,6 @@ export function Button({ mediaInfo, statusOnAnilist, listEntryId, imdbEpisodesLi
182171
return (
183172
<React.Fragment>
184173

185-
<ShowUpLoginPanelAnimated
186-
apperanceCondition={isUserModalOpen}
187-
customOnClickAction={() => setIsUserModalOpen(false)}
188-
aria-controls={styles.user_media_status_list}
189-
auth={auth}
190-
/>
191-
192174
<motion.button
193175
whileTap={{ scale: 0.85 }}
194176
id={styles.container}
@@ -220,13 +202,13 @@ export function Button({ mediaInfo, statusOnAnilist, listEntryId, imdbEpisodesLi
220202
>
221203
<ul>
222204

223-
{btnValues.map((btn) => (
205+
{userMediaStatusEntries.map((btn) => (
224206
<li key={btn.value}>
225207
<motion.button
226208
data-active={mediaStatus == btn.value}
227209
disabled={isLoading}
228210
onClick={() => handleAddMediaOnList(
229-
{ status: btn.value as StatusTypes }
211+
{ status: btn.value as ApiDefaultResult["mediaListEntry"]["status"] }
230212
)}
231213
whileTap={{ scale: 0.9 }}
232214
>

‎app/components/Buttons/AddToNotification/component.module.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@
3737
gap: 0 8px;
3838

3939
background-color: var(--white-100) !important;
40-
color: var(--black-100) !important;
40+
color: #ee9b0d !important;
4141

4242
border-color: var(--black-100) !important;
43+
4344
}

0 commit comments

Comments
 (0)