Merge pull request #61 from scriptified/add-sections-null-check

Handle null check for every section
scriptified · Aug 6, 2021 · 73ed89e · 73ed89e
2 parents 4817937 + cbe387d
commit 73ed89e
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 97 deletions.
diff --git a/components/IssueItem.tsx b/components/IssueItem.tsx
@@ -14,6 +14,7 @@ const IssueItem = ({
   id?: string;
 }): JSX.Element => {
   const theme = useThemeState();
+
   return (
     <div id={id} className="my-20">
       <div className="flex flex-row items-center">

diff --git a/interfaces/issue.ts b/interfaces/issue.ts
@@ -8,12 +8,12 @@ import Tool from './tool';
 import Quiz from './quiz';
 
 export interface Issue {
-  tipOfTheWeek: TipOfTheWeek;
+  tipOfTheWeek: TipOfTheWeek | null;
   articles?: Article[] | null;
   tools?: Tool[] | null;
-  devOfTheWeek: DevOfTheWeek;
+  devOfTheWeek: DevOfTheWeek | null;
   talks?: Talk[] | null;
-  gif: Gif;
+  gif: Gif | null;
   meta: Meta;
-  quiz: Quiz;
+  quiz: Quiz | null;
 }
diff --git a/lib/issues.ts b/lib/issues.ts
@@ -81,69 +81,108 @@ function getAssetURL(issueNumber: number, assetURL: string) {
 }
 
 export function mapToIssue(issue: IssueAPIResponse): Issue {
-  return {
-    meta: {
-      number: issue.id,
-      title: issue.title,
-      desc: issue.description,
-      dateOfPublishing: issue.dateOfPublishing,
-      imgURL: getOGImage(issue.title, issue.id, issue.dateOfPublishing),
-    },
-    tipOfTheWeek: {
-      snippet: issue.tipOfTheWeek.codeSnippet,
-      desc: issue.tipOfTheWeek.description,
-      sourceName: issue.tipOfTheWeek.sourceName,
-      sourceURL: issue.tipOfTheWeek.sourceURL,
-    },
-    articles: issue.articles.map(article => ({
-      title: article.title,
-      desc: article.description,
-      url: article.url,
-      tags: article.tags.map(tag => tag.name),
-      author: oxfordComma(article.authors.map(author => author.Name)),
-    })),
-    talks: issue.talks.map(talk => ({
-      title: talk.title,
-      talkURL: talk.url,
-      desc: talk.description,
-      tags: talk.tags.map(tag => tag.name),
-    })),
-    tools: issue.tools.map(tool => ({
-      title: tool.name,
-      url: tool.url,
-      logo: getAssetURL(issue.id, tool.logo),
-      desc: tool.description,
-      tags: tool.tags.map(tag => tag.name),
-      author: oxfordComma(tool.authors.map(author => author.Name)),
-    })),
-    devOfTheWeek: {
-      name: issue.devOfTheWeek.name,
-      profileImg: getAssetURL(issue.id, issue.devOfTheWeek.profileImg),
-      bio: issue.devOfTheWeek.bio,
-      profileLink: {
-        youtube: issue.devOfTheWeek.youtube,
-        github: issue.devOfTheWeek.github,
-        linkedin: issue.devOfTheWeek.linkedin,
-        website: issue.devOfTheWeek.website,
-        twitter: issue.devOfTheWeek.twitter,
-        instagram: issue.devOfTheWeek.instagram,
-      },
-    },
-    gif: {
-      gifURL: getAssetURL(issue.id, issue.gif.gifURL),
-      caption: issue.gif.caption,
-    },
-    quiz: {
-      question: issue.quiz.question,
-      answerId: issue.quiz.answerId,
-      options: issue.quiz.Option.map(option => ({
-        description: option.description,
-        id: option.option_id,
-        text: option.text,
-      })),
-      snippet: issue.quiz.CodeSnippet,
-    },
+  const meta = {
+    number: issue.id,
+    title: issue.title,
+    desc: issue.description,
+    dateOfPublishing: issue.dateOfPublishing,
+    imgURL: getOGImage(issue.title, issue.id, issue.dateOfPublishing),
   };
+
+  const tipOfTheWeek =
+    issue.tipOfTheWeek !== null
+      ? {
+          snippet: issue.tipOfTheWeek.codeSnippet,
+          desc: issue.tipOfTheWeek.description,
+          sourceName: issue.tipOfTheWeek.sourceName,
+          sourceURL: issue.tipOfTheWeek.sourceURL,
+        }
+      : null;
+
+  const articles =
+    issue?.articles !== null
+      ? issue?.articles?.map(article => ({
+          title: article.title,
+          desc: article.description,
+          url: article.url,
+          tags: article.tags.map(tag => tag.name),
+          author: oxfordComma(article.authors.map(author => author.Name)),
+        }))
+      : null;
+
+  const talks =
+    issue.talks !== null
+      ? issue.talks.map(talk => ({
+          title: talk.title,
+          talkURL: talk.url,
+          desc: talk.description,
+          tags: talk.tags.map(tag => tag.name),
+        }))
+      : null;
+
+  const tools =
+    issue.tools !== null
+      ? issue.tools.map(tool => ({
+          title: tool.name,
+          url: tool.url,
+          logo: getAssetURL(issue.id, tool.logo),
+          desc: tool.description,
+          tags: tool.tags.map(tag => tag.name),
+          author: oxfordComma(tool.authors.map(author => author.Name)),
+        }))
+      : null;
+
+  const devOfTheWeek =
+    issue.devOfTheWeek !== null
+      ? {
+          name: issue.devOfTheWeek.name,
+          profileImg: getAssetURL(issue.id, issue.devOfTheWeek.profileImg),
+          bio: issue.devOfTheWeek.bio,
+          profileLink: {
+            youtube: issue.devOfTheWeek.youtube,
+            github: issue.devOfTheWeek.github,
+            linkedin: issue.devOfTheWeek.linkedin,
+            website: issue.devOfTheWeek.website,
+            twitter: issue.devOfTheWeek.twitter,
+            instagram: issue.devOfTheWeek.instagram,
+          },
+        }
+      : null;
+
+  const gif =
+    issue.gif !== null
+      ? {
+          gifURL: getAssetURL(issue.id, issue.gif.gifURL),
+          caption: issue.gif.caption,
+        }
+      : null;
+
+  const quiz =
+    issue.quiz !== null
+      ? {
+          question: issue.quiz.question,
+          answerId: issue.quiz.answerId,
+          options: issue.quiz.Option.map(option => ({
+            description: option.description,
+            id: option.option_id,
+            text: option.text,
+          })),
+          snippet: issue.quiz.CodeSnippet,
+        }
+      : null;
+
+  const issueData = {
+    meta,
+    tipOfTheWeek,
+    articles,
+    talks,
+    tools,
+    devOfTheWeek,
+    gif,
+    quiz,
+  };
+
+  return issueData;
 }
 
 export function getAllIssuesMeta(issues: IssueAPIResponse[]) {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "scriptified",
-  "version": "0.1.0",
+  "version": "2.1",
   "private": true,
   "license": "(MIT OR Apache-2.0)",
   "scripts": {

diff --git a/pages/issues/[id].tsx b/pages/issues/[id].tsx
@@ -71,36 +71,50 @@ export default function IssueComponent({ issueData }: { issueData: Issue }): JSX
           </Text>
           <SocialShare url={`${siteConfig.url}${router.asPath}`} title={issueData.meta.title} />
         </div>
-        <IssueItem id="tip" title="Tip of the day" icon={<TipIcon />}>
-          <Text type="base" additionalStyles="py-4 relative z-10">
-            <Markdown>{issueData.tipOfTheWeek.desc}</Markdown>
-          </Text>
-          <CodeSnippet snippet={issueData.tipOfTheWeek.snippet} />
-        </IssueItem>
-        <IssueItem id="articles" title="Articles" icon={<ArticlesIcon />}>
-          {issueData.articles.map(article => (
-            <ArticleItem article={article} key={article.url} />
-          ))}
-        </IssueItem>
-        <IssueItem id="tools" title="Tools" icon={<ToolsAndResourcesIcon />}>
-          {issueData.tools.map(tool => (
-            <ToolItem tool={tool} key={tool.url} />
-          ))}
-        </IssueItem>
-        <IssueItem id="dev" title="Dev Of The Week" icon={<DevOfTheWeekIcon />}>
-          <DevOfTheWeekItem devOfTheWeek={issueData.devOfTheWeek} />
-        </IssueItem>
-        <IssueItem id="talk" title="Tech talks" icon={<TechTalksIcon />}>
-          {issueData.talks.map(talk => (
-            <TechTalk key={talk.talkURL} techTalk={talk} />
-          ))}
-        </IssueItem>
-        <IssueItem id="quiz" title="Quiz" icon={<QuizIcon />}>
-          <Quiz quiz={issueData.quiz} />
-        </IssueItem>
-        <IssueItem id="gif" title="This Week in GIF" icon={<GifIcon />}>
-          <GIFItem gif={issueData.gif} />
-        </IssueItem>
+        {issueData?.tipOfTheWeek !== null ? (
+          <IssueItem id="tip" title="Tip of the day" icon={<TipIcon />}>
+            <Text type="base" additionalStyles="py-4 relative z-10">
+              <Markdown>{issueData.tipOfTheWeek.desc}</Markdown>
+            </Text>
+            <CodeSnippet snippet={issueData.tipOfTheWeek.snippet} />
+          </IssueItem>
+        ) : null}
+        {issueData?.articles !== null ? (
+          <IssueItem id="articles" title="Articles" icon={<ArticlesIcon />}>
+            {issueData.articles.map(article => (
+              <ArticleItem article={article} key={article.url} />
+            ))}
+          </IssueItem>
+        ) : null}
+        {issueData?.tools !== null ? (
+          <IssueItem id="tools" title="Tools" icon={<ToolsAndResourcesIcon />}>
+            {issueData.tools.map(tool => (
+              <ToolItem tool={tool} key={tool.url} />
+            ))}
+          </IssueItem>
+        ) : null}
+        {issueData?.devOfTheWeek !== null ? (
+          <IssueItem id="dev" title="Dev Of The Week" icon={<DevOfTheWeekIcon />}>
+            <DevOfTheWeekItem devOfTheWeek={issueData.devOfTheWeek} />
+          </IssueItem>
+        ) : null}
+        {issueData?.talks !== null ? (
+          <IssueItem id="talk" title="Tech talks" icon={<TechTalksIcon />}>
+            {issueData.talks.map(talk => (
+              <TechTalk key={talk.talkURL} techTalk={talk} />
+            ))}
+          </IssueItem>
+        ) : null}
+        {issueData.quiz !== null ? (
+          <IssueItem id="quiz" title="Quiz" icon={<QuizIcon />}>
+            <Quiz quiz={issueData.quiz} />
+          </IssueItem>
+        ) : null}
+        {issueData.gif !== null ? (
+          <IssueItem id="gif" title="This Week in GIF" icon={<GifIcon />}>
+            <GIFItem gif={issueData.gif} />
+          </IssueItem>
+        ) : null}
         <SubscribeCard />
         <BackToHome className="my-12 max-w-4xl mx-auto" />
       </section>
@@ -124,6 +138,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
   try {
     const data = await issueAPI.getIssue(id);
     const issueData = mapToIssue(data);
+
     return {
       props: {
         issueData,