fix: herezja

unewMe · May 14, 2024 · 24e0ceb · 24e0ceb
1 parent caf0f16
commit 24e0ceb
Show file tree

Hide file tree

Showing 13 changed files with 176 additions and 133 deletions.
diff --git a/components/Book.tsx b/components/Book.tsx
@@ -25,5 +25,5 @@ const Book = React.memo(({ book, isFavorite, handleFavorite }) => {
   );
 });
 
-export default Book;
+export {Book};
 
diff --git a/components/BookSearch.tsx b/components/BookSearch.tsx
@@ -1,125 +1,147 @@
-import React, { useState, useEffect } from 'react';
-import Book from './Book';
-import styles from '../styles/book-search.module.css';
+import React, { useEffect, useState } from "react";
 
-const baseUrl = 'https://gutendex.com/books';
-export const languages = ['pl', 'en', 'fr'];
+import styles from "../styles/book-search.module.css";
+import { Book } from "./Book";
+import type { AppContextType, Book_t, JsonResponse } from "./appContext";
 
+const baseUrl = "https://gutendex.com/books";
+export const languages = ["pl", "en", "fr"];
 
-export function toggleStringInList(string, list) {
+const DELAY = 300;
+
+export function toggleStringInList(string: string, list: string[]): string[] {
   const index = list.indexOf(string);
   if (index === -1) {
-      // String not found in the list, so add it
-      list.push(string);
+    // String not found in the list, so add it
+    list.push(string);
   } else {
-      // String found in the list, so remove it
-      list.splice(index, 1);
+    // String found in the list, so remove it
+    list.splice(index, 1);
   }
   return list;
 }
 
-
-function BooksSearch({ favorites, handleFavorite}) {
-  const [books, setBooks] = useState(null);
-  const [searchQuery, setSearchQuery] = useState('');
+function BooksSearch({ favorites, handleFavorite }: AppContextType) {
+  const [books, setBooks] = useState<Book_t[] | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
   const [currUrl, setCurrUrl] = useState(baseUrl);
   const [prevUrl, setPrevUrl] = useState("");
   const [nextUrl, setNextUrl] = useState("");
   const [filterTags, setFilterdTags] = useState([]);
-  console.log(filterTags);
-
-
 
   useEffect(() => {
-    const delay = searchQuery ? 300 : 0; // no delay for initial fetch
-    const getBooksByDebouncing = setTimeout(async () => {
+    const delay = searchQuery ? DELAY : 0; // no delay for initial fetch
+    const handler = async () => {
       const url = new URL(currUrl);
       if (searchQuery) {
-        url.searchParams.append('search', searchQuery);
-      }
-      console.log(filterTags);
-
-      if(filterTags.length >= 1){
-        url.searchParams.append('languages', filterTags.join(','));
+        url.searchParams.append("search", searchQuery);
       }
 
-      console.log(url);
+      if (filterTags.length >= 1) {
+        url.searchParams.append("languages", filterTags.join(","));
+      }
 
       try {
         const response = await fetch(url);
-        const data = await response.json();
-        const booksWithHtml = data.results.map(book => {
+        const data = (await response.json()) as JsonResponse;
+        const booksWithHtml = data.results.map((book) => {
           return {
             ...book,
-            htmlLink: book.formats['text/html'] 
+            htmlLink: book.formats["text/html"],
           };
         });
         setBooks(booksWithHtml);
         setPrevUrl(data.previous);
         setNextUrl(data.next);
       } catch (error) {
-        console.error('An error occured:', error);
+        // eslint-disable-next-line no-console
+        console.error("Error fetching books", error);
       }
-    }, delay);
-
-    return () => clearTimeout(getBooksByDebouncing)
-
-  }, [searchQuery, currUrl, filterTags]); 
+    };
+    const getBooksByDebouncing = setTimeout(handler, delay);
 
+    return () => clearTimeout(getBooksByDebouncing);
+  }, [searchQuery, currUrl, filterTags]);
 
-  if(!books ){
+  if (!books) {
     return <div className={styles.loading}>Loading books...</div>;
   }
 
   return (
     <div>
-    <div className={styles.content_container}>
+      <div className={styles.content_container}>
+        <div>
+          <input
+            className={styles.search_box}
+            type="text"
+            value={searchQuery}
+            onChange={(e) => {
+              setCurrUrl(baseUrl);
+              setSearchQuery(e.target.value);
+            }}
+            placeholder="Search for books..."
+          />
+        </div>
+
+        <div>
+          {languages.map((clickedLanguage) => (
+            <button
+              className={`${styles.language_button} ${filterTags.includes(clickedLanguage) ? styles.active : ""}`}
+              onClick={() => {
+                var newList = [...filterTags];
+                toggleStringInList(clickedLanguage, newList);
+                setBooks(null);
+                setCurrUrl(baseUrl);
+                setFilterdTags(newList);
+              }}
+            >
+              {clickedLanguage.toUpperCase()}
+            </button>
+          ))}
+        </div>
+
+        <div className={styles.nav_pages}>
+          {prevUrl ? (
+            <div>
+              <button
+                className={styles.page_button}
+                onClick={() => {
+                  setBooks(null);
+                  setCurrUrl(prevUrl);
+                }}
+              >
+                Previous
+              </button>
+            </div>
+          ) : null}
+          {nextUrl ? (
+            <div>
+              <button
+                className={styles.page_button}
+                onClick={() => {
+                  setBooks(null);
+                  setCurrUrl(nextUrl);
+                }}
+              >
+                Next
+              </button>
+            </div>
+          ) : null}
+        </div>
+      </div>
 
       <div>
-        <input className={styles.search_box}
-          type="text"
-          value={searchQuery}
-          onChange={(e) => { setCurrUrl(baseUrl); setSearchQuery(e.target.value); }}
-          placeholder="Search for books..."
-        />
+        {books.map((book) => (
+          <Book
+            key={book.id}
+            book={book}
+            isFavorite={favorites.some((f: Book_t) => f.id === book.id)}
+            handleFavorite={handleFavorite}
+          />
+        ))}
       </div>
-
-    <div>
-    {
-      languages.map(clickedLanguage => (
-        <button className={`${styles.language_button} ${filterTags.includes(clickedLanguage) ? styles.active : ''}`} onClick={() => { 
-          var newList = [...filterTags];
-          toggleStringInList(clickedLanguage, newList);
-          setBooks(null);
-            setCurrUrl(baseUrl);
-            setFilterdTags(newList);
-        }}>{clickedLanguage.toUpperCase()}</button>
-      ))
-    }
-    </div>
-
-    <div className={styles.nav_pages}>
-      {prevUrl && <div><button className={styles.page_button} onClick={() => {setBooks(null); setCurrUrl(prevUrl); }}>Previous</button></div>}
-      {nextUrl && <div><button className={styles.page_button} onClick={() => {setBooks(null); setCurrUrl(nextUrl); }}>Next</button></div>}
-    </div>
-
-
-
-    </div>
-
-
-    <div>
-    {books.map(book => (
-        <Book 
-          key={book.id} 
-          book={book} 
-          isFavorite={favorites.some(f => f.id === book.id)}
-          handleFavorite={handleFavorite}
-        />
-      ))}
-    </div>
     </div>
   );
 }
 
-export default BooksSearch;
+export { BooksSearch };
diff --git a/components/Favorites.tsx b/components/Favorites.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import Book from './Book';
+import {Book} from './Book';
 import styles from '../styles/book-search.module.css';
 import { languages, toggleStringInList } from './BookSearch';
+import type { AppContextType } from './appContext';
 
-function Favorites({ favorites, handleFavorite }) {
+function Favorites({ favorites, handleFavorite }: AppContextType) {
   const [favoriteBooks, setFavoriteBooks] = useState([]);
   const [searchQuery, setSearchQuery] = useState('');
   const [filterTags, setFilterdTags] = useState([]);
@@ -58,7 +59,7 @@ function Favorites({ favorites, handleFavorite }) {
     </div>
 
     <div>
-      {favoriteBooks.map(book => (
+      {favoriteBooks.map(book  => (
         <Book 
           key={book.id} 
           book={book} 
@@ -71,4 +72,4 @@ function Favorites({ favorites, handleFavorite }) {
   );
 }
 
-export default Favorites;
+export {Favorites};
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -10,6 +10,7 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export {Footer}
+
 
 
diff --git a/components/Hero.tsx b/components/Hero.tsx
@@ -11,5 +11,5 @@ const Hero = () => {
   );
 };
 
-export default Hero;
+export {Hero}
 
diff --git a/components/NavBar.tsx b/components/NavBar.tsx
@@ -1,32 +1,22 @@
-import Link from 'next/link';
-import React from 'react';
-import styles from '../styles/navbar.module.css';
+import Link from "next/link";
+import React from "react";
 
-const NavBar = () => {
+import styles from "../styles/navbar.module.css";
+
+export const NavBar = () => {
   return (
     <nav className={styles.navbar}>
       <ul className={styles.navLinks}>
         <li className={styles.navLinkItem}>
-          <Link href="/">
-            Main Page
-          </Link>
+          <Link href="/">Main Page</Link>
         </li>
         <li className={styles.navLinkItem}>
-          <Link href="/books">
-            Books
-          </Link>
+          <Link href="/books">Books</Link>
         </li>
         <li className={styles.navLinkItem}>
-          <Link href="/favorites">
-            Favorites
-          </Link>
+          <Link href="/favorites">Favorites</Link>
         </li>
       </ul>
     </nav>
   );
 };
-
-export default NavBar;
-
-
-
diff --git a/components/appContext.tsx b/components/appContext.tsx
@@ -1,8 +1,40 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from "react";
+import type { ReactNode } from "react";
+import { Book } from "./Book";
 
-const AppContext = createContext();
+export interface AppContextType {
+  favorites: never[];
+  handleFavorite?: (book: Book) => void;
+}
+
+const AppContext = createContext<AppContextType>({
+  favorites: [], // Przykładowa domyślna wartość, dostosuj do swoich potrzeb
+  handleFavorite: () => {},
+});
+
+export interface Book_t {
+  id: string;
+  title: string;
+  authors: Array<{ name: string }>;
+  formats: { "text/html": string}
+  htmlLink: string;
+}
+
+interface AppContextProviderProps {
+  children: ReactNode;
+  value: AppContextType;
+}
+
+export interface JsonResponse {
+  results: Book_t[];
+  previous: string;
+  next: string;
+}
 
-export function AppContextProvider({ children, value }) {
+export function AppContextProvider({
+  children,
+  value,
+}: AppContextProviderProps) {
   return <AppContext.Provider value={value}>{children}</AppContext.Provider>;
 }
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,7 +20,7 @@
   "devDependencies": {
     "@alergeek-ventures/eslint-config": "^9.0.17",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
-    "@types/react": "18.3.1",
+    "@types/react": "^18.3.1",
     "@typescript-eslint/parser": "^7.6.0",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.1",

diff --git a/pages/books.tsx b/pages/books.tsx
@@ -1,8 +1,6 @@
-
-
-import NavBar from '../components/NavBar';
-import { useAppContext } from '../components/appContext';
-import BooksSearch from '../components/BookSearch';
+import { BooksSearch } from "../components/BookSearch";
+import { NavBar } from "../components/NavBar";
+import { useAppContext } from "../components/appContext";
 
 function Books() {
   const { favorites, handleFavorite } = useAppContext();
@@ -16,5 +14,3 @@ function Books() {
 }
 
 export default Books;
-
-
-Original file line number
+Diff line change
@@ Expand Up @@
       );
     });
-    export default Book;
+    export {Book};