fix loading, refactor code, add icon title

sonicname · Aug 22, 2022 · 5b8f1c8 · 5b8f1c8 · vercel · Aug 22, 2022
1 parent 883c78d
commit 5b8f1c8
Show file tree

Hide file tree

Showing 35 changed files with 233 additions and 196 deletions.
diff --git a/assets/otaku.ico b/assets/otaku.ico
diff --git a/index.html b/index.html
@@ -3,7 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Anime Website</title>
+    <link rel="shortcut icon" href="./assets/otaku.ico" type="image/x-icon">
+    <title>Anime, Manga Information Page</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/components/anime-details/DetailListItem.jsx b/src/components/anime-details/DetailListItem.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import { NavLink } from "react-router-dom";
 
 const DetailListItem = ({ items, title }) => {
@@ -18,4 +18,4 @@ const DetailListItem = ({ items, title }) => {
   );
 };
 
-export default DetailListItem;
+export default memo(DetailListItem);
diff --git a/src/components/anime-details/DetailStatus.jsx b/src/components/anime-details/DetailStatus.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const DetailStatus = ({ type, content, className }) => {
   return (
     <span className={`flex gap-x-2 ${className}`}>
@@ -7,4 +9,4 @@ const DetailStatus = ({ type, content, className }) => {
   );
 };
 
-export default DetailStatus;
+export default memo(DetailStatus);
diff --git a/src/components/anime/AnimeItem.jsx b/src/components/anime/AnimeItem.jsx
@@ -2,6 +2,7 @@ import { useNavigate } from "react-router-dom";
 import IconStar from "../icons/IconStar";
 import IconFavorite from "../icons/IconFavorite";
 import Button from "../buttons/Button";
+import { memo } from "react";
 
 const AnimeItem = ({ anime }) => {
   const navigate = useNavigate();
@@ -39,4 +40,4 @@ const AnimeItem = ({ anime }) => {
   );
 };
 
-export default AnimeItem;
+export default memo(AnimeItem);
diff --git a/src/components/anime/AnimeItemSkeleton.jsx b/src/components/anime/AnimeItemSkeleton.jsx
@@ -1,6 +1,7 @@
 import IconStar from "../icons/IconStar";
 import IconFavorite from "../icons/IconFavorite";
 import LoadingSkeleton from "../loading/LoadingSkeleton";
+import { memo } from "react";
 
 const AnimeItemSkeleton = () => {
   return (
@@ -31,4 +32,4 @@ const AnimeItemSkeleton = () => {
   );
 };
 
-export default AnimeItemSkeleton;
+export default memo(AnimeItemSkeleton);
diff --git a/src/components/anime/AnimeList.jsx b/src/components/anime/AnimeList.jsx
@@ -5,6 +5,7 @@ import { getListAnime } from "../../apis/apis";
 import { useQuery } from "@tanstack/react-query";
 import { toast } from "react-toastify";
 import { useNavigate } from "react-router-dom";
+import { memo } from "react";
 
 const AnimeList = ({ type }) => {
   const { data, isError, isLoading } = useQuery(["list-anime", type], () =>
@@ -39,4 +40,4 @@ const AnimeList = ({ type }) => {
   );
 };
 
-export default AnimeList;
+export default memo(AnimeList);
diff --git a/src/components/buttons/Button.jsx b/src/components/buttons/Button.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const Button = ({ className = "", onClick = () => {}, children }) => {
   return (
     <button
@@ -9,4 +11,4 @@ const Button = ({ className = "", onClick = () => {}, children }) => {
   );
 };
 
-export default Button;
+export default memo(Button);
diff --git a/src/components/character/CharacterItem.jsx b/src/components/character/CharacterItem.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import { memo } from "react";
 import { useNavigate } from "react-router-dom";
 import IconFavorite from "../icons/IconFavorite";
 import Button from "../buttons/Button";
@@ -32,4 +32,4 @@ const CharacterItem = ({ character }) => {
   );
 };
 
-export default CharacterItem;
+export default memo(CharacterItem);
diff --git a/src/components/character/CharacterItemSkeleton.jsx b/src/components/character/CharacterItemSkeleton.jsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import LoadingSkeleton from "../loading/LoadingSkeleton";
 import IconFavorite from "../icons/IconFavorite";
 
@@ -22,4 +23,4 @@ const CharacterItemSkeleton = () => {
   );
 };
 
-export default CharacterItemSkeleton;
+export default memo(CharacterItemSkeleton);
diff --git a/src/components/character/CharacterList.jsx b/src/components/character/CharacterList.jsx
diff --git a/src/components/header/HeaderHamburger.jsx b/src/components/header/HeaderHamburger.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const HeaderHamburger = ({ show }) => {
   return (
     <>
@@ -20,4 +22,4 @@ const HeaderHamburger = ({ show }) => {
   );
 };
 
-export default HeaderHamburger;
+export default memo(HeaderHamburger);
diff --git a/src/components/header/HeaderLink.jsx b/src/components/header/HeaderLink.jsx
@@ -1,8 +1,9 @@
 import { NavLink } from "react-router-dom";
+import { memo } from "react";
 
 const HeaderLink = ({ to, setShow, children }) => {
   return (
-    <li className="p-3 font-semibold">
+    <li className="m-3 font-semibold w-full lg:w-auto">
       <NavLink
         className={({ isActive }) =>
           `p-3 ${isActive && "bg-green-500"} text-white rounded-lg`
@@ -16,4 +17,4 @@ const HeaderLink = ({ to, setShow, children }) => {
   );
 };
 
-export default HeaderLink;
+export default memo(HeaderLink);
diff --git a/src/components/icons/IconEmail.jsx b/src/components/icons/IconEmail.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const IconEmail = ({ className }) => {
   return (
     <svg
@@ -17,4 +19,4 @@ const IconEmail = ({ className }) => {
   );
 };
 
-export default IconEmail;
+export default memo(IconEmail);
diff --git a/src/components/icons/IconFavorite.jsx b/src/components/icons/IconFavorite.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const IconFavorite = ({ className }) => {
   return (
     <svg
@@ -15,4 +17,4 @@ const IconFavorite = ({ className }) => {
   );
 };
 
-export default IconFavorite;
+export default memo(IconFavorite);
diff --git a/src/components/icons/IconPhone.jsx b/src/components/icons/IconPhone.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const IconPhone = ({ className }) => {
   return (
     <svg
@@ -17,4 +19,4 @@ const IconPhone = ({ className }) => {
   );
 };
 
-export default IconPhone;
+export default memo(IconPhone);
diff --git a/src/components/icons/IconRank.jsx b/src/components/icons/IconRank.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const IconRank = ({ className }) => {
   return (
     <svg
@@ -15,4 +17,4 @@ const IconRank = ({ className }) => {
   );
 };
 
-export default IconRank;
+export default memo(IconRank);
diff --git a/src/components/icons/IconStar.jsx b/src/components/icons/IconStar.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const IconStar = ({ className }) => {
   return (
     <svg
@@ -11,4 +13,4 @@ const IconStar = ({ className }) => {
   );
 };
 
-export default IconStar;
+export default memo(IconStar);
diff --git a/src/components/icons/IconUserGroup.jsx b/src/components/icons/IconUserGroup.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const IconUserGroup = ({ className }) => {
   return (
     <svg
@@ -11,4 +13,4 @@ const IconUserGroup = ({ className }) => {
   );
 };
 
-export default IconUserGroup;
+export default memo(IconUserGroup);
diff --git a/src/components/index.jsx b/src/components/index.jsx
@@ -0,0 +1,48 @@
+import AnimeItem from "./anime/AnimeItem";
+import AnimeItemSkeleton from "./anime/AnimeItemSkeleton";
+import AnimeList from "./anime/AnimeList";
+
+import DetailListItem from "./anime-details/DetailListItem";
+import DetailStatus from "./anime-details/DetailStatus";
+
+import Button from "./buttons/Button";
+
+import CharacterItem from "./character/CharacterItem";
+import CharacterItemSkeleton from "./character/CharacterItemSkeleton";
+
+import HeaderHamburger from "./header/HeaderHamburger";
+import HeaderLink from "./header/HeaderLink";
+
+import IconEmail from "./icons/IconEmail";
+import IconFavorite from "./icons/IconFavorite";
+import IconPhone from "./icons/IconPhone";
+import IconRank from "./icons/IconRank";
+import IconStar from "./icons/IconStar";
+import IconUserGroup from "./icons/IconUserGroup";
+
+import ShareLayout from "./layout/ShareLayout";
+
+import LoadingSkeleton from "./loading/LoadingSkeleton";
+import LoadingComponent from "./loading/LoadingComponent";
+
+export {
+  LoadingComponent,
+  ShareLayout,
+  IconRank,
+  IconStar,
+  Button,
+  LoadingSkeleton,
+  IconUserGroup,
+  IconPhone,
+  IconFavorite,
+  IconEmail,
+  HeaderLink,
+  HeaderHamburger,
+  CharacterItemSkeleton,
+  AnimeList,
+  CharacterItem,
+  DetailStatus,
+  DetailListItem,
+  AnimeItemSkeleton,
+  AnimeItem,
+};
diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
@@ -1,5 +1,6 @@
 import IconEmail from "../icons/IconEmail";
 import IconPhone from "../icons/IconPhone";
+import { memo } from "react";
 
 const Footer = () => {
   return (
@@ -32,4 +33,4 @@ const Footer = () => {
   );
 };
 
-export default Footer;
+export default memo(Footer);
diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { memo, useState } from "react";
 import { NavLink } from "react-router-dom";
 import HeaderLink from "../header/HeaderLink";
 import HeaderHamburger from "../header/HeaderHamburger";
@@ -59,4 +59,4 @@ const Header = () => {
   );
 };
 
-export default Header;
+export default memo(Header);
diff --git a/src/components/layout/ShareLayout.jsx b/src/components/layout/ShareLayout.jsx
@@ -1,6 +1,7 @@
 import { Outlet } from "react-router-dom";
 import Header from "./Header";
 import Footer from "./Footer";
+import { memo } from "react";
 
 const ShareLayout = () => {
   return (
@@ -12,4 +13,4 @@ const ShareLayout = () => {
   );
 };
 
-export default ShareLayout;
+export default memo(ShareLayout);
diff --git a/src/components/loading/LoadingComponent.jsx b/src/components/loading/LoadingComponent.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const LoadingComponent = () => {
   return (
     <div className="fixed inset-0 w-screen h-screen bg-gray-400 flex items-center justify-center">
@@ -23,4 +25,4 @@ const LoadingComponent = () => {
   );
 };
 
-export default LoadingComponent;
+export default memo(LoadingComponent);
diff --git a/src/components/loading/LoadingSkeleton.jsx b/src/components/loading/LoadingSkeleton.jsx
@@ -1,3 +1,5 @@
+import { memo } from "react";
+
 const LoadingSkeleton = ({ className, width, height, radius }) => {
   return (
     <div
@@ -11,4 +13,4 @@ const LoadingSkeleton = ({ className, width, height, radius }) => {
   );
 };
 
-export default LoadingSkeleton;
+export default memo(LoadingSkeleton);