Skip to content

Commit 26c65ce

Browse files
ErickLimaSErickLimaS
authored
feat: Add Notifications; Css Tweaks
Merge pull request #42 from ErickLimaS/dev
2 parents 9f8f1c7 + ff26b11 commit 26c65ce

File tree

26 files changed

+802
-111
lines changed

26 files changed

+802
-111
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,14 @@ Project of animes and mangas website, utilizing the AniList, Consumet and Aniwat
1414
- [x] `Comment`: Write what you thougth of that episode or just tell something that every should know about.
1515
- [x] `Log In`: You can log in with Google, GitHub or Anonymously (with some restrictions).
1616
- [x] `Keep Watching`: Continue the episode from where you stop last time.
17+
- [x] `Be Notified`: When a New Episode is Released, you get a notification on the website.
1718
- [x] `Bookmark your favourite animes e mangas`: Save for later your animes and mangas.
1819
- [x] `Bookmark the episodes you watched`: And keep watching from there later
1920
- [x] `News Feed`: Keep up with the latest news of animes, mangas and the industry.
2021

2122
## :pushpin: Under Development
2223

2324
- [ ] `Add Reply to Comments`
24-
- [ ] `Be notified when a new episode/chapter is released`
2525

2626
## :heavy_check_mark: Tecnologies Used
2727

‎app/components/AddToPlaylistButton/component.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
font-weight: 600;
1010

11-
border: 1px solid transparent;
11+
border: 1px solid var(--white-100);
1212

1313
}
1414

‎app/components/AddToPlaylistButton/index.tsx‎

Lines changed: 26 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,13 @@ import React, { useEffect, useState } from 'react'
33
import styles from "./component.module.css"
44
import LoadingSvg from "@/public/assets/ripple-1s-200px.svg"
55
import LoadingsssSvg from "@/public/assets/bookmark-check-fill.svg"
6-
import { getFirestore, doc, updateDoc, arrayUnion, arrayRemove, getDoc, FieldPath, setDoc, DocumentSnapshot, DocumentData } from 'firebase/firestore';
6+
import {
7+
getFirestore, doc,
8+
updateDoc, arrayUnion,
9+
arrayRemove, getDoc,
10+
FieldPath, setDoc,
11+
DocumentSnapshot, DocumentData
12+
} from 'firebase/firestore';
713
import { initFirebase } from '@/app/firebaseApp'
814
import { getAuth } from 'firebase/auth'
915
import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface'
@@ -36,52 +42,28 @@ function AddToPlaylistButton({ data, customText }: { data: ApiDefaultResult, cus
3642

3743
setIsLoading(true)
3844

39-
if (!wasAddedToPlaylist) {
40-
41-
await updateDoc(doc(db, 'users', user.uid),
42-
{
43-
bookmarks: arrayUnion({
44-
id: data.id,
45-
title: {
46-
romaji: data.title.romaji
47-
},
48-
format: data.format,
49-
description: data.description,
50-
coverImage: {
51-
extraLarge: data.coverImage.extraLarge,
52-
large: data.coverImage.large
53-
}
54-
})
55-
} as unknown as FieldPath,
56-
{ merge: true }
57-
)
45+
const bookmarkData = {
46+
id: data.id,
47+
title: {
48+
romaji: data.title.romaji
49+
},
50+
format: data.format,
51+
description: data.description,
52+
coverImage: {
53+
extraLarge: data.coverImage.extraLarge,
54+
large: data.coverImage.large
55+
}
56+
}
5857

59-
setWasAddedToPlaylist(true)
58+
await updateDoc(doc(db, 'users', user.uid),
59+
{
60+
bookmarks: !wasAddedToPlaylist ? arrayUnion(...[bookmarkData]) : arrayRemove(...[bookmarkData])
6061

61-
}
62-
else {
63-
64-
await updateDoc(doc(db, 'users', user.uid),
65-
{
66-
bookmarks: arrayRemove({
67-
id: data.id,
68-
title: {
69-
romaji: data.title.romaji
70-
},
71-
format: data.format,
72-
description: data.description,
73-
coverImage: {
74-
extraLarge: data.coverImage.extraLarge,
75-
large: data.coverImage.large
76-
}
77-
})
78-
} as unknown as FieldPath,
79-
{ merge: true }
80-
)
81-
82-
setWasAddedToPlaylist(false)
62+
} as unknown as FieldPath,
63+
{ merge: true }
64+
)
8365

84-
}
66+
!wasAddedToPlaylist ? setWasAddedToPlaylist(true) : setWasAddedToPlaylist(false)
8567

8668
setIsLoading(false)
8769
}

‎app/components/NavButtons/index.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,9 @@ function NavButtons(props: PropsType) {
4040
return (
4141
<div className={styles.nav_button_container}>
4242

43-
{props.options.map((item, key: number) => (
44-
<>
43+
{props.options.map((item) => (
44+
<React.Fragment key={item.value}>
4545
<button
46-
key={key}
4746
data-active={lastValueReceived == (item.value)}
4847
onClick={() => toggleStateAndReturnValue(item.value)}
4948
aria-label={item.name}
@@ -53,7 +52,7 @@ function NavButtons(props: PropsType) {
5352
{props.sepateWithSpan && (
5453
<span> | </span>
5554
)}
56-
</>
55+
</React.Fragment>
5756
))}
5857

5958
</div>

‎app/components/UserLoginModal/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ function UserModal({ onClick, auth, }: ModalTypes) {
7878
await setDoc(doc(collection(db, "users"), user.uid), {
7979
bookmarks: [],
8080
keepWatching: [],
81+
notifications: [],
8182
comments: {},
8283
episodesWatchedBySource: {},
8384
videoSource: "gogoanime",

‎app/layout/header/components/Notifications/component.module.css‎

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
#notification_container {
2+
3+
position: relative;
4+
height: 100%;
5+
6+
display: flex;
7+
align-items: center;
8+
9+
}
10+
11+
#notification_btn {
12+
13+
margin: auto;
14+
display: flex;
15+
16+
padding: 10px;
17+
18+
border-radius: 50%;
19+
20+
background-color: transparent;
21+
border: 0;
22+
23+
}
24+
25+
#notification_btn:hover,
26+
#notification_btn[data-active=true] {
27+
28+
background-color: var(--white-25);
29+
30+
}
31+
32+
#notification_btn svg {
33+
34+
transform: scale(1.3);
35+
36+
}
37+
38+
span#notifications_badge {
39+
40+
font-size: var(--font-size--small-2);
41+
42+
position: absolute;
43+
top: 20%;
44+
right: -5%;
45+
46+
padding: 3px 6px;
47+
48+
border-radius: 50%;
49+
background: var(--brand-color);
50+
color: var(--white-100);
51+
52+
}
53+
54+
/* NOTIFICATIONS RESULTS */
55+
#results_container {
56+
57+
box-shadow: 4px 4px 12px 0px var(--black-100);
58+
59+
transform: translate(25%, 0%) !important;
60+
61+
width: calc(96vw - 32px);
62+
max-width: 400px;
63+
64+
position: absolute;
65+
right: 0;
66+
top: 60px;
67+
68+
background-color: var(--background);
69+
border: 2px solid var(--brand-color);
70+
border-radius: 8px;
71+
72+
padding: 16px;
73+
74+
}
75+
76+
@media(min-width: 580px) {
77+
78+
#results_container {
79+
min-width: 290px;
80+
transform: translate(-75%, 0%) !important;
81+
left: 0;
82+
}
83+
84+
}
85+
86+
@media(min-width: 1780px) {
87+
88+
#results_container {
89+
transform: translate(-50%, 0%) !important;
90+
left: 50%;
91+
}
92+
93+
}
94+
95+
#results_container>h4 {
96+
97+
color: var(--white-100);
98+
font-size: var(--font-size--h5);
99+
100+
margin-bottom: 24px;
101+
102+
}
103+
104+
#results_container>ul {
105+
106+
max-height: 500px;
107+
overflow: auto;
108+
109+
display: flex;
110+
flex-direction: column;
111+
gap: 8px 0;
112+
113+
}
114+
115+
#results_container>ul::-webkit-scrollbar {
116+
width: 4px;
117+
}
118+
119+
#results_container>ul::-webkit-scrollbar-track {
120+
box-shadow: inset 0 0 8px var(--white-05);
121+
border-radius: 10px;
122+
}
123+
124+
#results_container>ul::-webkit-scrollbar-thumb {
125+
background: var(--white-50);
126+
border-radius: 6px;
127+
}
128+
129+
/* NOTIFICATION ITEM */
130+
.notification_item_container {
131+
132+
background: var(--black-75);
133+
border-radius: 8px;
134+
135+
color: var(--white-100);
136+
137+
display: grid;
138+
grid-template-columns: minmax(70px, 100px) 1fr;
139+
gap: 0 16px;
140+
141+
}
142+
143+
.notification_item_container .img_container {
144+
145+
position: relative;
146+
height: inherit;
147+
148+
aspect-ratio: 46 / 65;
149+
150+
}
151+
152+
.notification_item_container .notification_item_info {
153+
154+
margin: 6px 8px;
155+
156+
}
157+
158+
.notification_item_container h5 {
159+
160+
161+
font-weight: 500;
162+
163+
font-size: var(--font-size--p);
164+
165+
}
166+
167+
.notification_item_container small {
168+
169+
font-weight: 300;
170+
171+
margin-top: 4px;
172+
173+
display: -webkit-box;
174+
-webkit-box-orient: vertical;
175+
-webkit-line-clamp: 1;
176+
overflow: hidden;
177+
}
178+
179+
.notification_item_container p {
180+
181+
margin: 16px 0;
182+
183+
font-size: var(--font-size--small-1);
184+
185+
}
186+
187+
.notification_item_container a {
188+
189+
font-weight: 500;
190+
191+
text-align: center;
192+
193+
border-radius: 6px;
194+
195+
background: var(--brand-color);
196+
197+
width: 100%;
198+
199+
padding: 8px 16px;
200+
201+
font-size: var(--font-size--small-1);
202+
203+
}

0 commit comments

Comments
 (0)