Merge pull request #4 from ErickLimaS/dev

Fix Section Nav Though Medias Release on Home Page

front-end/api/anilist.ts

@@ -1,3 +1,4 @@
+import { lastHourOfTheDay } from '@/app/lib/format_date_unix'
 import { ApiAiringMidiaResults, ApiDefaultResult, ApiTrendingMidiaResults } from '@/app/ts/interfaces/apiAnilistDataInterface'
 import Axios from 'axios'
 
@@ -773,20 +774,24 @@ export default {
     },
 
     // RELEASING BY DAYS RANGE
-    getReleasingByDaysRange: async (type: string, timestamp: number) => {
+    getReleasingByDaysRange: async (type: string, timestamp: number, pageNumber?: number) => {
 
         try {
 
             const graphqlQuery = {
-                "query": mediaAiringApiQueryRequest(', $airingAt_greater: Int, $episode_in: [Int]', ', airingAt_greater: $airingAt_greater, episode_in: $episode_in'),
+                "query": mediaAiringApiQueryRequest(
+                    `, $airingAt_greater: Int, $airingAt_lesser: Int, $episode_in: [Int]`,
+                    `, airingAt_greater: $airingAt_greater, airingAt_lesser: $airingAt_lesser, episode_in: $episode_in`
+                ),
                 "variables": {
-                    'page': 1,
-                    'perPage': 16,
+                    'page': pageNumber || 1,
+                    'perPage': 8,
                     'type': type,
                     'sort': 'TIME',
                     "episode_in": 1,
                     'showAdultContent': false,
-                    'airingAt_greater': timestamp
+                    'airingAt_greater': timestamp,
+                    'airingAt_lesser': lastHourOfTheDay(1)
                 }
             }
 

front-end/app/components/MediaItemCoverInfo/component.module.css

@@ -5,6 +5,31 @@
     display: flex;
     flex-direction: column;
 
+    transition: all ease-in-out 100ms;
+
+}
+
+#midia_item_cover[data-loading=true] {
+
+    animation: loading 1800ms infinite;
+
+}
+
+@keyframes loading {
+
+    0% {
+        opacity: 0.5;
+
+    }
+
+    50% {
+        opacity: 0.8;
+    }
+
+    100% {
+        opacity: 0.5;
+    }
+
 }
 
 #midia_item_cover:hover #img_container {

front-end/app/components/MediaItemCoverInfo/index.tsx

@@ -4,14 +4,15 @@ import Link from 'next/link'
 import Image from 'next/image'
 import { ApiDefaultResult } from '@/app/ts/interfaces/apiAnilistDataInterface'
 
-function MediaItemCoverInfo({ positionIndex, data, darkMode }: { data: ApiDefaultResult, positionIndex?: number, darkMode?: boolean }) {
+function MediaItemCoverInfo({ positionIndex, data, darkMode, loading }: { data: ApiDefaultResult, positionIndex?: number, darkMode?: boolean, loading?: boolean }) {
 
     return (
 
         <div
             id={styles.midia_item_cover}
             className={`${styles.midia_item_container} ${darkMode ? styles.darkMode : ''}`}
             style={{ gridArea: `item${positionIndex}` }}
+            data-loading={loading || false}
         >
             <Link id={styles.img_container} href={`/media/${data.id}`}>
                 <Image src={data.coverImage && data.coverImage.large} alt={`Cover Art for ${data.title && data.title.romaji || "dsa"}`} fill></Image>

front-end/app/components/NavThoughMidiasByTimeRange/component.module.css

@@ -148,7 +148,7 @@
     #nav_title_buttons_container>h3 {
 
         padding-top: 20px;
-        border-top: 1px solid var(--black-25);
+        border-top: 1px solid var(--black-05);
 
     }
 }
@@ -188,7 +188,13 @@
 
 }
 
-#nav_title_buttons_container #buttons_container button:hover {
+#nav_title_buttons_container #buttons_container button:disabled {
+    cursor: default;
+    opacity: 0.5;
+
+}
+
+#nav_title_buttons_container #buttons_container button:not(:disabled):hover {
 
     border-color: var(--black-50);
 
@@ -200,7 +206,7 @@
 
 }
 
-#nav_title_buttons_container #buttons_container button:hover svg {
+#nav_title_buttons_container #buttons_container button:not(:disabled):hover svg {
 
     fill: var(--black-50);
 

front-end/app/components/NavThoughMidiasByTimeRange/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import React, { SetStateAction, useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styles from './component.module.css'
 import Link from 'next/link'
 import { ApiAiringMidiaResults } from '@/app/ts/interfaces/apiAnilistDataInterface'
@@ -12,58 +12,98 @@ import { convertToUnix } from '@/app/lib/format_date_unix'
 function NavThoughMidiasByTimeRange() {
 
     // 1: 1 day (today), 7: 7 days (week), 30: 30 days (month)
-    const [daysRange, setDaysRange] = useState<number | null>(null)
-    const [data, setData] = useState<ApiAiringMidiaResults[] | null>(null)
+    const [daysRange, setDaysRange] = useState<number>(1)
+    const [data, setData] = useState<ApiAiringMidiaResults[]>([])
+
+    const [pageIndex, setPageIndex] = useState<number>(1)
+
+    const [isLoading, setIsLoading] = useState<boolean>(false)
 
     useEffect(() => {
-        getMidiaByDaysRange(1)
+        getMediaByDaysRange(1)
     }, [])
 
     // gets the range of days than parse it to unix, runs function to get any midia releasing in the selected range
-    async function getMidiaByDaysRange(days: number) {
+    async function getMediaByDaysRange(days: number, newPageResults?: boolean, previous?: boolean) {
+
+        setIsLoading(true)
 
-        if (days == daysRange) return
+        if (newPageResults == false) setPageIndex(1)
 
-        const response = await API.getReleasingByDaysRange("ANIME", convertToUnix(days)).then(
+        const response = await API.getReleasingByDaysRange(
+            "ANIME",
+            convertToUnix(days),
+            newPageResults ? (previous ? pageIndex - 1 : pageIndex + 1) : undefined
+        ).then(
             res => (res as ApiAiringMidiaResults[]).filter((item) => item.media.isAdult == false)
         );
 
+        if (newPageResults) setPageIndex(previous ? pageIndex - 1 : pageIndex + 1)
+
         setData(response)
 
-        setDaysRange(days as SetStateAction<number | null>)
+        setDaysRange(days)
+
+        setIsLoading(false)
     }
 
     return (
         <>
-            <div id={styles.nav_tabs_container}>
+            <nav id={styles.nav_tabs_container} aria-label='Media By Range of Days Menu '>
 
                 <ul className='display_flex_row'>
-                    <li><button data-active={daysRange == 1} onClick={() => getMidiaByDaysRange(1)}>Today</button></li>
+                    <li>
+                        <button disabled={daysRange === 1} data-active={daysRange == 1} onClick={() => getMediaByDaysRange(1, false)}>Today</button>
+                    </li>
                     <span>/</span>
-                    <li><button data-active={daysRange == 7} onClick={() => getMidiaByDaysRange(7)}>This week</button></li>
+                    <li>
+                        <button disabled={daysRange === 7} data-active={daysRange == 7} onClick={() => getMediaByDaysRange(7, false)}>This week</button>
+                    </li>
                     <span>/</span>
-                    <li><button data-active={daysRange == 30} onClick={() => getMidiaByDaysRange(30)}>Last 30 days</button></li>
+                    <li>
+                        <button disabled={daysRange === 30} data-active={daysRange == 30} onClick={() => getMediaByDaysRange(30, false)}>Last 30 days</button>
+                    </li>
                 </ul>
 
-            </div>
+            </nav>
 
             <div id={styles.itens_container}>
 
-                {data != null ? (
-                    data.slice(0, 8).map((item: ApiAiringMidiaResults, key: number) => (
-                        <MediaItemCoverInfo key={key} data={item.media} positionIndex={key + 1} />
+                {data.length > 0 ? (
+                    (data as ApiAiringMidiaResults[]).slice(0, 8).map((item: ApiAiringMidiaResults, key: number) => (
+                        <MediaItemCoverInfo
+                            key={key}
+                            data={item.media}
+                            positionIndex={key + 1}
+                            loading={isLoading} />
                     ))
                 ) : (
-                    <p className='display_align_justify_center'>Nothing Releasing Today</p>
+                    <p className='display_align_justify_center'>
+                        {daysRange == 1 && "Nothing Releasing Today"}
+                        {daysRange == 7 && "Nothing Released in 7 Days"}
+                        {daysRange == 30 && "Nothing Released in 30 Days"}
+                    </p>
                 )}
 
                 <div id={styles.nav_title_buttons_container}>
 
                     <h3>Latest Releases</h3>
 
                     <div id={styles.buttons_container} className='display_flex_row display_align_justify_center'>
-                        <button><ChevronLeftIcon alt="Icon Facing Left" /></button>
-                        <button><ChevronRightIcon alt="Icon Facing Right" /></button>
+                        <button
+                            onClick={() => getMediaByDaysRange((daysRange as number), true, true)}
+                            disabled={pageIndex == 1}
+                            aria-label="Previous Page Results"
+                        >
+                            <ChevronLeftIcon alt="Icon Facing Left" />
+                        </button>
+                        <button
+                            onClick={() => getMediaByDaysRange((daysRange as number), true, false)}
+                            disabled={data?.length <= 3}
+                            aria-label="Next Page Results"
+                        >
+                            <ChevronRightIcon alt="Icon Facing Right" />
+                        </button>
                     </div>
 
                     <Link href={`/releases/`} className='display_align_justify_center'>VIEW ALL <ChevronRightIcon alt="Icon Facing Right" /></Link>

front-end/app/lib/format_date_unix.ts

@@ -1,3 +1,4 @@
+// receive a number of days and returns the unix timestamp 
 export function convertToUnix(days: number) {
 
     if (days > 1) {
@@ -6,20 +7,26 @@ export function convertToUnix(days: number) {
         return timestamp
     }
 
+    // if days is 1 is meant to be as today
     const timestamp = Date.parse(new Date(Date.now()) as any) / 1000;
 
     return timestamp
 }
 
-export function convertFromUnix(days: number) {
+// get last minutes and seconds of this day (today) and returns the unix timestamp
+export function lastHourOfTheDay(days: number){
 
-    // if (days > 1) {
-    //     const timestamp = Date.parse(new Date(Date.now() - days * 24 * 60 * 60 * 1000) as any) / 1000;
+    const date = new Date(
+        Date.UTC(
+            new Date().getFullYear(),
+            new Date().getMonth(),
+            days == 1 ? new Date().getDate() : new Date().getDate() - days,
+            26,
+            59,
+            59
+        )
+    );
 
-    //     return timestamp
-    // }
+    return Math.floor(date.getTime() / 1000)
 
-    // const timestamp = Date.parse(new Date(Date.now()) as any) / 1000;
-
-    // return timestamp
 }

front-end/app/page.module.css

@@ -265,7 +265,7 @@ span#box_shadow_end_section {
 #launch_by_time_span_container {
 
     padding-top: 62px;
-    padding-bottom: 36px;
+    /* padding-bottom: 36px; */
 
     background-color: var(--white-100);