feat: add resources recommended feature

wtLau · Nov 10, 2022 · 1064cda · 1064cda
1 parent 4a552c9
commit 1064cda
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 16 deletions.
diff --git a/data/resources.ts b/data/resources.ts
@@ -3,19 +3,32 @@ export type resourceType = {
   title: string
   url: string
   author: string | string[]
+  summary: string
   type: 'blog' | 'article' | 'book' | 'video' | 'tweet' | 'people'
   tags?:
     | 'front end development'
     | 'software development'
     | 'system designs'
     | 'productivity'
+    | 'software career'
   recommended?: boolean
 }
 
 export const resources: resourceType[] = [
+  {
+    id: 8,
+    title: 'Not Only Code',
+    summary: 'Tech. Career. Leadership.',
+    author: 'Gregory',
+    type: 'blog',
+    tags: 'software career',
+    url: 'https://www.notonlycode.org/',
+    recommended: true,
+  },
   {
     id: 7,
     title: 'Kent C. Dodds',
+    summary: 'One stop shop for everything you need to build JavaScript apps.',
     author: 'Kent C. Dodds',
     type: 'blog',
     tags: 'front end development',
@@ -25,24 +38,25 @@ export const resources: resourceType[] = [
   {
     id: 6,
     title: 'Lee Robinson – Developer, writer, creator.',
+    summary: '',
     author: 'Lee Robinson',
     type: 'blog',
     tags: 'front end development',
     url: 'https://leerob.io/',
-    recommended: true,
   },
   {
     id: 5,
     title: 'Overreacted — A blog by Dan Abramov',
+    summary: '',
     author: 'Dan Abramov',
     type: 'blog',
     tags: 'front end development',
     url: 'https://overreacted.io/',
-    recommended: true,
   },
   {
     id: 4,
     title: "Don't Call Yourself A Programmer, And Other Career Advice",
+    summary: '',
     author: 'Patrick McKenzie',
     type: 'article',
     url: 'https://www.kalzumeus.com/2011/10/28/dont-call-yourself-a-programmer/',
@@ -51,24 +65,26 @@ export const resources: resourceType[] = [
   {
     id: 3,
     title: 'How to apply SOLID principles in React applications',
+    summary: '',
     author: 'Tomas Gold',
     type: 'article',
     url: 'https://medium.com/@tomgold_48918/how-to-apply-solid-principles-in-react-applications-6c964091a982',
   },
   {
     id: 2,
     title: 'The Pragmatic Programmer',
-    author: ['David Thomas', 'Andrew Hunt'],
-    type: 'book',
-    url: 'https://pragprog.com',
+    summary: 'The #1 newsletter for engineering managers and senior engineers',
+    author: 'Gergely Orosz',
+    type: 'blog',
+    url: 'https://blog.pragmaticengineer.com/',
     recommended: true,
   },
   {
     id: 1,
     title: 'Eloquent JavaScript',
+    summary: '',
     author: 'Marijin Haverbeke',
     type: 'book',
     url: 'https://eloquentjavascript.net/Eloquent_JavaScript.pdf',
-    recommended: true,
   },
 ]
diff --git a/pages/resources.tsx b/pages/resources.tsx
@@ -1,24 +1,69 @@
-import { Grid } from '@mui/material'
-import React, { useState, useEffect } from 'react'
+import { Grid, Typography } from '@mui/material'
+import React from 'react'
 
 import PageLayout from '@components/layout/PageLayout'
-import { Link } from '@components/ui'
 import { resources, resourceType } from '@data/resources'
-import { skillsData, TSkills } from '@data/skillsData'
 import PostList from '@components/PostList'
 
 const Resources = () => {
+  const recomendList = resources.filter((list) => list.recommended === true)
+  const allList = resources.filter((list) => !list.recommended)
   return (
     <PageLayout
       title='Resources'
-      description='A little library of my knowledge collections.'
+      description='A little library of public knowledge.'
     >
-      <Grid item container direction='column'>
-        {resources.map((resource: resourceType) => (
-          <Grid item key={resource.title}>
-            <PostList title={resource.title} summary='' href={resource.url} />
+      <Grid container spacing={4}>
+        <Grid item container direction='column'>
+          <Grid item>
+            <Typography variant='h2' gutterBottom>
+              Recommended
+            </Typography>
           </Grid>
-        ))}
+
+          {!recomendList.length && (
+            <Grid item>
+              <Typography variant='body1'>
+                No recommended found. Please let me know if you are interested
+                to learn more about it.
+              </Typography>
+            </Grid>
+          )}
+          {recomendList.map((resource: resourceType) => (
+            <Grid item key={resource.title}>
+              <PostList
+                title={resource.title}
+                summary={resource.summary}
+                href={resource.url}
+              />
+            </Grid>
+          ))}
+        </Grid>
+        <Grid item container direction='column'>
+          <Grid item>
+            <Typography variant='h2' gutterBottom>
+              All List
+            </Typography>
+          </Grid>
+
+          {!allList.length && (
+            <Grid item>
+              <Typography variant='body1'>
+                No posts found. Please let me know if you are interested to
+                learn more about it.
+              </Typography>
+            </Grid>
+          )}
+          {allList.map((resource: resourceType) => (
+            <Grid item key={resource.title}>
+              <PostList
+                title={resource.title}
+                summary={resource.summary}
+                href={resource.url}
+              />
+            </Grid>
+          ))}
+        </Grid>
       </Grid>
     </PageLayout>
   )