Skip to content

Commit 73ed89e

Browse files
gupta-ji6gupta-ji6
authored
Merge pull request #61 from scriptified/add-sections-null-check
Handle null check for every section
2 parents 4817937 + cbe387d commit 73ed89e

File tree

5 files changed

+152
-97
lines changed

5 files changed

+152
-97
lines changed

‎components/IssueItem.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const IssueItem = ({
1414
id?: string;
1515
}): JSX.Element => {
1616
const theme = useThemeState();
17+
1718
return (
1819
<div id={id} className="my-20">
1920
<div className="flex flex-row items-center">

‎interfaces/issue.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@ import Tool from './tool';
88
import Quiz from './quiz';
99

1010
export interface Issue {
11-
tipOfTheWeek: TipOfTheWeek;
11+
tipOfTheWeek: TipOfTheWeek | null;
1212
articles?: Article[] | null;
1313
tools?: Tool[] | null;
14-
devOfTheWeek: DevOfTheWeek;
14+
devOfTheWeek: DevOfTheWeek | null;
1515
talks?: Talk[] | null;
16-
gif: Gif;
16+
gif: Gif | null;
1717
meta: Meta;
18-
quiz: Quiz;
18+
quiz: Quiz | null;
1919
}

‎lib/issues.ts‎

Lines changed: 101 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -81,69 +81,108 @@ function getAssetURL(issueNumber: number, assetURL: string) {
8181
}
8282

8383
export function mapToIssue(issue: IssueAPIResponse): Issue {
84-
return {
85-
meta: {
86-
number: issue.id,
87-
title: issue.title,
88-
desc: issue.description,
89-
dateOfPublishing: issue.dateOfPublishing,
90-
imgURL: getOGImage(issue.title, issue.id, issue.dateOfPublishing),
91-
},
92-
tipOfTheWeek: {
93-
snippet: issue.tipOfTheWeek.codeSnippet,
94-
desc: issue.tipOfTheWeek.description,
95-
sourceName: issue.tipOfTheWeek.sourceName,
96-
sourceURL: issue.tipOfTheWeek.sourceURL,
97-
},
98-
articles: issue.articles.map(article => ({
99-
title: article.title,
100-
desc: article.description,
101-
url: article.url,
102-
tags: article.tags.map(tag => tag.name),
103-
author: oxfordComma(article.authors.map(author => author.Name)),
104-
})),
105-
talks: issue.talks.map(talk => ({
106-
title: talk.title,
107-
talkURL: talk.url,
108-
desc: talk.description,
109-
tags: talk.tags.map(tag => tag.name),
110-
})),
111-
tools: issue.tools.map(tool => ({
112-
title: tool.name,
113-
url: tool.url,
114-
logo: getAssetURL(issue.id, tool.logo),
115-
desc: tool.description,
116-
tags: tool.tags.map(tag => tag.name),
117-
author: oxfordComma(tool.authors.map(author => author.Name)),
118-
})),
119-
devOfTheWeek: {
120-
name: issue.devOfTheWeek.name,
121-
profileImg: getAssetURL(issue.id, issue.devOfTheWeek.profileImg),
122-
bio: issue.devOfTheWeek.bio,
123-
profileLink: {
124-
youtube: issue.devOfTheWeek.youtube,
125-
github: issue.devOfTheWeek.github,
126-
linkedin: issue.devOfTheWeek.linkedin,
127-
website: issue.devOfTheWeek.website,
128-
twitter: issue.devOfTheWeek.twitter,
129-
instagram: issue.devOfTheWeek.instagram,
130-
},
131-
},
132-
gif: {
133-
gifURL: getAssetURL(issue.id, issue.gif.gifURL),
134-
caption: issue.gif.caption,
135-
},
136-
quiz: {
137-
question: issue.quiz.question,
138-
answerId: issue.quiz.answerId,
139-
options: issue.quiz.Option.map(option => ({
140-
description: option.description,
141-
id: option.option_id,
142-
text: option.text,
143-
})),
144-
snippet: issue.quiz.CodeSnippet,
145-
},
84+
const meta = {
85+
number: issue.id,
86+
title: issue.title,
87+
desc: issue.description,
88+
dateOfPublishing: issue.dateOfPublishing,
89+
imgURL: getOGImage(issue.title, issue.id, issue.dateOfPublishing),
14690
};
91+
92+
const tipOfTheWeek =
93+
issue.tipOfTheWeek !== null
94+
? {
95+
snippet: issue.tipOfTheWeek.codeSnippet,
96+
desc: issue.tipOfTheWeek.description,
97+
sourceName: issue.tipOfTheWeek.sourceName,
98+
sourceURL: issue.tipOfTheWeek.sourceURL,
99+
}
100+
: null;
101+
102+
const articles =
103+
issue?.articles !== null
104+
? issue?.articles?.map(article => ({
105+
title: article.title,
106+
desc: article.description,
107+
url: article.url,
108+
tags: article.tags.map(tag => tag.name),
109+
author: oxfordComma(article.authors.map(author => author.Name)),
110+
}))
111+
: null;
112+
113+
const talks =
114+
issue.talks !== null
115+
? issue.talks.map(talk => ({
116+
title: talk.title,
117+
talkURL: talk.url,
118+
desc: talk.description,
119+
tags: talk.tags.map(tag => tag.name),
120+
}))
121+
: null;
122+
123+
const tools =
124+
issue.tools !== null
125+
? issue.tools.map(tool => ({
126+
title: tool.name,
127+
url: tool.url,
128+
logo: getAssetURL(issue.id, tool.logo),
129+
desc: tool.description,
130+
tags: tool.tags.map(tag => tag.name),
131+
author: oxfordComma(tool.authors.map(author => author.Name)),
132+
}))
133+
: null;
134+
135+
const devOfTheWeek =
136+
issue.devOfTheWeek !== null
137+
? {
138+
name: issue.devOfTheWeek.name,
139+
profileImg: getAssetURL(issue.id, issue.devOfTheWeek.profileImg),
140+
bio: issue.devOfTheWeek.bio,
141+
profileLink: {
142+
youtube: issue.devOfTheWeek.youtube,
143+
github: issue.devOfTheWeek.github,
144+
linkedin: issue.devOfTheWeek.linkedin,
145+
website: issue.devOfTheWeek.website,
146+
twitter: issue.devOfTheWeek.twitter,
147+
instagram: issue.devOfTheWeek.instagram,
148+
},
149+
}
150+
: null;
151+
152+
const gif =
153+
issue.gif !== null
154+
? {
155+
gifURL: getAssetURL(issue.id, issue.gif.gifURL),
156+
caption: issue.gif.caption,
157+
}
158+
: null;
159+
160+
const quiz =
161+
issue.quiz !== null
162+
? {
163+
question: issue.quiz.question,
164+
answerId: issue.quiz.answerId,
165+
options: issue.quiz.Option.map(option => ({
166+
description: option.description,
167+
id: option.option_id,
168+
text: option.text,
169+
})),
170+
snippet: issue.quiz.CodeSnippet,
171+
}
172+
: null;
173+
174+
const issueData = {
175+
meta,
176+
tipOfTheWeek,
177+
articles,
178+
talks,
179+
tools,
180+
devOfTheWeek,
181+
gif,
182+
quiz,
183+
};
184+
185+
return issueData;
147186
}
148187

149188
export function getAllIssuesMeta(issues: IssueAPIResponse[]) {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "scriptified",
3-
"version": "0.1.0",
3+
"version": "2.1",
44
"private": true,
55
"license": "(MIT OR Apache-2.0)",
66
"scripts": {

‎pages/issues/[id].tsx‎

Lines changed: 45 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -71,36 +71,50 @@ export default function IssueComponent({ issueData }: { issueData: Issue }): JSX
7171
</Text>
7272
<SocialShare url={`${siteConfig.url}${router.asPath}`} title={issueData.meta.title} />
7373
</div>
74-
<IssueItem id="tip" title="Tip of the day" icon={<TipIcon />}>
75-
<Text type="base" additionalStyles="py-4 relative z-10">
76-
<Markdown>{issueData.tipOfTheWeek.desc}</Markdown>
77-
</Text>
78-
<CodeSnippet snippet={issueData.tipOfTheWeek.snippet} />
79-
</IssueItem>
80-
<IssueItem id="articles" title="Articles" icon={<ArticlesIcon />}>
81-
{issueData.articles.map(article => (
82-
<ArticleItem article={article} key={article.url} />
83-
))}
84-
</IssueItem>
85-
<IssueItem id="tools" title="Tools" icon={<ToolsAndResourcesIcon />}>
86-
{issueData.tools.map(tool => (
87-
<ToolItem tool={tool} key={tool.url} />
88-
))}
89-
</IssueItem>
90-
<IssueItem id="dev" title="Dev Of The Week" icon={<DevOfTheWeekIcon />}>
91-
<DevOfTheWeekItem devOfTheWeek={issueData.devOfTheWeek} />
92-
</IssueItem>
93-
<IssueItem id="talk" title="Tech talks" icon={<TechTalksIcon />}>
94-
{issueData.talks.map(talk => (
95-
<TechTalk key={talk.talkURL} techTalk={talk} />
96-
))}
97-
</IssueItem>
98-
<IssueItem id="quiz" title="Quiz" icon={<QuizIcon />}>
99-
<Quiz quiz={issueData.quiz} />
100-
</IssueItem>
101-
<IssueItem id="gif" title="This Week in GIF" icon={<GifIcon />}>
102-
<GIFItem gif={issueData.gif} />
103-
</IssueItem>
74+
{issueData?.tipOfTheWeek !== null ? (
75+
<IssueItem id="tip" title="Tip of the day" icon={<TipIcon />}>
76+
<Text type="base" additionalStyles="py-4 relative z-10">
77+
<Markdown>{issueData.tipOfTheWeek.desc}</Markdown>
78+
</Text>
79+
<CodeSnippet snippet={issueData.tipOfTheWeek.snippet} />
80+
</IssueItem>
81+
) : null}
82+
{issueData?.articles !== null ? (
83+
<IssueItem id="articles" title="Articles" icon={<ArticlesIcon />}>
84+
{issueData.articles.map(article => (
85+
<ArticleItem article={article} key={article.url} />
86+
))}
87+
</IssueItem>
88+
) : null}
89+
{issueData?.tools !== null ? (
90+
<IssueItem id="tools" title="Tools" icon={<ToolsAndResourcesIcon />}>
91+
{issueData.tools.map(tool => (
92+
<ToolItem tool={tool} key={tool.url} />
93+
))}
94+
</IssueItem>
95+
) : null}
96+
{issueData?.devOfTheWeek !== null ? (
97+
<IssueItem id="dev" title="Dev Of The Week" icon={<DevOfTheWeekIcon />}>
98+
<DevOfTheWeekItem devOfTheWeek={issueData.devOfTheWeek} />
99+
</IssueItem>
100+
) : null}
101+
{issueData?.talks !== null ? (
102+
<IssueItem id="talk" title="Tech talks" icon={<TechTalksIcon />}>
103+
{issueData.talks.map(talk => (
104+
<TechTalk key={talk.talkURL} techTalk={talk} />
105+
))}
106+
</IssueItem>
107+
) : null}
108+
{issueData.quiz !== null ? (
109+
<IssueItem id="quiz" title="Quiz" icon={<QuizIcon />}>
110+
<Quiz quiz={issueData.quiz} />
111+
</IssueItem>
112+
) : null}
113+
{issueData.gif !== null ? (
114+
<IssueItem id="gif" title="This Week in GIF" icon={<GifIcon />}>
115+
<GIFItem gif={issueData.gif} />
116+
</IssueItem>
117+
) : null}
104118
<SubscribeCard />
105119
<BackToHome className="my-12 max-w-4xl mx-auto" />
106120
</section>
@@ -124,6 +138,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => {
124138
try {
125139
const data = await issueAPI.getIssue(id);
126140
const issueData = mapToIssue(data);
141+
127142
return {
128143
props: {
129144
issueData,

0 commit comments

Comments
 (0)