add conditions for rendering

cesko-digital · Nov 28, 2023 · 7924c2b · 7924c2b
1 parent d1ba199
commit 7924c2b
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 25 deletions.
diff --git a/components/basecomponents/Story/RandomStoryList.tsx b/components/basecomponents/Story/RandomStoryList.tsx
@@ -6,40 +6,47 @@ import stories from '../../../data/stories';
 import { useLanguage } from 'utils/useLanguageHook';
 import { useRouter } from 'next/router';
 
-const maxAttempts = 3;
-// 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 = () => {
+type RandomStoryListProps = {
+  currentStorySlug: string;
+};
+
+const RandomStoryList: React.FC<RandomStoryListProps> = ({ currentStorySlug }) => {
   const { currentLanguage } = useLanguage();
   const router = useRouter();
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const [randomStoriesArray, setRandomStoriesArray] = useState<any[]>([]);
 
   useEffect(() => {
-    setRandomStoriesArray(randomStories);
-  }, [randomStoriesArray]);
+    const filteredStories = stories.filter((story) => story.title[currentLanguage]).filter((story) => story.slug !== currentStorySlug);
+
+    const getRandomStories = () => {
+      const maxAttempts = 3;
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const randomStoriesArray: any[] = [];
+      const storiesCount = filteredStories.length;
+
+      for (let i = 0; i < maxAttempts && randomStoriesArray.length < 3; i++) {
+        const randomIndex = Math.floor(Math.random() * storiesCount);
+        const randomStory = filteredStories[randomIndex];
+        if (!randomStoriesArray.includes(randomStory)) {
+          randomStoriesArray.push(randomStory);
+        }
+      }
+
+      setRandomStoriesArray(randomStoriesArray);
+    };
 
-  const handleLinkClick = () => {
-    router.reload(); // Перезагрузить страницу
-  };
+    getRandomStories();
+  }, [currentLanguage, router.query.slug, currentStorySlug]);
 
   return (
     <div className="w-full mx-auto py-10">
       <ul className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 md:gap-6">
         {randomStoriesArray.map((story) => {
           return (
-            <li key={story.title[currentLanguage]} className="bg-white shadow-m rounded-[32px] text-center">
-              <Link href={`/kids/stories/${story.slug}`} onClick={handleLinkClick}>
+            <li key={story.slug} className="bg-white shadow-m rounded-[32px] text-center">
+              <Link href={`/kids/stories/${story.slug}`}>
                 <Image
                   className="rounded-t-[32px] w-full"
                   src={`/kids/${story.slug}.jpg`}

diff --git a/data/stories.ts b/data/stories.ts
@@ -1,7 +1,7 @@
 // If you add new story here, do not forget to add slug also to storyStore.ts and to exportPdfs.ts
 const stories = [
   {
-    title: { cs: 'Žabí princ', uk: 'Королевич-жабеня' },
+    title: { cs: 'Žabí princ', uk: 'Королевич-жабеня', pl: '' },
     slug: 'zabi-princ',
     duration: '4 min',
     country: 'CZ',

diff --git a/pages/kids/stories/[story].tsx b/pages/kids/stories/[story].tsx
@@ -13,8 +13,9 @@ 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';
-
+import RandomStoryList from 'components/basecomponents/Story/RandomStoryList';
+import { useRouter } from 'next/router';
+// import { useParams } from 'react-router-dom';
 interface StoriesProps {
   story: Story | undefined;
   phrases: StoryPhrase[];
@@ -28,6 +29,11 @@ interface UrlParams extends ParsedUrlQuery {
 const StoriesContainer = ({ story, phrases }: StoriesProps): ReactNode => {
   const { currentLanguage, otherLanguage } = useLanguage();
   const { t } = useTranslation();
+
+  const router = useRouter();
+
+  const currentStorySlug = router.query.story as string;
+
   if (!story) {
     return 'Story not found';
   }
@@ -81,7 +87,7 @@ const StoriesContainer = ({ story, phrases }: StoriesProps): ReactNode => {
                 {t('kids_page.otherStories_btn_title')}
               </Link>
             </div>
-            <RandomStoryCards />
+            <RandomStoryList currentStorySlug={currentStorySlug} />
           </div>
         </>
       ) : (