New Notifications System, Broken URL redirects, and more

Merge pull request #51 from ErickLimaS/dev

Author: ErickLimaS

README.md

@@ -6,6 +6,20 @@ Project of animes and mangas website, utilizing the AniList, Consumet and Aniwat
 
 <p align="center">You can access this website on <a href='https://aniproject-dev.vercel.app/'>Vercel</a> or <a href='https://aniproject-website.onrender.com'>Render (really slow)</a>.</p>
 
+## Navigation
+
+- [Features](#hammer-features)
+- [Under Development](#pushpin-under-development)
+- [Tecnologies Used](#heavy_check_mark-tecnologies-used)
+- [How Can i Run It](#computer-how-can-i-run-it)
+- [How Fireabase is Organized](#open_file_folder-how-firebase-is-organized)
+  - [Authentication](#authentication)
+  - [Collections and Documents](#collections-and-documents)
+    - [Users](#users)
+    - [Comments](#comments)
+    - [Notifications](#notifications)
+- [Previews/Screenshots](#camera-previewscreenshots)
+
 ## :hammer: Features
 
 - [x] `Search`: Get a list of all animes and mangas you want using filters.
@@ -95,7 +109,57 @@ npm run dev
 
 5. That's it! It should be running.
 
-## :computer: Preview/Screenshots
+## :open_file_folder: How Firebase is Organized
+
+### Authentication
+
+With Firebase Authentication, theres 4 methods of Login/Signup:
+
+- Email
+- Google
+- GitHub
+- Anonymous
+
+It is used to store on User Document things like:
+
+- User Profile Photo
+- Username
+- Preferences (media source, adult content, subtitles and more)
+- Comments
+- Notifications
+- Bookmarked Medias
+- Currently Watching Medias
+- Episodes Watched/Chapters Read
+
+### Collections and Documents
+
+With Firebase Database, we have 3 Collections:
+
+#### Users
+
+Stores only Users Documents after a successfull signup.
+
+#### Comments
+
+Stores comments made on episodes or on its main page.
+
+Its separated based on Anilist API Media IDs Documents, and after that, a Collection that holds all comments to this media and other related to a episode where that comment was made.
+
+It strongly depends on Users Collection, due to each comment needs its user (owner). Each comment has a referer to its owner and stores its interactions, with Likes and Dislikes.
+
+When a Comment is made, it saves sort of a log on User Document, with infos like interactions with other comment or written on a episode.
+
+#### Notifications
+
+The Notifications Collections stores a document for each Media ID related to Anilist API every time a user assigned himself to be notified about a new episode release.
+
+Each document has a Collection that holds every user assigned to receive a notification.
+
+In this document, has info of all episodes already notified to any user and the next to be notified, cover art, if is complete, status and last update date.
+
+- User Document Relation: After a successfull notification is deliveried to user, it stores the last episode info on User Document, so it can be notified again and the next one is released.
+
+## :camera: Preview/Screenshots
 
 ### Home
 
@@ -119,6 +183,7 @@ npm run dev
 ![Watch Episode Page 2](https://github.com/ErickLimaS/anime-website/assets/69987890/62c3d7d0-809b-4e09-871e-6c9d2e809f71)
 
 ### Read Page
+
 ![Read Chapter Page 1](https://github.com/ErickLimaS/anime-website/assets/69987890/c1b07318-2923-49d6-a615-d80bd213f30e)
 
 ### Search/Filter Page

app/components/ButtonMarkChapterAsRead/index.tsx

@@ -15,14 +15,13 @@ import styles from "./component.module.css"
 import { AnimatePresence, motion } from 'framer-motion'
 
 type BtnTypes = {
-    chapterId: string,
+    chapterNumber: number,
     chapterTitle: string,
     mediaId: number,
-    source: "mangadex",
     hasText?: boolean
 }
 
-function ButtonMarkChapterAsRead({ chapterId, chapterTitle, mediaId, source, hasText }: BtnTypes) {
+function ButtonMarkChapterAsRead({ chapterNumber, chapterTitle, mediaId, hasText }: BtnTypes) {
 
     const [wasChapterRead, setWasChapterRead] = useState<boolean>(false)
     const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -40,12 +39,12 @@ function ButtonMarkChapterAsRead({ chapterId, chapterTitle, mediaId, source, has
 
         if (!userDoc) return
 
-        const isOnChaptersList = userDoc.get("chaptersReadBySource")?.[source]
+        const isOnChaptersList = userDoc.get("chaptersRead")
 
         if (!isOnChaptersList) return
 
         const chapterRead = isOnChaptersList[mediaId]?.find(
-            (item: { chapterId: string }) => item.chapterId == chapterId
+            (item: { chapterNumber: number }) => item.chapterNumber == chapterNumber
         )
 
         if (chapterRead) setWasChapterRead(true)
@@ -62,17 +61,15 @@ function ButtonMarkChapterAsRead({ chapterId, chapterTitle, mediaId, source, has
         const episodeData = {
 
             mediaId: mediaId,
-            chapterId: chapterId,
+            chapterNumber: chapterNumber,
             chapterTitle: chapterTitle
 
         }
 
         await setDoc(doc(db, 'users', user.uid),
             {
-                chaptersReadBySource: {
-                    [source]: {
-                        [mediaId]: !wasChapterRead ? arrayUnion(...[episodeData]) : arrayRemove(...[episodeData])
-                    }
+                chaptersRead: {
+                    [mediaId]: !wasChapterRead ? arrayUnion(...[episodeData]) : arrayRemove(...[episodeData])
                 }
             } as unknown as FieldPath,
             { merge: true }
@@ -90,7 +87,7 @@ function ButtonMarkChapterAsRead({ chapterId, chapterTitle, mediaId, source, has
 
         checkChapterMarkedAsRead()
 
-    }, [user, source, chapterId])
+    }, [user, chapterNumber])
 
     return (
 

app/components/ButtonMarkEpisodeAsWatched/index.tsx

@@ -14,15 +14,14 @@ import { AnimatePresence, motion } from 'framer-motion'
 import { SourceType } from '@/app/ts/interfaces/episodesSourceInterface'
 
 type BtnTypes = {
-    episodeId: string,
+    episodeNumber: number,
     episodeTitle: string,
     mediaId: number,
-    source: SourceType["source"],
     hasText?: boolean,
     wasWatched?: boolean
 }
 
-function ButtonMarkEpisodeAsWatched({ episodeId, episodeTitle, mediaId, source, wasWatched, hasText }: BtnTypes) {
+function ButtonMarkEpisodeAsWatched({ episodeNumber, episodeTitle, mediaId, wasWatched, hasText }: BtnTypes) {
 
     const [wasEpisodeWatched, setWasEpisodeWatched] = useState<boolean>(wasWatched || false)
     const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -43,18 +42,17 @@ function ButtonMarkEpisodeAsWatched({ episodeId, episodeTitle, mediaId, source,
         const episodeData = {
 
             mediaId: mediaId,
-            episodeId: episodeId, // crunchyroll has no ID for episodes, so it will be used its title
+            episodeNumber: episodeNumber,
             episodeTitle: episodeTitle
 
         }
 
         await setDoc(doc(db, 'users', user.uid),
             {
-                episodesWatchedBySource: {
-                    [source]: {
-                        [mediaId]: wasEpisodeWatched ? arrayRemove(...[episodeData]) : arrayUnion(...[episodeData])
-                    }
+                episodesWatched: {
+                    [mediaId]: wasEpisodeWatched ? arrayRemove(...[episodeData]) : arrayUnion(...[episodeData])
                 }
+
             } as unknown as FieldPath,
             { merge: true }
         ).then(() =>

app/components/CardMediaCoverAndDescription/component.module.css

@@ -67,6 +67,8 @@
 
     margin: 24px auto;
 
+    position: relative;
+
 }
 
 @media(min-width: 580px) {
@@ -80,6 +82,13 @@
     }
 }
 
+.item_info_container.watch_page_custom_margin {
+
+    margin: 24px auto;
+
+}
+
+
 .item_info_container>small {
     display: block;
     font-size: var(--font-size--small-2);
@@ -100,7 +109,7 @@
 }
 
 .item_info_container>p,
-.item_info_container span.paragrath_container {
+.item_info_container p.paragrath_container {
 
     color: var(--white-100);
 
@@ -110,6 +119,73 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
     overflow: hidden;
+
+}
+
+.item_info_container p.paragrath_container.watch_page_custom_line_limit {
+
+    color: var(--white-100);
+
+    font-size: var(--font-size--small-1);
+
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 6;
+    overflow: hidden;
+
+}
+
+/* CHECKBOX EXPAND */
+input.expand_description {
+
+    cursor: pointer;
+
+    appearance: none;
+
+    position: absolute;
+    bottom: 0;
+
+    padding: 4px;
+
+    width: 100%;
+
+    background: var(--black-50);
+    border-radius: 2px;
+
+    text-align: center;
+    color: var(--white-75);
+    font-family: var(--font-family-sans-sarif);
+    font-weight: 600;
+
+}
+
+input.expand_description:hover {
+
+    color: var(--white-100);
+
+}
+
+input.expand_description::before {
+
+    appearance: none;
+
+    content: "See More";
+
+}
+
+input.expand_description:checked::before {
+
+    content: "See Less";
+
+}
+
+/* EXPAND DESCRIPTION */
+.expand_description:checked+p.paragrath_container {
+
+    margin-bottom: 36px;
+
+    -webkit-line-clamp: initial;
+
 }
 
 .item_info_container .buttons_container {

app/components/CardMediaCoverAndDescription/index.tsx

@@ -21,7 +21,7 @@ function CardMediaCoverAndDescription({ data, customDescription, showButtons }:
                 ></Image>
             </Link>
 
-            <div className={styles.item_info_container}>
+            <div className={`${styles.item_info_container} ${customDescription ? styles.watch_page_custom_margin : ""}`}>
 
                 {(data.seasonYear && (
                     <small>{data.seasonYear}</small>
@@ -30,9 +30,14 @@ function CardMediaCoverAndDescription({ data, customDescription, showButtons }:
                 <h4><Link href={`/media/${data.id}`}>{data.title && data.title.romaji || data.title.native}</Link></h4>
 
                 {data.description && (
-                    <span className={styles.paragrath_container}>
-                        {customDescription || parse(data?.description) || "Description Not Available"}
-                    </span>
+                    <React.Fragment>
+                        {customDescription && (
+                            <input type='checkbox' className={styles.expand_description} />
+                        )}
+                        <p className={`${styles.paragrath_container} ${customDescription ? styles.watch_page_custom_line_limit : ""}`}>
+                            {customDescription || parse(data?.description) || "Description Not Available"}
+                        </p>
+                    </React.Fragment>
                 )}
 
                 {showButtons == undefined && (

app/components/CommentSectionContainer/component.module.css

@@ -73,8 +73,11 @@
 
 #write_comment_container form label textarea {
 
+    resize: vertical;
+
     padding: 8px;
 
+    border: 0;
     border-radius: 8px;
 
     margin: 8px 0;
@@ -100,9 +103,9 @@
 
 #write_comment_container form label textarea:focus {
 
-    border-radius: 4px;
-    outline-width: 1px;
-    outline-style: inset;
+    border-radius: 8px;
+    outline-width: 2px;
+    outline-style: outset;
     outline-color: var(--brand-color);
 
 }

app/components/CommentSectionContainer/index.tsx

@@ -333,7 +333,7 @@ function CommentSectionContainer({ media, onWatchPage, episodeId, episodeNumber
                     {(comments.length == 0 && !isLoading) && (
                         <div id={styles.no_comments_container}>
 
-                            <p>No Comments Yet.</p>
+                            <p>No Comments Yet</p>
 
                         </div>
                     )}