Merge pull request #22 from DenisCodeB/testing

FM: update

.eslintrc.json

@@ -12,6 +12,7 @@
     "rules": {
         "no-console": 1,
         "no-unused-vars": 0,
-        "@typescript-eslint/no-unused-vars": 0
+        "@typescript-eslint/no-unused-vars": 0,
+        "prefer-const": "warn"
     }
 }

package.json

@@ -3,24 +3,24 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
-        "@react-spring/web": "^9.7.3",
-        "@reduxjs/toolkit": "^1.9.5",
-        "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^14.0.0",
-        "@testing-library/user-event": "^14.4.3",
-        "@types/jest": "^29.5.2",
-        "@types/node": "^20.3.2",
-        "@types/react": "^18.2.14",
-        "@types/react-dom": "^18.2.6",
-        "classnames": "^2.3.2",
-        "next": "^13.4.7",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "react-intersection-observer": "^9.5.2",
-        "react-redux": "^8.1.1",
-        "sharp": "^0.32.4",
-        "swr": "^2.2.0",
-        "typescript": "^5.1.5"
+        "@react-spring/web": "^9.7.*",
+        "@reduxjs/toolkit": "^1.9.*",
+        "@testing-library/jest-dom": "^5.16.*",
+        "@testing-library/react": "^14.0.*",
+        "@testing-library/user-event": "^14.4.*",
+        "@types/jest": "^29.5.*",
+        "@types/node": "^20.3.*",
+        "@types/react": "^18.2.*",
+        "@types/react-dom": "^18.2.*",
+        "classnames": "^2.3.*",
+        "next": "^13.4.*",
+        "react": "^18.2.*",
+        "react-dom": "^18.2.*",
+        "react-intersection-observer": "^9.5.*",
+        "react-redux": "^8.1.*",
+        "sharp": "^0.32.*",
+        "swr": "^2.2.*",
+        "typescript": "^5.1.*"
     },
     "scripts": {
         "dev": "next dev",
@@ -42,14 +42,14 @@
         ]
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^5.60.1",
-        "@typescript-eslint/parser": "^5.60.1",
-        "eslint": "^8.43.0",
-        "jest": "^29.5.0",
-        "jest-environment-jsdom": "^29.5.0",
-        "prettier": "^2.8.8",
-        "prop-types": "^15.8.1",
-        "sass": "^1.63.6",
-        "typescript-plugin-css-modules": "^5.0.1"
+        "@typescript-eslint/eslint-plugin": "^5.60.*",
+        "@typescript-eslint/parser": "^5.60.*",
+        "eslint": "^8.43.*",
+        "jest": "^29.5.*",
+        "jest-environment-jsdom": "^29.5.*",
+        "prettier": "^2.8.*",
+        "prop-types": "^15.8.*",
+        "sass": "^1.63.*",
+        "typescript-plugin-css-modules": "^5.0.*"
     }
 }

src/api/fetchRandomExploreStuff.ts

@@ -0,0 +1,9 @@
+export const fetchRandomExploreStuff = async <T>(url: string) => {
+    const res = await fetch(url, { next: { revalidate: false } })
+
+    if (!res.ok) {
+        throw new Error('An error occurred while fetching the data.')
+    }
+
+    return res.json()
+}

src/utils/facts.ts → src/app/api/fact/route.ts

@@ -1,4 +1,7 @@
-export const FACTS_MOCK = [
+import { NextResponse } from 'next/server'
+import { getRandomIntInclusive } from '@/utils/getRandomIntInclusive'
+
+const FACTS_MOCK = [
     {
         id: 1,
         fact: 'The nucleus of a cell in your body is less than 10 micrometers across, yet it contains two meters (about 6 feet) of packaged DNA.',
@@ -12,3 +15,10 @@ export const FACTS_MOCK = [
         fact: 'The hour and minute hand of a clock coincide 22 times in a day.',
     },
 ]
+
+export const GET = () => {
+    const randomNumber = getRandomIntInclusive(0, 2)
+    const data = FACTS_MOCK[randomNumber]
+
+    return NextResponse.json({ ...data })
+}

src/utils/quotes.ts → src/app/api/quote/route.ts

@@ -1,4 +1,7 @@
-export const QUOTES_MOCK = [
+import { NextResponse } from 'next/server'
+import { getRandomIntInclusive } from '@/utils/getRandomIntInclusive'
+
+const QUOTES_MOCK = [
     {
         id: 1,
         quote: 'Pure mathematics is, in its way, the poetry of logical ideas.',
@@ -15,3 +18,10 @@ export const QUOTES_MOCK = [
         author: 'Eric Temple Bell',
     },
 ]
+
+export const GET = () => {
+    const randomNumber = getRandomIntInclusive(0, 2)
+    const data = QUOTES_MOCK[randomNumber]
+
+    return NextResponse.json({ ...data })
+}

src/hooks/useApiDataFetch.ts

@@ -0,0 +1,50 @@
+import { useCallback } from 'react'
+import useSWRImmutable from 'swr/immutable'
+import { fetchRandomExploreStuff } from '@/api/fetchRandomExploreStuff'
+
+const INITIAL_QUOTE = {
+    id: 1,
+    quote: 'Mathematics is the music of reason.',
+    author: 'James Joseph Sylvester',
+}
+
+const INITIAL_FACT = {
+    id: 1,
+    fact: 'The hour and minute hand of a clock coincide 22 times in a day.',
+}
+
+export const useApiDataFetch = <T>(url: string): T => {
+    let {
+        data = {} as T,
+        isLoading,
+        error,
+    } = useSWRImmutable(url, fetchRandomExploreStuff<T>)
+
+    const toEachRoute = useCallback(
+        (obj1: any, obj2: any) => {
+            if (/\/quote/.test(url)) data = obj1
+            else if (/\/fact/.test(url)) data = obj2
+        },
+        [isLoading, error]
+    )
+
+    if (isLoading) {
+        toEachRoute(
+            {
+                id: 0,
+                quote: 'Loading',
+                author: 'Loading',
+            },
+            {
+                id: 0,
+                fact: 'Loading',
+            }
+        )
+    }
+
+    if (error) {
+        toEachRoute(INITIAL_QUOTE, INITIAL_FACT)
+    }
+
+    return data
+}

src/ui/Fact/Fact.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { FACTS_MOCK } from '@/utils/facts'
-import { useRandom } from '@/components/Explore/components/hooks/useRandom'
+import { FACT_API } from '@/utils/routes'
+import { useApiDataFetch } from '@/hooks/useApiDataFetch'
 import style from './Fact.module.scss'
 
 interface IData {
@@ -10,7 +10,7 @@ interface IData {
 }
 
 const Fact = () => {
-    const { fact } = useRandom<IData>(FACTS_MOCK)
+    const { fact } = useApiDataFetch<IData>(FACT_API)
 
     return <span className={style.fact}>{fact}</span>
 }

src/ui/Quote/Quote.module.scss

@@ -1,6 +1,8 @@
 @use '../../styles/mixins/flex';
 
 .quote {
+    z-index: 1;
+
     &__text {
         font-size: var(--fs-20);
         font-family: var(--ff-V);

src/ui/Quote/Quote.tsx

@@ -1,17 +1,17 @@
 'use client'
 
-import { useRandom } from '@/components/Explore/components/hooks/useRandom'
-import { QUOTES_MOCK } from '@/utils/quotes'
+import { useApiDataFetch } from '@/hooks/useApiDataFetch'
+import { QUOTE_API } from '@/utils/routes'
 import style from './Quote.module.scss'
 
-interface IData {
+export interface IData {
     id: number
     quote: string
     author: string
 }
 
 const Quote = () => {
-    const { quote, author } = useRandom<IData>(QUOTES_MOCK)
+    const { quote, author } = useApiDataFetch<IData>(QUOTE_API)
 
     return (
         <div className={style.quote}>

src/utils/getRandomIntInclusive.ts

@@ -0,0 +1,5 @@
+export const getRandomIntInclusive = (min: number, max: number) => {
+    min = Math.ceil(min)
+    max = Math.floor(max)
+    return Math.floor(Math.random() * (max - min + 1) + min)
+}

src/utils/routes.ts

@@ -1,5 +1,10 @@
+const ROOT_URL = process.env.NEXT_PUBLIC_ROOT_URL
+
 export const HOME_ROUTE = '/'
 export const ABOUT_ROUTE = '/about'
 export const CONTACTS_ROUTE = '/contacts'
 export const PLAYGROUND_ROUTE = '/playground'
 export const NOT_FOUND_ROUTE = '*'
+
+export const QUOTE_API = '/api/quote'
+export const FACT_API = '/api/fact'