Refactor Footer component and data handling

Refactor Footer components to use new SocialIconLink and Texts interfaces. Removed old text data file and replaced inline definitions for better modularity and translations.
Alt-Org · Sep 21, 2024 · 7cc40d1 · 7cc40d1
1 parent dbb301d
commit 7cc40d1
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 36 deletions.
diff --git a/frontend-next-migration/src/widgets/Footer/model/data/socialSectionMenu.tsx b/frontend-next-migration/src/widgets/Footer/model/data/socialSectionMenu.tsx
@@ -3,9 +3,9 @@ import {AppExternalLinks} from "@/shared/appLinks/appExternalLinks";
 import Instagram from "@/shared/assets/images/instagram.svg";
 import Facebook from "@/shared/assets/images/facebook.svg";
 import Youtube from "@/shared/assets/images/youtube.svg";
-import {SocialLink} from "../types/types";
+import {SocialIconLink} from "../types/types";
 
-export const socialLinks: SocialLink[] = [
+export const socialIconLinks: SocialIconLink[] = [
     {
         name: 'Discord',
         icon: Discord,

diff --git a/frontend-next-migration/src/widgets/Footer/model/data/text.ts b/frontend-next-migration/src/widgets/Footer/model/data/text.ts
diff --git a/frontend-next-migration/src/widgets/Footer/model/types/types.ts b/frontend-next-migration/src/widgets/Footer/model/types/types.ts
@@ -1,5 +1,12 @@
-export interface SocialLink {
+export interface SocialIconLink {
     name: string;
     icon: string;
     link: string;
+}
+
+export interface Texts {
+    cookies: string;
+    privacy: string;
+    consent: string;
+    currentYear: number;
 }
diff --git a/frontend-next-migration/src/widgets/Footer/ui/FooterDesktop/FooterDesktop.stories.tsx b/frontend-next-migration/src/widgets/Footer/ui/FooterDesktop/FooterDesktop.stories.tsx
@@ -1,16 +1,32 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import FooterDesktop from './FooterDesktop';
+import {socialIconLinks} from "../../model/data/socialSectionMenu";
 
 export default {
   title: 'widgets/Footer/Desktop',
   component: FooterDesktop,
 } as ComponentMeta<typeof FooterDesktop>;
 
 const Template: ComponentStory<typeof FooterDesktop> = () => (
-    <FooterDesktop/>
+    <FooterDesktop
+        socialLinks={socialIconLinks}
+        title={"Be part of our community 😊"}
+        texts={
+            {
+                consent: "Consent",
+                cookies: "Cookies",
+                privacy: "Privacy",
+                currentYear: new Date().getFullYear(),
+            }
+        }
+    />
 );
 
 export const Default = Template.bind({});
 
 
+// export const CurrentYear = new Date().getFullYear();
+// export const CompanyName = "Psyche's Royale Gaming ry";
+// export const Cookies = 'Cookies';
+// export const Privacy = 'Privacy';
diff --git a/frontend-next-migration/src/widgets/Footer/ui/FooterDesktop/FooterDesktop.tsx b/frontend-next-migration/src/widgets/Footer/ui/FooterDesktop/FooterDesktop.tsx
@@ -2,17 +2,39 @@ import {memo} from "react";
 import {Container} from "@/shared/ui/Container";
 import cls from "./FooterDesktop.module.scss";
 import {SocialSection} from "../SocialSection/SocialSection";
-import {socialLinks} from "../../model/data/socialSectionMenu";
 import {Rights} from "../Rights/Rights";
 import {Title} from "../Title/Title";
+import {SocialIconLink, Texts} from "../../model/types/types";
+
+interface Props {
+    title: string,
+    socialIconLinks: SocialIconLink[],
+    texts: Texts;
+}
+
+const FooterDesktopComponent = memo((props: Props) => {
+
+    const {
+        title,
+        socialIconLinks,
+        texts
+    } = props;
 
-const FooterDesktopComponent = memo(() => {
     return (
         <footer className={cls.Footer}>
             <Container>
-                <Title className={cls.title}/>
-                <SocialSection className={cls.socialSection} socialLinks={socialLinks} />
-                <Rights className={cls.rights}/>
+                <Title
+                    className={cls.title}
+                    title={title}
+                />
+                <SocialSection
+                    className={cls.socialSection}
+                    socialIconLinks={socialIconLinks}
+                />
+                <Rights
+                    className={cls.rights}
+                    texts={texts}
+                />
             </Container>
         </footer>
     );

diff --git a/frontend-next-migration/src/widgets/Footer/ui/FooterMain/FooterMain.tsx b/frontend-next-migration/src/widgets/Footer/ui/FooterMain/FooterMain.tsx
@@ -1,12 +1,26 @@
+import {useParams} from "next/navigation";
 import FooterDesktop from "../FooterDesktop/FooterDesktop";
-import useIsMobileSize from "@/shared/lib/hooks/useIsMobileSize";
+import {socialIconLinks} from "../../model/data/socialSectionMenu";
+import {useClientTranslation} from "@/shared/i18n";
 
 
 export const Footer = ()  => {
 
-    const {isMobileSize} = useIsMobileSize()
+    const params = useParams();
+    const lng = params.lng as string;
+    const {t} = useClientTranslation(lng, "footer");
 
     return (
-            <FooterDesktop/>
+            <FooterDesktop
+                title={
+                    t("FooterTitle")
+                }
+                texts={
+                    {
+
+                    }
+                }
+                socialIconLinks={socialIconLinks}
+            />
     )
 }
diff --git a/frontend-next-migration/src/widgets/Footer/ui/Rights/Rights.tsx b/frontend-next-migration/src/widgets/Footer/ui/Rights/Rights.tsx
@@ -11,24 +11,41 @@ import {
   Privacy,
 } from '../../model/data/text';
 
+
 interface RightsProps {
   className?: string;
+  texts: {
+      cookies: string;
+      privacy: string;
+      consent: string;
+      currentYear: number;
+  }
 }
 
-export const Rights = memo(({ className = '' }: RightsProps) => {
+
+
+export const Rights = memo((props : RightsProps) => {
+
+  const {
+      className = '',
+      texts
+  } = props;
+
+  const { cookies, consent, currentYear, privacy } = texts;
+
   const handleResetCookies = useResetCookies();
 
   return (
     <p className={classNames(cls.Rights, {}, [className])}>
-      <span className={cls.copySymbol}>&copy;</span> {CurrentYear} {CompanyName}{' '}
+      <span className={cls.copySymbol}>&copy;</span> {currentYear} {CompanyName}{' '}
       <AppLink className={cls.cookies} to={AppRoutesLinks.COOKIES}>
-        {Cookies}
+        {cookies}
       </AppLink>{' '}
       <AppLink className={cls.privacy} to={AppRoutesLinks.PRIVACY}>
-        {Privacy}
+        {privacy}
       </AppLink>
       <span onClick={handleResetCookies} className={cls.resetCookies}>
-        Consent
+        {consent}
       </span>
     </p>
   );

diff --git a/frontend-next-migration/src/widgets/Footer/ui/SocialSection/SocialSection.stories.tsx b/frontend-next-migration/src/widgets/Footer/ui/SocialSection/SocialSection.stories.tsx
@@ -1,13 +1,13 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { SocialSection } from './SocialSection';
-import {socialLinks} from "../../model/data/socialSectionMenu";
+import {socialIconLinks} from "../../model/data/socialSectionMenu";
 
 export default {
     title: 'widgets/Footer/SocialSection',
     args: {
         className: '',
-        socialLinks: socialLinks,
+        socialLinks: socialIconLinks,
     },
 } as ComponentMeta<typeof SocialSection>;
 

diff --git a/frontend-next-migration/src/widgets/Footer/ui/SocialSection/SocialSection.tsx b/frontend-next-migration/src/widgets/Footer/ui/SocialSection/SocialSection.tsx
@@ -2,27 +2,26 @@ import {memo} from "react";
 import {classNames} from "@/shared/lib/classNames/classNames";
 import {AppLink, AppLinkTheme} from "@/shared/ui/AppLink/AppLink";
 import cls from './SocialSection.module.scss'
-import {SocialLink} from "../../model/types/types";
+import {SocialIconLink} from "../../model/types/types";
 import Image from "next/image";
 
 
 interface SocialSectionProps{
     className?: string;
-    socialLinks: SocialLink[];
+    socialIconLinks: SocialIconLink[];
 }
 
-export const SocialSection = memo(({className='',socialLinks}: SocialSectionProps) => {
+export const SocialSection = memo(({className='',socialIconLinks}: SocialSectionProps) => {
     return (
         <div className={classNames(cls.SocialSection, {}, [className])}>
-            {socialLinks.map((socialLink) => (
+            {socialIconLinks.map((socialLink) => (
                 <AppLink
                     key={socialLink.link}
                     isExternal
                     theme={AppLinkTheme.PRIMARY}
                     to={socialLink.link}
                     className={classNames(cls.item)}
                 >
-                    {/*{socialLink.icon}*/}
                     <Image src={socialLink.icon} alt={socialLink.name}/>
                 </AppLink>
             ))}

diff --git a/frontend-next-migration/src/widgets/Footer/ui/Title/Title.tsx b/frontend-next-migration/src/widgets/Footer/ui/Title/Title.tsx
@@ -1,22 +1,25 @@
 import cls from './Title.module.scss'
 import {classNames} from "@/shared/lib/classNames/classNames";
 import {memo} from "react";
-import {useParams} from "next/navigation";
-import {useClientTranslation} from "@/shared/i18n";
 
-interface TitleProps{
+interface Props {
     className?: string;
+    title: string;
 }
 
-export const Title = memo(({className=''}:TitleProps)=>{
+export const Title = memo(( props: Props)=>{
+
+    const {
+        title,
+        className = ""
+    } = props;
+
 
-    const params = useParams();
-    const lng = params.lng as string;
-    const {t} = useClientTranslation(lng, "footer");
 
     return (
         <p className={classNames(cls.Title,{},[className])}>
-            {t("FooterTitle")}
+            {/*{t("FooterTitle")}*/}
+            {title}
         </p>
     )
 })