From e26d5d563b99671a39acad2c319db14b20762960 Mon Sep 17 00:00:00 2001 From: Daria Vdovichenko Date: Mon, 23 Oct 2023 00:54:59 +0200 Subject: [PATCH 1/7] add component RandomStoryList and new common data --- .../basecomponents/Story/RandomStoryList.tsx | 51 +++++++++++++++++++ .../basecomponents/Story/StoriesList.tsx | 2 +- pages/kids/stories/[story].tsx | 16 ++++++ public/locales/cs/common.json | 4 +- public/locales/pl/common.json | 4 +- public/locales/sk/common.json | 4 +- public/locales/uk/common.json | 4 +- 7 files changed, 80 insertions(+), 5 deletions(-) create mode 100644 components/basecomponents/Story/RandomStoryList.tsx diff --git a/components/basecomponents/Story/RandomStoryList.tsx b/components/basecomponents/Story/RandomStoryList.tsx new file mode 100644 index 00000000..0dcf3253 --- /dev/null +++ b/components/basecomponents/Story/RandomStoryList.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import Link from 'next/link'; +import Image from 'next/image'; +import stories from '../../../data/stories'; +import { useLanguage } from 'utils/useLanguageHook'; + +const maxAttempts = 2; +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const randomStories: any[] = []; +const storiesCount = stories.length; + +for (let i = 0; i < maxAttempts && randomStories.length < 3; i++) { + const randomIndex = Math.floor(Math.random() * storiesCount); + const randomStory = stories[randomIndex]; + if (!randomStories.includes(randomStory)) { + randomStories.push(randomStory); + } +} + +const RandomStoryList: React.FC = () => { + const { currentLanguage } = useLanguage(); + + return ( +
+ +
+ ); +}; + +export default RandomStoryList; diff --git a/components/basecomponents/Story/StoriesList.tsx b/components/basecomponents/Story/StoriesList.tsx index 99f9e00a..7dc8d4dc 100644 --- a/components/basecomponents/Story/StoriesList.tsx +++ b/components/basecomponents/Story/StoriesList.tsx @@ -37,7 +37,7 @@ const StoriesList = ({ stories }: StoriesListProps) => { priority={priority} /> -

+

{story.title[currentLanguage]}

diff --git a/pages/kids/stories/[story].tsx b/pages/kids/stories/[story].tsx index 636ad33b..f0d152ac 100644 --- a/pages/kids/stories/[story].tsx +++ b/pages/kids/stories/[story].tsx @@ -12,10 +12,13 @@ import { Story } from '@types'; import { getCountryVariant, Language } from '../../../utils/locales'; import Custom404 from '../../404'; import { StoryPhrase, getStoryData } from '../../../components/basecomponents/Story/storyStore'; +import { H2 } from 'components/Typography'; +import RandomStoryCards from 'components/basecomponents/Story/RandomStoryList'; interface StoriesProps { story: Story | undefined; phrases: StoryPhrase[]; + stories: Story[]; } interface UrlParams extends ParsedUrlQuery { @@ -68,6 +71,19 @@ const StoriesContainer = ({ story, phrases }: StoriesProps): ReactNode => {
+ {/* other story */} +
+
+

{t('kids_page.otherStories_title')}

+ + {t('kids_page.otherStories_btn_title')} + +
+ +
) : ( diff --git a/public/locales/cs/common.json b/public/locales/cs/common.json index ee8a709a..c1378ea5 100644 --- a/public/locales/cs/common.json +++ b/public/locales/cs/common.json @@ -78,7 +78,9 @@ "ukrainianStories": "Ukrajinské lidové pohádky", "stories": "Pohádky", "homepage": "Hlavní stránka", - "downloadStory": "Pohádku si můžete <0>stáhnout jako PDF." + "downloadStory": "Pohádku si můžete <0>stáhnout jako PDF.", + "otherStories_title": "Další pohádky", + "otherStories_btn_title": "Zobrazit všechny" }, "about_page": { "title": "Movapp.cz je projekt, který vznikl v rámci iniciativy Stojíme za Ukrajinou v komunitě expertních dobrovolníků Česko.Digital.", diff --git a/public/locales/pl/common.json b/public/locales/pl/common.json index 8d1fc520..a749eb91 100644 --- a/public/locales/pl/common.json +++ b/public/locales/pl/common.json @@ -66,7 +66,9 @@ }, "kids_page": { "downloadPDF": "Pobierz w PDF", - "downloadStory": "" + "downloadStory": "", + "otherStories_title": "Więcej bajek", + "otherStories_btn_title": "Pokaż wszystko" }, "about_page": { "title": "Movapp.eu to projekt, który powstał w ramach inicjatywy Stojíme za Ukrajinou w społeczności ekspertów wolontariuszy Česko.Digital.", diff --git a/public/locales/sk/common.json b/public/locales/sk/common.json index bc7c5f45..14dd70ed 100644 --- a/public/locales/sk/common.json +++ b/public/locales/sk/common.json @@ -79,7 +79,9 @@ "ukrainianStories": "Ukrajinské ľudové rozprávky", "stories": "Rozprávky", "homepage": "Domovská stránka", - "downloadStory": "Rozprávku si môžete <0>stiahnuť aj ako PDF súbor." + "downloadStory": "Rozprávku si môžete <0>stiahnuť aj ako PDF súbor.", + "otherStories_title": "Ďalšie rozprávky", + "otherStories_btn_title": "Zobraziť všetky" }, "about_page": { "title": "Movapp.cz je projekt, ktorý vznikol v rámci iniciatívy Stojíme za Ukrajinou v komunite expertných dobrovoľníkov Česko.Digital.", diff --git a/public/locales/uk/common.json b/public/locales/uk/common.json index ce0749ea..c609d9b5 100644 --- a/public/locales/uk/common.json +++ b/public/locales/uk/common.json @@ -97,7 +97,9 @@ "ukrainianStories": "Українські народні казки", "stories": "Казки", "homepage": "Домашня сторінка", - "downloadStory": "Можете завантажити казку <0>у форматі PDF." + "downloadStory": "Можете завантажити казку <0>у форматі PDF.", + "otherStories_title": "Більше казок", + "otherStories_btn_title": "Показати усі" }, "about_page": { "title": "Movapp.eu – це проект, який створено в рамках ініціативи Stojime za Ukrajinou в спільноті експертів-волонтерів Cesko.Digital.", From ff8fb25c1d08ece87b30b4c6c9cddc80209db84b Mon Sep 17 00:00:00 2001 From: Daria Vdovichenko Date: Mon, 23 Oct 2023 07:31:24 +0200 Subject: [PATCH 2/7] change maxAttempts --- components/basecomponents/Story/RandomStoryList.tsx | 2 +- pages/kids/stories/[story].tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/basecomponents/Story/RandomStoryList.tsx b/components/basecomponents/Story/RandomStoryList.tsx index 0dcf3253..cffa1873 100644 --- a/components/basecomponents/Story/RandomStoryList.tsx +++ b/components/basecomponents/Story/RandomStoryList.tsx @@ -4,7 +4,7 @@ import Image from 'next/image'; import stories from '../../../data/stories'; import { useLanguage } from 'utils/useLanguageHook'; -const maxAttempts = 2; +const maxAttempts = 3; // eslint-disable-next-line @typescript-eslint/no-explicit-any const randomStories: any[] = []; const storiesCount = stories.length; diff --git a/pages/kids/stories/[story].tsx b/pages/kids/stories/[story].tsx index f0d152ac..c9cdecad 100644 --- a/pages/kids/stories/[story].tsx +++ b/pages/kids/stories/[story].tsx @@ -72,7 +72,7 @@ const StoriesContainer = ({ story, phrases }: StoriesProps): ReactNode => { {/* other story */} -
+

{t('kids_page.otherStories_title')}

Date: Fri, 27 Oct 2023 21:27:15 +0200 Subject: [PATCH 3/7] add useEffect in RandomStory --- .../SLiderFeedbacksSm.tsx | 6 ++-- .../FeedbackAboutProject/SliderFeedbacks.tsx | 4 +-- .../basecomponents/Story/RandomStoryList.tsx | 30 ++++++++++++------- 3 files changed, 24 insertions(+), 16 deletions(-) diff --git a/components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx b/components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx index 9007125d..68b13ffe 100644 --- a/components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx +++ b/components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx @@ -61,10 +61,10 @@ export const SliderFeedbacksSm = (): JSX.Element => { key={feedbacks[currentSlide].id} className="mb-3 px-6 pt-6 pb-8 rounded-[16px] shadow-md bg-white max-w-[350px] hover:-translate-y-1 font-normal" > - avatar -

{feedbacks[currentSlide].title}

+ {/* avatar */} + {/*

{feedbacks[currentSlide].title}

*/}

{feedbacks[currentSlide].author}

-

{feedbacks[currentSlide].text}...

+ {/*

{feedbacks[currentSlide].text}...

*/} diff --git a/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx b/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx index a148df03..88206ce4 100644 --- a/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx +++ b/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx @@ -66,9 +66,9 @@ export const SliderFeedbacks = (): JSX.Element => { className="pt-6 pb-8 mb-3 px-6 rounded-[16px] shadow-md xl:max-w-[480px] bg-white sm:max-w-[350px] hover:-translate-y-1 font-normal" > avatar -

{feedback.title}

+ {/*

{feedback.title}

*/}

{feedback.author}

-

{feedback.text}...

+ {/*

{feedback.text}...

*/} diff --git a/components/basecomponents/Story/RandomStoryList.tsx b/components/basecomponents/Story/RandomStoryList.tsx index cffa1873..f70b4679 100644 --- a/components/basecomponents/Story/RandomStoryList.tsx +++ b/components/basecomponents/Story/RandomStoryList.tsx @@ -1,4 +1,5 @@ -import React from 'react'; +'use client'; +import { useState, useEffect } from 'react'; import Link from 'next/link'; import Image from 'next/image'; import stories from '../../../data/stories'; @@ -20,21 +21,28 @@ for (let i = 0; i < maxAttempts && randomStories.length < 3; i++) { const RandomStoryList: React.FC = () => { const { currentLanguage } = useLanguage(); + const [randomStoriesArray, setRandomStoriesArray] = useState([]); + + useEffect(() => { + setRandomStoriesArray(randomStories); + }, [randomStoriesArray]); + return ( -
-
    - {randomStories.map((story) => { +
    +
      + {randomStoriesArray.map((story) => { return (
    • + {story.title[currentLanguage]} - {story.title[currentLanguage]}

      {story.title[currentLanguage]}

      From 283d8d60098465aacdbe73bac70b504f8039912a Mon Sep 17 00:00:00 2001 From: Daria Vdovichenko Date: Fri, 27 Oct 2023 21:50:55 +0200 Subject: [PATCH 4/7] correct styles markup stories --- .../basecomponents/Story/RandomStoryList.tsx | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/components/basecomponents/Story/RandomStoryList.tsx b/components/basecomponents/Story/RandomStoryList.tsx index f70b4679..513b4fc3 100644 --- a/components/basecomponents/Story/RandomStoryList.tsx +++ b/components/basecomponents/Story/RandomStoryList.tsx @@ -21,6 +21,7 @@ for (let i = 0; i < maxAttempts && randomStories.length < 3; i++) { const RandomStoryList: React.FC = () => { const { currentLanguage } = useLanguage(); + // eslint-disable-next-line @typescript-eslint/no-explicit-any const [randomStoriesArray, setRandomStoriesArray] = useState([]); useEffect(() => { @@ -28,26 +29,24 @@ const RandomStoryList: React.FC = () => { }, [randomStoriesArray]); return ( -
      -
        +
        +
          {randomStoriesArray.map((story) => { return ( -
        • -
          - {story.title[currentLanguage]} - -

          - {story.title[currentLanguage]} -

          - -
          +
        • + {story.title[currentLanguage]} + +

          + {story.title[currentLanguage]} +

          +
          • ); })} From 75b30efab05e8474eec74716524b30c305045a94 Mon Sep 17 00:00:00 2001 From: Daria Vdovichenko Date: Fri, 27 Oct 2023 23:51:44 +0200 Subject: [PATCH 5/7] add useEffect Feedback --- .../SLiderFeedbacksSm.tsx | 119 ++++++++++++------ .../FeedbackAboutProject/SliderFeedbacks.tsx | 3 +- 2 files changed, 84 insertions(+), 38 deletions(-) diff --git a/components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx b/components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx index 68b13ffe..2143d3c2 100644 --- a/components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx +++ b/components/basecomponents/FeedbackAboutProject/SLiderFeedbacksSm.tsx @@ -1,40 +1,58 @@ +'use client'; import avatar from '../../../public/icons/about/default_avatar.png'; import studio from '../../../public/icons/about/Studio-N.png'; import Image from 'next/image'; -import { useState } from 'react'; +import { useState, useEffect } from 'react'; import { BsChevronLeft, BsChevronRight } from 'react-icons/bs'; import { Modal } from 'components/basecomponents/Modal'; + import { useTranslation } from 'react-i18next'; +type Feedback = { + id: number; + avatar: string; + author: string; + title: string; + text: string; +}; +// type I18nType = (key: string) => string; + export const SliderFeedbacksSm = (): JSX.Element => { + const { t } = useTranslation(); const [currentSlide, setCurrentSlide] = useState(0); const [isModalOpen, setIsModalOpen] = useState(false); const [activeFeedbackIndex, setActiveFeedbackIndex] = useState(null); - const { t } = useTranslation(); - const feedbacks = [ - { - id: 1, - avatar: avatar, - author: 'M.Poláček', - title: t('feedbacks-section.id-1_title'), - text: t('feedbacks-section.id-1_text'), - }, - { - id: 2, - avatar: studio, - author: 'Vít Svoboda v podcastu Studio N', - title: t('feedbacks-section.id-2_title'), - text: t('feedbacks-section.id-2_text'), - }, - { - id: 3, - avatar: avatar, - author: 'Salome Engibaryan', - title: t('feedbacks-section.id-3_title'), - text: t('feedbacks-section.id-3_text'), - }, - ]; + const [feedbacks, setFeedbacks] = useState([]); + const [loading, setLoading] = useState(true); + useEffect(() => { + const feedback = [ + { + id: 1, + avatar: avatar, + author: 'M.Poláček', + title: t('feedbacks-section.id-1_title'), + text: t('feedbacks-section.id-1_text'), + }, + { + id: 2, + avatar: studio, + author: 'Vít Svoboda v podcastu Studio N', + title: t('feedbacks-section.id-2_title'), + text: t('feedbacks-section.id-2_text'), + }, + { + id: 3, + avatar: avatar, + author: 'Salome Engibaryan', + title: t('feedbacks-section.id-3_title'), + text: t('feedbacks-section.id-3_text'), + }, + ]; + + setFeedbacks(feedback); + setLoading(false); + }, [t]); const prevSlide = () => { const isFirstSlide = currentSlide === 0; @@ -54,21 +72,48 @@ export const SliderFeedbacksSm = (): JSX.Element => { setIsModalOpen(true); }; + // const a = [ + // { + // id: 1, + // avatar: avatar, + // author: 'M.Poláček', + // title: t('feedbacks-section.id-1_title'), + // text: t('feedbacks-section.id-1_text'), + // }, + // { + // id: 2, + // avatar: studio, + // author: 'Vít Svoboda v podcastu Studio N', + // title: t('feedbacks-section.id-2_title'), + // text: t('feedbacks-section.id-2_text'), + // }, + // { + // id: 3, + // avatar: avatar, + // author: 'Salome Engibaryan', + // title: t('feedbacks-section.id-3_title'), + // text: t('feedbacks-section.id-3_text'), + // },] + // console.log(feedbacks); return (
          -
          - {/* avatar */} - {/*

          {feedbacks[currentSlide].title}

          */} -

          {feedbacks[currentSlide].author}

          - {/*

          {feedbacks[currentSlide].text}...

          */} - -
          + {loading ? ( +

          Загрузка данных...

          + ) : ( +
          + avatar +

          {feedbacks[currentSlide].title}

          +

          {feedbacks[currentSlide].author}

          +

          {feedbacks[currentSlide].text}...

          + +
          + )}
          { diff --git a/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx b/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx index 88206ce4..de26afeb 100644 --- a/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx +++ b/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx @@ -1,3 +1,4 @@ +'use client'; import avatar from '../../../public/icons/about/default_avatar.png'; import studio from '../../../public/icons/about/Studio-N.png'; import Image from 'next/image'; @@ -66,7 +67,7 @@ export const SliderFeedbacks = (): JSX.Element => { className="pt-6 pb-8 mb-3 px-6 rounded-[16px] shadow-md xl:max-w-[480px] bg-white sm:max-w-[350px] hover:-translate-y-1 font-normal" > avatar - {/*

          {feedback.title}

          */} +

          {feedback.title}

          {feedback.author}

          {/*

          {feedback.text}...

          */} From 78cf46958c7dd28d6670a8376e1e0c1c98c6b402 Mon Sep 17 00:00:00 2001 From: Daria Vdovichenko Date: Sat, 28 Oct 2023 11:41:46 +0200 Subject: [PATCH 7/7] Update SliderFeedbacks.tsx --- .../basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx b/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx index b66a114a..45dbc0df 100644 --- a/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx +++ b/components/basecomponents/FeedbackAboutProject/SliderFeedbacks.tsx @@ -49,7 +49,6 @@ export const SliderFeedbacks = (): JSX.Element => { ]; setFeedbacks(feedback); - }, [t]); const prevSlide = () => {