From 5c6a03d80b4113cc2f097d791432006677eafbc3 Mon Sep 17 00:00:00 2001 From: Erick Lima Date: Sat, 3 Feb 2024 14:10:07 -0300 Subject: [PATCH] Fix Section Nav Though Medias Release on Home Page --- front-end/api/anilist.ts | 15 ++-- .../MediaItemCoverInfo/component.module.css | 25 ++++++ .../components/MediaItemCoverInfo/index.tsx | 3 +- .../component.module.css | 12 ++- .../NavThoughMidiasByTimeRange/index.tsx | 78 ++++++++++++++----- front-end/app/lib/format_date_unix.ts | 23 ++++-- front-end/app/page.module.css | 2 +- 7 files changed, 121 insertions(+), 37 deletions(-) diff --git a/front-end/api/anilist.ts b/front-end/api/anilist.ts index 300d1d33..b5e2f6d7 100644 --- a/front-end/api/anilist.ts +++ b/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) } } diff --git a/front-end/app/components/MediaItemCoverInfo/component.module.css b/front-end/app/components/MediaItemCoverInfo/component.module.css index 9dabb2ad..73cdd8f9 100644 --- a/front-end/app/components/MediaItemCoverInfo/component.module.css +++ b/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 { diff --git a/front-end/app/components/MediaItemCoverInfo/index.tsx b/front-end/app/components/MediaItemCoverInfo/index.tsx index 27b6c1c7..d4f39f96 100644 --- a/front-end/app/components/MediaItemCoverInfo/index.tsx +++ b/front-end/app/components/MediaItemCoverInfo/index.tsx @@ -4,7 +4,7 @@ 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 ( @@ -12,6 +12,7 @@ function MediaItemCoverInfo({ positionIndex, data, darkMode }: { data: ApiDefaul id={styles.midia_item_cover} className={`${styles.midia_item_container} ${darkMode ? styles.darkMode : ''}`} style={{ gridArea: `item${positionIndex}` }} + data-loading={loading || false} > {`Cover diff --git a/front-end/app/components/NavThoughMidiasByTimeRange/component.module.css b/front-end/app/components/NavThoughMidiasByTimeRange/component.module.css index c983eb08..2159bd48 100644 --- a/front-end/app/components/NavThoughMidiasByTimeRange/component.module.css +++ b/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); diff --git a/front-end/app/components/NavThoughMidiasByTimeRange/index.tsx b/front-end/app/components/NavThoughMidiasByTimeRange/index.tsx index a4e359cc..744a7580 100644 --- a/front-end/app/components/NavThoughMidiasByTimeRange/index.tsx +++ b/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,49 +12,77 @@ 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(null) - const [data, setData] = useState(null) + const [daysRange, setDaysRange] = useState(1) + const [data, setData] = useState([]) + + const [pageIndex, setPageIndex] = useState(1) + + const [isLoading, setIsLoading] = useState(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) + setDaysRange(days) + + setIsLoading(false) } return ( <> -
+
+
- {data != null ? ( - data.slice(0, 8).map((item: ApiAiringMidiaResults, key: number) => ( - + {data.length > 0 ? ( + (data as ApiAiringMidiaResults[]).slice(0, 8).map((item: ApiAiringMidiaResults, key: number) => ( + )) ) : ( -

Nothing Releasing Today

+

+ {daysRange == 1 && "Nothing Releasing Today"} + {daysRange == 7 && "Nothing Released in 7 Days"} + {daysRange == 30 && "Nothing Released in 30 Days"} +

)}
@@ -62,8 +90,20 @@ function NavThoughMidiasByTimeRange() {

Latest Releases

- - + +
VIEW ALL diff --git a/front-end/app/lib/format_date_unix.ts b/front-end/app/lib/format_date_unix.ts index 7c36562c..203f527c 100644 --- a/front-end/app/lib/format_date_unix.ts +++ b/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 } \ No newline at end of file diff --git a/front-end/app/page.module.css b/front-end/app/page.module.css index bafb18ec..b2f396ba 100644 --- a/front-end/app/page.module.css +++ b/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);