feat: Add Notifications; Css Tweaks

Merge pull request #42 from ErickLimaS/dev

README.md

@@ -14,14 +14,14 @@ Project of animes and mangas website, utilizing the AniList, Consumet and Aniwat
 - [x] `Comment`: Write what you thougth of that episode or just tell something that every should know about.
 - [x] `Log In`: You can log in with Google, GitHub or Anonymously (with some restrictions).
 - [x] `Keep Watching`: Continue the episode from where you stop last time.
+- [x] `Be Notified`: When a New Episode is Released, you get a notification on the website.
 - [x] `Bookmark your favourite animes e mangas`: Save for later your animes and mangas.
 - [x] `Bookmark the episodes you watched`: And keep watching from there later
 - [x] `News Feed`: Keep up with the latest news of animes, mangas and the industry.
 
 ## :pushpin: Under Development
 
 - [ ] `Add Reply to Comments`
-- [ ] `Be notified when a new episode/chapter is released`
 
 ## :heavy_check_mark: Tecnologies Used
 

app/components/AddToPlaylistButton/component.module.css

@@ -8,7 +8,7 @@
 
     font-weight: 600;
 
-    border: 1px solid transparent;
+    border: 1px solid var(--white-100);
 
 }
 

app/components/AddToPlaylistButton/index.tsx

@@ -3,7 +3,13 @@ import React, { useEffect, useState } from 'react'
 import styles from "./component.module.css"
 import LoadingSvg from "@/public/assets/ripple-1s-200px.svg"
 import LoadingsssSvg from "@/public/assets/bookmark-check-fill.svg"
-import { getFirestore, doc, updateDoc, arrayUnion, arrayRemove, getDoc, FieldPath, setDoc, DocumentSnapshot, DocumentData } from 'firebase/firestore';
+import {
+    getFirestore, doc,
+    updateDoc, arrayUnion,
+    arrayRemove, getDoc,
+    FieldPath, setDoc,
+    DocumentSnapshot, DocumentData
+} from 'firebase/firestore';
 import { initFirebase } from '@/app/firebaseApp'
 import { getAuth } from 'firebase/auth'
 import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface'
@@ -36,52 +42,28 @@ function AddToPlaylistButton({ data, customText }: { data: ApiDefaultResult, cus
 
         setIsLoading(true)
 
-        if (!wasAddedToPlaylist) {
-
-            await updateDoc(doc(db, 'users', user.uid),
-                {
-                    bookmarks: arrayUnion({
-                        id: data.id,
-                        title: {
-                            romaji: data.title.romaji
-                        },
-                        format: data.format,
-                        description: data.description,
-                        coverImage: {
-                            extraLarge: data.coverImage.extraLarge,
-                            large: data.coverImage.large
-                        }
-                    })
-                } as unknown as FieldPath,
-                { merge: true }
-            )
+        const bookmarkData = {
+            id: data.id,
+            title: {
+                romaji: data.title.romaji
+            },
+            format: data.format,
+            description: data.description,
+            coverImage: {
+                extraLarge: data.coverImage.extraLarge,
+                large: data.coverImage.large
+            }
+        }
 
-            setWasAddedToPlaylist(true)
+        await updateDoc(doc(db, 'users', user.uid),
+            {
+                bookmarks: !wasAddedToPlaylist ? arrayUnion(...[bookmarkData]) : arrayRemove(...[bookmarkData])
 
-        }
-        else {
-
-            await updateDoc(doc(db, 'users', user.uid),
-                {
-                    bookmarks: arrayRemove({
-                        id: data.id,
-                        title: {
-                            romaji: data.title.romaji
-                        },
-                        format: data.format,
-                        description: data.description,
-                        coverImage: {
-                            extraLarge: data.coverImage.extraLarge,
-                            large: data.coverImage.large
-                        }
-                    })
-                } as unknown as FieldPath,
-                { merge: true }
-            )
-
-            setWasAddedToPlaylist(false)
+            } as unknown as FieldPath,
+            { merge: true }
+        )
 
-        }
+        !wasAddedToPlaylist ? setWasAddedToPlaylist(true) : setWasAddedToPlaylist(false)
 
         setIsLoading(false)
     }

app/components/NavButtons/index.tsx

@@ -40,10 +40,9 @@ function NavButtons(props: PropsType) {
     return (
         <div className={styles.nav_button_container}>
 
-            {props.options.map((item, key: number) => (
-                <>
+            {props.options.map((item) => (
+                <React.Fragment key={item.value}>
                     <button
-                        key={key}
                         data-active={lastValueReceived == (item.value)}
                         onClick={() => toggleStateAndReturnValue(item.value)}
                         aria-label={item.name}
@@ -53,7 +52,7 @@ function NavButtons(props: PropsType) {
                     {props.sepateWithSpan && (
                         <span> | </span>
                     )}
-                </>
+                </React.Fragment>
             ))}
 
         </div>

app/components/UserLoginModal/index.tsx

@@ -78,6 +78,7 @@ function UserModal({ onClick, auth, }: ModalTypes) {
         await setDoc(doc(collection(db, "users"), user.uid), {
             bookmarks: [],
             keepWatching: [],
+            notifications: [],
             comments: {},
             episodesWatchedBySource: {},
             videoSource: "gogoanime",

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

@@ -0,0 +1,203 @@
+#notification_container {
+
+    position: relative;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+
+}
+
+#notification_btn {
+
+    margin: auto;
+    display: flex;
+
+    padding: 10px;
+
+    border-radius: 50%;
+
+    background-color: transparent;
+    border: 0;
+
+}
+
+#notification_btn:hover,
+#notification_btn[data-active=true] {
+
+    background-color: var(--white-25);
+
+}
+
+#notification_btn svg {
+
+    transform: scale(1.3);
+
+}
+
+span#notifications_badge {
+
+    font-size: var(--font-size--small-2);
+
+    position: absolute;
+    top: 20%;
+    right: -5%;
+
+    padding: 3px 6px;
+
+    border-radius: 50%;
+    background: var(--brand-color);
+    color: var(--white-100);
+
+}
+
+/* NOTIFICATIONS RESULTS */
+#results_container {
+
+    box-shadow: 4px 4px 12px 0px var(--black-100);
+
+    transform: translate(25%, 0%) !important;
+
+    width: calc(96vw - 32px);
+    max-width: 400px;
+
+    position: absolute;
+    right: 0;
+    top: 60px;
+
+    background-color: var(--background);
+    border: 2px solid var(--brand-color);
+    border-radius: 8px;
+
+    padding: 16px;
+
+}
+
+@media(min-width: 580px) {
+
+    #results_container {
+        min-width: 290px;
+        transform: translate(-75%, 0%) !important;
+        left: 0;
+    }
+
+}
+
+@media(min-width: 1780px) {
+
+    #results_container {
+        transform: translate(-50%, 0%) !important;
+        left: 50%;
+    }
+
+}
+
+#results_container>h4 {
+
+    color: var(--white-100);
+    font-size: var(--font-size--h5);
+
+    margin-bottom: 24px;
+
+}
+
+#results_container>ul {
+
+    max-height: 500px;
+    overflow: auto;
+
+    display: flex;
+    flex-direction: column;
+    gap: 8px 0;
+
+}
+
+#results_container>ul::-webkit-scrollbar {
+    width: 4px;
+}
+
+#results_container>ul::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 8px var(--white-05);
+    border-radius: 10px;
+}
+
+#results_container>ul::-webkit-scrollbar-thumb {
+    background: var(--white-50);
+    border-radius: 6px;
+}
+
+/* NOTIFICATION ITEM */
+.notification_item_container {
+
+    background: var(--black-75);
+    border-radius: 8px;
+
+    color: var(--white-100);
+
+    display: grid;
+    grid-template-columns: minmax(70px, 100px) 1fr;
+    gap: 0 16px;
+
+}
+
+.notification_item_container .img_container {
+
+    position: relative;
+    height: inherit;
+
+    aspect-ratio: 46 / 65;
+
+}
+
+.notification_item_container .notification_item_info {
+
+    margin: 6px 8px;
+
+}
+
+.notification_item_container h5 {
+
+
+    font-weight: 500;
+
+    font-size: var(--font-size--p);
+
+}
+
+.notification_item_container small {
+
+    font-weight: 300;
+
+    margin-top: 4px;
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    overflow: hidden;
+}
+
+.notification_item_container p {
+
+    margin: 16px 0;
+
+    font-size: var(--font-size--small-1);
+
+}
+
+.notification_item_container a {
+
+    font-weight: 500;
+
+    text-align: center;
+
+    border-radius: 6px;
+
+    background: var(--brand-color);
+
+    width: 100%;
+
+    padding: 8px 16px;
+
+    font-size: var(--font-size--small-1);
+
+}