Merge pull request #14 from ErickLimaS/dev

Search/Filter Page, Folder Reorganized

.gitignore

@@ -1,10 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-### NextJS ###
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage
@@ -24,7 +24,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local
@@ -35,5 +34,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# End of https://www.toptal.com/developers/gitignore/api/nextjs

README.md

@@ -1,14 +1,14 @@
-<h1 align="center">AniProject 2.0 - Under Development!</h1>
+<h1 align="center">AniProject 2.0</h1>
 
 ![AniProject Website Logo](https://user-images.githubusercontent.com/69987890/177884319-0678f842-f3ca-4f62-8d31-7638ca954057.png)
 
 Project of animes and mangas website, utilizing the <a href='https://anilist.gitbook.io/anilist-apiv2-docs/'>AniList</a> API which has info of animes and mangas released, data of the cast of that media, and many other things.
 
-You can access it <a href='https://aniproject-dev.netlify.app/'>here</a>.
+<p align="center">You can access it <a href='https://aniproject-dev.netlify.app/'>here</a>.</p>
 
 ## :hammer: Features
 
-- [x] `Search`: Get a list of animes and mangas you want to search.
+- [x] `Search`: Get a list of all animes and mangas you want using filters.
 - [x] `Watch`: Watch any available episode.
 - [x] `Read`: Read any manga chapter available.
 - [x] `Comment`: Write what you thougth of that episode or just tell something that every should know about.
@@ -18,6 +18,7 @@ You can access it <a href='https://aniproject-dev.netlify.app/'>here</a>.
 
 ## :pushpin: Under Development
 
+- [ ] `News Feed Section`
 - [ ] `Keep track of what you watched last`
 - [ ] `Be notified when a new episode/chapter is released`
 
@@ -36,10 +37,7 @@ Front-end (on netlify.com):
 - ``Anilist API``
 - ``Consumet API``
 
-Back-End (Firebase (Backend as a Service)):
-
-- On Development...
-
+Back-End (Firebase and Next.js API routes)
 
 ## :computer: How Can I Run It? 
 
@@ -50,18 +48,21 @@ Its simple!
   git clone https://github.com/ErickLimaS/anime-website.git
   ```
 
-2. From the ``front-end directory``, run ``npm install`` on your CMD to get all dependencies
+2. Run ``npm install`` on your CMD to get all dependencies
   ```javascript
   npm install
   ```
 
-3. Now you need to create a ``.env.local`` file inside the ``front-end directory`` with the url to where your Consumet API server is setted and configs for your Firebase.
-   - Check the <a href='https://github.com/consumet/api.consumet.org'>repository of Consumet API</a>.
+3. Now you need to create a ``.env.local`` file inside the ``directory`` with the url to where your Consumet API server is setted and configs for your Firebase.
+   - Check the <a href='https://github.com/consumet/api.consumet.org'>repository of Consumet API</a> and host your own server.
+   - Go to <a href='https://github.com/manami-project/anime-offline-database'>this repository</a> and get a JSON file filled with Animes info to use.
+   - This repository already has this json file, but it might be outdated. So get a new file there and put it under the ``/app/api/anime-info`` directory.
    - On Firebase, get your config to use the Authentication and Firestore Database.
 
    Your file should look like example:
   ```javascript
   NEXT_PUBLIC_CONSUMET_API_URL=https://your-hosted-consumet-api-url.com
+  NEXT_PUBLIC_INSIDE_API_URL=https://url-to-where-your-website-is-hosted.com/api/anime-info
   NEXT_PUBLIC_FIREBASE_API_KEY=[YOUR-FIREBASE-SETTINGS]
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=[YOUR-FIREBASE-SETTINGS]
   NEXT_PUBLIC_FIREBASE_PROJECT_ID=[YOUR-FIREBASE-SETTINGS]
@@ -72,7 +73,7 @@ Its simple!
   NEXT_PUBLIC_FIREBASE_DATABASE_URL=[YOUR-FIREBASE-SETTINGS]
   ```
 
-4. From ``front-end directory``, run ``npm run dev`` to initialize the website
+4. Now run ``npm run dev`` to initialize the website
   ```javascript
   npm run dev
   ```
@@ -104,6 +105,11 @@ Its simple!
 ![Watch Episode Page1](https://github.com/ErickLimaS/anime-website/assets/69987890/7df405d1-6b2b-4866-8c48-4c0eb7f14c5d)
 ![Watch Episode Page 2](https://github.com/ErickLimaS/anime-website/assets/69987890/d8a1998c-df5d-4904-b40c-aa71c3aff2dc)
 
+### Search/Filter Page
+
+![Search/Filter Page 1](https://github.com/ErickLimaS/anime-website/assets/69987890/73e09258-c927-43cf-9a02-6ddfb4af5b14)
+![Search/Filter Page 2](https://github.com/ErickLimaS/anime-website/assets/69987890/497b35fe-4c6e-464a-9cc4-3a338db9d4cf)
+
 ### Playlist Page
 
 ![Playlist page 1](https://github.com/ErickLimaS/anime-website/assets/69987890/c8ed47e5-6ac8-4ec2-adc4-fdbf2119cc11)

front-end/api/anilist.ts → api/anilist.ts

@@ -1,7 +1,12 @@
 import { lastHourOfTheDay } from '@/app/lib/format_date_unix'
 import { ApiAiringMidiaResults, ApiDefaultResult, ApiTrendingMidiaResults } from '@/app/ts/interfaces/apiAnilistDataInterface'
 import Axios from 'axios'
-import { defaultApiQueryRequest, getCurrentSeason, mediaAiringApiQueryRequest, mediaByIdQueryRequest, mediaTrendingApiQueryRequest } from './anilistQueryFunctions'
+import {
+    defaultApiQueryRequest, getCurrentSeason,
+    mediaAiringApiQueryRequest, mediaByIdQueryRequest,
+    mediaTrendingApiQueryRequest
+} from './anilistQueryFunctions'
+import { cache } from 'react'
 
 const BASE_URL: string = 'https://graphql.anilist.co/'
 
@@ -21,7 +26,7 @@ type ErrorTypes = {
 export default {
 
     // HOME PAGE
-    getNewReleases: async (type: string, format?: string, sort?: string) => {
+    getNewReleases: cache(async (type: string, format?: string, sort?: string) => {
 
         const season: string = getCurrentSeason()
 
@@ -56,10 +61,10 @@ export default {
             return console.log((error as ErrorTypes).response.data.errors)
 
         }
-    },
+    }),
 
     //SEARCH
-    getSeachResults: async (query: string) => {
+    getSeachResults: cache(async (query: string) => {
 
         try {
 
@@ -89,10 +94,10 @@ export default {
             return console.log((error as ErrorTypes).response.data.errors)
 
         }
-    },
+    }),
 
     // RELEASING THIS WEEK
-    getReleasingThisWeek: async (type: string, format?: string, page?: number) => {
+    getReleasingThisWeek: cache(async (type: string, format?: string, page?: number) => {
 
         try {
 
@@ -126,10 +131,10 @@ export default {
 
         }
 
-    },
+    }),
 
     // RELEASING BY DAYS RANGE
-    getReleasingByDaysRange: async (type: string, timestamp: number, pageNumber?: number) => {
+    getReleasingByDaysRange: cache(async (type: string, timestamp: number, pageNumber?: number) => {
 
         try {
 
@@ -166,10 +171,10 @@ export default {
 
         }
 
-    },
+    }),
 
     // TRENDING
-    getTrendingMedia: async (sort?: string) => {
+    getTrendingMedia: cache(async (sort?: string) => {
 
         try {
 
@@ -203,10 +208,10 @@ export default {
 
         }
 
-    },
+    }),
 
     // MEDIAS IN THIS FORMAT    
-    getMediaForThisFormat: async (type: string, sort?: string, pageNumber?: number, perPage?: number) => {
+    getMediaForThisFormat: cache(async (type: string, sort?: string, pageNumber?: number, perPage?: number) => {
 
         try {
 
@@ -235,10 +240,10 @@ export default {
             return console.log((error as ErrorTypes).response.data.errors)
         }
 
-    },
+    }),
 
     // GET INFO OF anime/movie/manga by ID
-    getMediaInfo: async (id: number) => {
+    getMediaInfo: cache(async (id: number) => {
 
         try {
 
@@ -265,6 +270,6 @@ export default {
             return console.log((error as ErrorTypes).response.data.errors)
 
         }
-    },
+    }),
 
 }