Optimize code

darwinia-network · Jan 31, 2024 · bca47f2 · bca47f2
1 parent ea4c6dd
commit bca47f2
Show file tree

Hide file tree

Showing 34 changed files with 165 additions and 157 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,4 @@
 import { useReducer } from "react";
-import "./assets/styles/app.scss";
 import Navigation from "./components/Navigation";
 import Routes from "./routes";
 import { accountReducer, accountInitialState, AccountContext } from "./store";
@@ -8,12 +7,12 @@ import { useLocation } from "react-router-dom";
 
 function App() {
   const [accountState, accountDispatch] = useReducer(accountReducer, accountInitialState);
-  const location = useLocation();
+  const { pathname } = useLocation();
 
   return (
     <>
       <AccountContext.Provider value={{ state: accountState, dispatch: accountDispatch }}>
-        {location.pathname !== "/" && <Navigation />}
+        {pathname !== "/" && <Navigation />}
         <ScrollToTop />
         <Routes />
       </AccountContext.Provider>

diff --git a/src/assets/styles/app.scss b/src/assets/styles/app.scss
diff --git a/...dingWithMsgport/BuildingWithMsgportPC.tsx → ...ithMsgport/DesktopBuildingWithMsgport.tsx b/...dingWithMsgport/BuildingWithMsgportPC.tsx → ...ithMsgport/DesktopBuildingWithMsgport.tsx
@@ -4,7 +4,7 @@ import RightArrowRound from "../RightArrowRound";
 import { link, menu, title } from "./data";
 import useApp from "../../hooks/useApp";
 
-export default function BuildingWithMsgportPC() {
+export default function DesktopBuildingWithMsgport() {
   const { isDesktopHeight } = useApp();
   const [activeTitle, setActiveTitle] = useState(menu[0].title);
   const activeMenu = menu.find(({ title }) => title === activeTitle) || menu[0];

diff --git a/...WithMsgport/BuildingWithMsgportMobile.tsx → ...WithMsgport/MobileBuildingWithMsgport.tsx b/...WithMsgport/BuildingWithMsgportMobile.tsx → ...WithMsgport/MobileBuildingWithMsgport.tsx
@@ -1,8 +1,8 @@
 import { useState } from "react";
-import BuildingWithMsgportMobileMenuItem from "./BuildingWithMsgportMobileMenuItem";
+import MobileMenuItem from "./MobileMenuItem";
 import { link, menu, title } from "./data";
 
-export default function BuildingWithMsgportMobile() {
+export default function MobileBuildingWithMsgport() {
   const [activeTitle, setActiveActive] = useState(menu[0].title);
 
   return (
@@ -13,7 +13,7 @@ export default function BuildingWithMsgportMobile() {
       </div>
       <div className="flex flex-col gap-[1.875rem]">
         {menu.map((m) => (
-          <BuildingWithMsgportMobileMenuItem
+          <MobileMenuItem
             key={m.title}
             activeTitle={activeTitle}
             title={m.title}

diff --git a/...ort/BuildingWithMsgportMobileMenuItem.tsx → ...ts/BuildingWithMsgport/MobileMenuItem.tsx b/...ort/BuildingWithMsgportMobileMenuItem.tsx → ...ts/BuildingWithMsgport/MobileMenuItem.tsx
@@ -9,7 +9,7 @@ interface Props {
   onChange?: (title: string) => void;
 }
 
-export default function BuildingWithMsgportMobileMenuItem({
+export default function MobileMenuItem({
   title,
   activeTitle,
   description,

diff --git a/src/components/FeatureV2.tsx → src/components/Features/Feature.tsx b/src/components/FeatureV2.tsx → src/components/Features/Feature.tsx
@@ -1,12 +1,12 @@
-import useApp from "../hooks/useApp";
+import useApp from "../../hooks/useApp";
 
 interface Props {
   icon: string; // File path
   title: string;
   description: string;
 }
 
-export default function FeatureV2({ icon, title, description }: Props) {
+export default function Feature({ icon, title, description }: Props) {
   const { isDesktopWidth, isDesktopHeight } = useApp();
 
   return (

diff --git a/src/components/Features.tsx → src/components/Features/index.tsx b/src/components/Features.tsx → src/components/Features/index.tsx
@@ -1,7 +1,7 @@
-import useApp from "../hooks/useApp";
-import FeatureV2 from "./FeatureV2";
+import useApp from "../../hooks/useApp";
+import Feature from "./Feature";
 
-export const features: { icon: string; title: string; description: string }[] = [
+const features: { icon: string; title: string; description: string }[] = [
   {
     icon: "/images/features/chain-free-empowerment.png",
     title: "Chain-Free Empowerment",
@@ -29,22 +29,22 @@ export default function Features() {
     <div className={`flex flex-col w-fit ${isDesktopHeight ? "gap-[90px]" : "gap-2"}`}>
       <div className="flex items-center justify-center">
         {features.at(1) ? (
-          <FeatureV2 icon={features[1].icon} title={features[1].title} description={features[1].description} />
+          <Feature icon={features[1].icon} title={features[1].title} description={features[1].description} />
         ) : null}
       </div>
       <div className="flex items-center gap-[304px]">
         {features.at(0) ? (
-          <FeatureV2 icon={features[0].icon} title={features[0].title} description={features[0].description} />
+          <Feature icon={features[0].icon} title={features[0].title} description={features[0].description} />
         ) : null}
         {features.at(2) ? (
-          <FeatureV2 icon={features[2].icon} title={features[2].title} description={features[2].description} />
+          <Feature icon={features[2].icon} title={features[2].title} description={features[2].description} />
         ) : null}
       </div>
     </div>
   ) : (
     <div className="flex flex-col gap-[60px]">
       {features.map(({ icon, title, description }) => (
-        <FeatureV2 key={title} icon={icon} title={title} description={description} />
+        <Feature key={title} icon={icon} title={title} description={description} />
       ))}
     </div>
   );

diff --git a/src/components/FooterSection.tsx → src/components/FooterLinks/Item.tsx b/src/components/FooterSection.tsx → src/components/FooterLinks/Item.tsx
@@ -1,12 +1,12 @@
 import { Link } from "react-router-dom";
-import useApp from "../hooks/useApp";
+import useApp from "../../hooks/useApp";
 
 interface Props {
   title: string;
   links: { text: string; href?: string; isExternal?: boolean; isComingSoon?: boolean }[];
 }
 
-export default function FooterSection({ title, links }: Props) {
+export default function Item({ title, links }: Props) {
   const { isDesktopHeight } = useApp();
 
   return (
@@ -38,4 +38,4 @@ export default function FooterSection({ title, links }: Props) {
       </div>
     </div>
   );
-}
+}
diff --git a/src/components/FooterSections.tsx → src/components/FooterLinks/index.tsx b/src/components/FooterSections.tsx → src/components/FooterLinks/index.tsx
@@ -1,4 +1,4 @@
-import FooterSection from "./FooterSection";
+import Item from "./Item";
 
 const sections: {
   title: string;
@@ -70,18 +70,18 @@ const sections: {
   },
 ];
 
-export default function FooterSections() {
+export default function FooterLinks() {
   return (
     <div className="hidden lg:flex justify-between">
       {sections.at(1) ? (
         <div className="flex flex-col gap-[100px]">
           {sections.slice(0, 2).map((section) => (
-            <FooterSection key={section.title} title={section.title} links={section.links} />
+            <Item key={section.title} title={section.title} links={section.links} />
           ))}
         </div>
       ) : null}
       {sections.slice(2).map((section) => (
-        <FooterSection key={section.title} title={section.title} links={section.links} />
+        <Item key={section.title} title={section.title} links={section.links} />
       ))}
     </div>
   );

diff --git a/src/components/Header/HeaderPC.tsx → src/components/Header/DesktopHeader.tsx b/src/components/Header/HeaderPC.tsx → src/components/Header/DesktopHeader.tsx
@@ -1,16 +1,17 @@
 import { Link } from "react-router-dom";
-import NavigationV2PC from "../NavigationV2/NavigationV2PC";
+import DesktopNavigation from "../Navigation2/DesktopNavigation";
 import { useRef, useState } from "react";
-import { medias, navigations } from "./data";
+import { navigations } from "./data";
 import useApp from "../../hooks/useApp";
 import useMediaQuery from "../../hooks/useMediaQuery";
+import { HeaderSocialMedia } from "../SocialMedia";
 
-export default function HeaderPC() {
+export default function DesktopHeader() {
   const [isNavigationActive, setIsNavigationActive] = useState(navigations.map(() => false));
   const isPortraitHeight = useMediaQuery("max_h_pc", "vertical");
   const [isHovering, setIsHovering] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);
-  const { pcScrollLeft, isDesktopHeight } = useApp();
+  const { desktopScrollLeft, isDesktopHeight } = useApp();
 
   const hasActiveNavigation = isNavigationActive.some((isActive) => isActive);
 
@@ -36,28 +37,18 @@ export default function HeaderPC() {
         style={{
           width: isDesktopHeight
             ? undefined
-            : isHovering || hasActiveNavigation || pcScrollLeft <= 580
+            : isHovering || hasActiveNavigation || desktopScrollLeft <= 580
             ? ref.current?.clientWidth
             : 0,
         }}
       >
         <div className="flex items-center gap-[2.5rem] pl-[2.5rem] pr-[1.25rem] w-max shrink-0" ref={ref}>
-          <NavigationV2PC
+          <DesktopNavigation
             data={navigations}
             isNavigationActive={isNavigationActive}
             setIsNavigationActive={setIsNavigationActive}
           />
-          {medias.map((media, index) => (
-            <a
-              key={index}
-              rel="noopener noreferrer"
-              target="_blank"
-              href={media.link}
-              className="shrink-0 transition-transform hover:scale-105 active:scale-95"
-            >
-              <img width={34} height={34} alt="" src={media.icon} className="shrink-0 w-[2.125rem] h-[2.125rem]" />
-            </a>
-          ))}
+          <HeaderSocialMedia />
         </div>
       </div>
     </div>

diff --git a/src/components/Header/HeaderMobile.tsx → src/components/Header/MobileHeader.tsx b/src/components/Header/HeaderMobile.tsx → src/components/Header/MobileHeader.tsx
@@ -1,10 +1,10 @@
 import { useEffect, useRef, useState } from "react";
 import { Link } from "react-router-dom";
 import Drawer from "../../ui/Drawer";
-import NavigationV2Mobile from "../NavigationV2/NavigationV2Mobile";
+import NavigationV2Mobile from "../Navigation2/MobileNavigation";
 import { navigations } from "./data";
 
-export default function HeaderMobile() {
+export default function MobileHeader() {
   const [isScrollOver, setIsScrollOver] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const ref = useRef<HTMLDivElement | null>(null);

diff --git a/src/components/Header/data.ts b/src/components/Header/data.ts
@@ -49,7 +49,4 @@ export const navigations: { label: string; sub: { label: string; link: string; i
   },
 ];
 
-export const medias = [
-  { icon: "/images/social-media/x-black-bg.svg", link: "https://twitter.com/DarwiniaNetwork" },
-  { icon: "/images/social-media/discord-black-bg.svg", link: "https://discord.com/invite/aQdK9H4MZS" },
-];
+
diff --git a/...omponents/NavigationV2/NavigationV2PC.tsx → ...ponents/Navigation2/DesktopNavigation.tsx b/...omponents/NavigationV2/NavigationV2PC.tsx → ...ponents/Navigation2/DesktopNavigation.tsx
@@ -9,7 +9,7 @@ interface Props {
   setIsNavigationActive: Dispatch<SetStateAction<boolean[]>>;
 }
 
-export default function NavigationV2PC({ data, isNavigationActive, setIsNavigationActive }: Props) {
+export default function DesktopNavigation({ data, isNavigationActive, setIsNavigationActive }: Props) {
   const handleActiveChange = useCallback(
     (index: number, isActive: boolean) =>
       setIsNavigationActive((prev) => {

diff --git a/...nents/NavigationV2/NavigationV2Mobile.tsx → ...mponents/Navigation2/MobileNavigation.tsx b/...nents/NavigationV2/NavigationV2Mobile.tsx → ...mponents/Navigation2/MobileNavigation.tsx
@@ -6,7 +6,7 @@ interface Props {
   data: { label: string; sub: { label: string; link: string; isExternal?: boolean }[] }[];
 }
 
-export default function NavigationV2Mobile({ data }: Props) {
+export default function MobileNavigation({ data }: Props) {
   const [activeIndex, setActiveIndex] = useState(0);
   const ref = useRef<(HTMLDivElement | null)[]>(new Array(data.length).fill(null));
 

diff --git a/src/components/ResourceCard.tsx → src/components/Resources2/Card.tsx b/src/components/ResourceCard.tsx → src/components/Resources2/Card.tsx
@@ -1,6 +1,6 @@
 import { useState } from "react";
-import RightArrowRound from "./RightArrowRound";
-import useApp from "../hooks/useApp";
+import useApp from "../../hooks/useApp";
+import RightArrowRound from "../RightArrowRound";
 
 interface Props {
   icon: string; // File path
@@ -12,7 +12,7 @@ interface Props {
   };
 }
 
-export default function ResourceCard({ icon, title, description, detail }: Props) {
+export default function Card({ icon, title, description, detail }: Props) {
   const [isHovering, setIsHovering] = useState(false);
   const { isDesktopWidth, isDesktopHeight } = useApp();
 
@@ -40,4 +40,4 @@ export default function ResourceCard({ icon, title, description, detail }: Props
       </a>
     </div>
   );
-}
+}
diff --git a/src/components/ResourcesV2.tsx → src/components/Resources2/index.tsx b/src/components/ResourcesV2.tsx → src/components/Resources2/index.tsx
@@ -1,4 +1,4 @@
-import ResourceCard from "./ResourceCard";
+import Card from "./Card";
 
 const resources: { icon: string; title: string; description: string; detail: { link: string } }[] = [
   {
@@ -30,17 +30,17 @@ const resources: { icon: string; title: string; description: string; detail: { l
   },
 ];
 
-export default function ResourcesV2() {
+export default function Resources2() {
   return (
     <div className="flex flex-col gap-10 lg:gap-[34px]">
       <h2 className="text-h2 text-black lg:text-[3.125rem] lg:font-bold lg:tracking-[0.125rem] lg:leading-normal">
         Resources
       </h2>
       <div className="flex flex-col gap-10 lg:flex-row lg:gap-[88px]">
         {resources.map(({ icon, title, description, detail }) => (
-          <ResourceCard key={title} icon={icon} title={title} description={description} detail={detail} />
+          <Card key={title} icon={icon} title={title} description={description} detail={detail} />
         ))}
       </div>
     </div>
   );
-}
+}
diff --git a/src/components/FooterSocialMedia.tsx → src/components/SocialMedia.tsx b/src/components/FooterSocialMedia.tsx → src/components/SocialMedia.tsx
@@ -1,4 +1,9 @@
-const medias: { icon: string; link: string }[] = [
+const headerData = [
+  { icon: "/images/social-media/x-black-bg.svg", link: "https://twitter.com/DarwiniaNetwork" },
+  { icon: "/images/social-media/discord-black-bg.svg", link: "https://discord.com/invite/aQdK9H4MZS" },
+];
+
+const footerData: { icon: string; link: string }[] = [
   { icon: "/images/social-media/x-white-bg.svg", link: "https://twitter.com/DarwiniaNetwork" },
   { icon: "/images/social-media/telegram-white-bg.svg", link: "https://t.me/DarwiniaNetwork" },
   { icon: "/images/social-media/discord-white-bg.svg", link: "https://discord.com/invite/aQdK9H4MZS" },
@@ -8,10 +13,10 @@ const medias: { icon: string; link: string }[] = [
   { icon: "/images/social-media/email-white-bg.svg", link: "mailto:[email protected]" },
 ];
 
-export default function FooterSocialMedia() {
+export function FooterSocialMedia() {
   return (
     <div className="flex items-center gap-5 lg:gap-medium">
-      {medias.map(({ icon, link }, index) => (
+      {footerData.map(({ icon, link }, index) => (
         <a
           key={index}
           rel="noopener noreferrer"
@@ -25,3 +30,21 @@ export default function FooterSocialMedia() {
     </div>
   );
 }
+
+export function HeaderSocialMedia() {
+  return (
+    <div className="flex items-center gap-[2.5rem]">
+      {headerData.map((media, index) => (
+        <a
+          key={index}
+          rel="noopener noreferrer"
+          target="_blank"
+          href={media.link}
+          className="shrink-0 transition-transform hover:scale-105 active:scale-95"
+        >
+          <img width={34} height={34} alt="" src={media.icon} className="shrink-0 w-[2.125rem] h-[2.125rem]" />
+        </a>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/SubscribeSection.tsx → src/components/SubscribeWrap.tsx b/src/components/SubscribeSection.tsx → src/components/SubscribeWrap.tsx
@@ -1,6 +1,6 @@
 import Subscribe from "./Subscribe";
 
-export default function SubscribeSection() {
+export default function SubscribeWrap() {
   return (
     <div className="hidden lg:flex flex-col items-end gap-5 pb-5 max-w-max self-end">
       <h3 className="text-h2 text-app-white">Subscribe to Project Updates</h3>

diff --git a/src/components/UseCase.tsx → src/components/UseCase/Item.tsx b/src/components/UseCase.tsx → src/components/UseCase/Item.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
-import PrettyCode from "./PrettyCode";
-import RightArrowRound from "./RightArrowRound";
-import useApp from "../hooks/useApp";
+import useApp from "../../hooks/useApp";
+import RightArrowRound from "../RightArrowRound";
+import PrettyCode from "../PrettyCode";
 
 interface Props {
   title: string;
@@ -10,7 +10,7 @@ interface Props {
   description: string;
 }
 
-export default function UseCase({ title, code, link, description }: Props) {
+export default function Item({ title, code, link, description }: Props) {
   const [isHovering, setIsHovering] = useState(false);
   const { isDesktopWidth, isDesktopHeight } = useApp();
 
@@ -42,4 +42,4 @@ export default function UseCase({ title, code, link, description }: Props) {
       <span className="text-t14 text-app-white lg:mt-[0.1875rem]">{description}</span>
     </div>
   );
-}
+}