From 8d819bee3eb0e7cc0bc3b12c4636bcebdac194af Mon Sep 17 00:00:00 2001 From: bushmeen Date: Wed, 27 Dec 2023 18:18:47 +0100 Subject: [PATCH 01/22] Add types definitions and add functions for reading data from JSON and YAMl files Introduce 'Professions' enum (astronaut, doctor, engineer). Define 'CrewMember', 'JsonCrewMember', and 'YamlCrewMember' types. Implement file reading functions: - 'readJsonCrewMember' for JSON files. - 'readYamlCrewMember' for YAML files. --- lib/constants/filePaths.ts | 2 ++ lib/crew.ts | 14 ++++++++++++++ lib/read/readJsonFile.ts | 11 +++++++++++ lib/read/readYamlFile.ts | 12 ++++++++++++ package-lock.json | 7 +++---- package.json | 9 +++++---- pages/api/crew.ts | 15 ++++++++++++--- pages/task/[page].tsx | 6 +++--- types/crewMember.ts | 27 +++++++++++++++++++++++++++ 9 files changed, 89 insertions(+), 14 deletions(-) create mode 100644 lib/constants/filePaths.ts create mode 100644 lib/read/readJsonFile.ts create mode 100644 lib/read/readYamlFile.ts create mode 100644 types/crewMember.ts diff --git a/lib/constants/filePaths.ts b/lib/constants/filePaths.ts new file mode 100644 index 0000000..1f1c419 --- /dev/null +++ b/lib/constants/filePaths.ts @@ -0,0 +1,2 @@ +export const PATH_TO_JSON_CREW_FILE = '/crew.json'; +export const PATH_TO_YAML_CREW_FILE = '/crew.yaml'; diff --git a/lib/crew.ts b/lib/crew.ts index b49024d..2e31e09 100644 --- a/lib/crew.ts +++ b/lib/crew.ts @@ -2,3 +2,17 @@ * @todo Prepare a method to return a list of crew members * @description The list should only include crew members aged 30 to 40 */ + +import { JsonCrewMember, YamlCrewMember } from '@/types/crewMember'; +import { readJsonFile } from './read/readJsonFile'; +import { readYamlFile } from './read/readYamlFile'; +import { PATH_TO_JSON_CREW_FILE, PATH_TO_YAML_CREW_FILE } from './constants/filePaths'; + +export const getCrewMembersFormFiels = async () => { + try { + const [jsonCrewMembers, yamlCrewMembers] = await Promise.all([ + readJsonFile(PATH_TO_JSON_CREW_FILE), + readYamlFile(PATH_TO_YAML_CREW_FILE), + ]); + } catch (err) {} +}; diff --git a/lib/read/readJsonFile.ts b/lib/read/readJsonFile.ts new file mode 100644 index 0000000..790e663 --- /dev/null +++ b/lib/read/readJsonFile.ts @@ -0,0 +1,11 @@ +import { promises as fs } from 'fs'; + +export const readJsonFile = async (filePath: string): Promise => { + try { + if (!filePath.endsWith('.json')) throw new Error('File is not a JSON file'); + const file = await fs.readFile(process.cwd() + filePath, 'utf8'); + return JSON.parse(file) as T; + } catch (err) { + throw err; + } +}; diff --git a/lib/read/readYamlFile.ts b/lib/read/readYamlFile.ts new file mode 100644 index 0000000..c0c4741 --- /dev/null +++ b/lib/read/readYamlFile.ts @@ -0,0 +1,12 @@ +import { promises as fs } from 'fs'; +import { parse } from 'yaml'; + +export const readYamlFile = async (filePath: string): Promise => { + try { + if (!filePath.endsWith('.yaml')) throw new Error('File is not a YAML file'); + const file = await fs.readFile(process.cwd() + filePath, 'utf8'); + return parse(file) as T; + } catch (err) { + throw err; + } +}; diff --git a/package-lock.json b/package-lock.json index fd319c8..7261d96 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "next": "13.5.6", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "yaml": "^2.3.4" }, "devDependencies": { "@types/node": "^20", @@ -4363,7 +4364,6 @@ "version": "2.3.4", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", - "dev": true, "engines": { "node": ">= 14" } @@ -7429,8 +7429,7 @@ "yaml": { "version": "2.3.4", "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", - "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", - "dev": true + "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==" }, "yocto-queue": { "version": "0.1.0", diff --git a/package.json b/package.json index dd54a2f..1804c01 100644 --- a/package.json +++ b/package.json @@ -9,19 +9,20 @@ "lint": "next lint" }, "dependencies": { + "next": "13.5.6", "react": "^18", "react-dom": "^18", - "next": "13.5.6" + "yaml": "^2.3.4" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "autoprefixer": "^10", + "eslint": "^8", + "eslint-config-next": "13.5.6", "postcss": "^8", "tailwindcss": "^3", - "eslint": "^8", - "eslint-config-next": "13.5.6" + "typescript": "^5" } } diff --git a/pages/api/crew.ts b/pages/api/crew.ts index 0f56e1f..3d3b76a 100644 --- a/pages/api/crew.ts +++ b/pages/api/crew.ts @@ -1,10 +1,19 @@ -import type { NextApiRequest, NextApiResponse } from "next"; +import { getCrewMembersFormFiels } from '@/lib/crew'; +import { readJsonFile } from '@/lib/read/readJsonFile'; +import { readYamlFile } from '@/lib/read/readYamlFile'; +import type { NextApiRequest, NextApiResponse } from 'next'; /** * @todo Prepare an endpoint to return a list of crew members * @description The endpoint should return a pagination of 8 users per page. The endpoint should accept a query parameter "page" to return the corresponding page. */ -export default function handler(req: NextApiRequest, res: NextApiResponse) { - res.status(200).json([]); +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + try { + const t = await getCrewMembersFormFiels(); + console.log(t); + } catch (err) { + console.log(err); + } + res.status(200).json([]); } diff --git a/pages/task/[page].tsx b/pages/task/[page].tsx index 86f1097..c7eed3b 100644 --- a/pages/task/[page].tsx +++ b/pages/task/[page].tsx @@ -3,6 +3,6 @@ * @description Use tanstack/react-query or swr to fetch data from the endpoint. Prepare pagination. */ -export default function Task() { - return
Task
; -} +const Task = () => {}; + +export default Task; diff --git a/types/crewMember.ts b/types/crewMember.ts new file mode 100644 index 0000000..247af4c --- /dev/null +++ b/types/crewMember.ts @@ -0,0 +1,27 @@ +enum Professions { + astronaut = 'astronaut', + doctor = 'doctor', + engineer = 'engineer', +} + +export type CrewMember = { + fullName: string; + nationality: string; + age: number; + profession: Professions; +}; + +export type JsonCrewMember = { + firstName: string; + lastName: string; + nationality: string; + age: number; + profession: Professions; +}; + +export type YamlCrewMember = { + name: string; + nationality: string; + years_old: number; + occupation: Professions; +}; From d94a466be9e67e304e16d5b9f01bdccdefe44732 Mon Sep 17 00:00:00 2001 From: bushmeen Date: Wed, 27 Dec 2023 19:11:15 +0100 Subject: [PATCH 02/22] Implemented a function that merges two lists into one, filters based on age, and sorts based on name --- lib/crew.ts | 16 ++++++++++++++-- lib/operationOnCrewList.ts | 33 +++++++++++++++++++++++++++++++++ pages/api/crew.ts | 8 +------- 3 files changed, 48 insertions(+), 9 deletions(-) create mode 100644 lib/operationOnCrewList.ts diff --git a/lib/crew.ts b/lib/crew.ts index 2e31e09..3593269 100644 --- a/lib/crew.ts +++ b/lib/crew.ts @@ -7,12 +7,24 @@ import { JsonCrewMember, YamlCrewMember } from '@/types/crewMember'; import { readJsonFile } from './read/readJsonFile'; import { readYamlFile } from './read/readYamlFile'; import { PATH_TO_JSON_CREW_FILE, PATH_TO_YAML_CREW_FILE } from './constants/filePaths'; +import { + filterCrewMembersByAge, + mapToCrewMember, + sortCrewMembersByName, +} from './operationOnCrewList'; -export const getCrewMembersFormFiels = async () => { +export const getCrewMembersFormFiles = async () => { try { const [jsonCrewMembers, yamlCrewMembers] = await Promise.all([ readJsonFile(PATH_TO_JSON_CREW_FILE), readYamlFile(PATH_TO_YAML_CREW_FILE), ]); - } catch (err) {} + + const mappedCrewList = mapToCrewMember(jsonCrewMembers, yamlCrewMembers); + const filteredCrewList = filterCrewMembersByAge(mappedCrewList); + + return sortCrewMembersByName(filteredCrewList); + } catch (err) { + throw err; + } }; diff --git a/lib/operationOnCrewList.ts b/lib/operationOnCrewList.ts new file mode 100644 index 0000000..97247d8 --- /dev/null +++ b/lib/operationOnCrewList.ts @@ -0,0 +1,33 @@ +import { CrewMember, JsonCrewMember, YamlCrewMember } from '@/types/crewMember'; + +export const mapToCrewMember = ( + jsonMembers: JsonCrewMember[], + yamlMembers: YamlCrewMember[] +): CrewMember[] => { + const jsonCrewMembersMapped = jsonMembers.map((member) => { + return { + fullName: `${member.firstName} ${member.lastName}`, + nationality: member.nationality, + age: member.age, + profession: member.profession, + }; + }); + + const yamlCrewMembersMapped = yamlMembers.map((member) => { + return { + fullName: member.name, + nationality: member.nationality, + age: member.years_old, + profession: member.occupation, + }; + }); + + return [...jsonCrewMembersMapped, ...yamlCrewMembersMapped]; +}; + +export const filterCrewMembersByAge = (crewMembers: CrewMember[]): CrewMember[] => { + return crewMembers.filter((member) => member.age >= 30 && member.age <= 40); +}; +export const sortCrewMembersByName = (crewMembers: CrewMember[]): CrewMember[] => { + return crewMembers.sort((a, b) => a.fullName.localeCompare(b.fullName)); +}; diff --git a/pages/api/crew.ts b/pages/api/crew.ts index 3d3b76a..a8abac5 100644 --- a/pages/api/crew.ts +++ b/pages/api/crew.ts @@ -1,4 +1,4 @@ -import { getCrewMembersFormFiels } from '@/lib/crew'; +import { getCrewMembersFormFiles } from '@/lib/crew'; import { readJsonFile } from '@/lib/read/readJsonFile'; import { readYamlFile } from '@/lib/read/readYamlFile'; import type { NextApiRequest, NextApiResponse } from 'next'; @@ -9,11 +9,5 @@ import type { NextApiRequest, NextApiResponse } from 'next'; */ export default async function handler(req: NextApiRequest, res: NextApiResponse) { - try { - const t = await getCrewMembersFormFiels(); - console.log(t); - } catch (err) { - console.log(err); - } res.status(200).json([]); } From 8ee4743bfb59514cef6549d00c616c1aebe01ed8 Mon Sep 17 00:00:00 2001 From: bushmeen Date: Wed, 27 Dec 2023 19:55:51 +0100 Subject: [PATCH 03/22] add shadcn ui components and made some basic layout added dark theme mode --- components.json | 17 + components/layout/Layout.tsx | 23 + components/layout/nav/Nav.tsx | 13 + components/layout/nav/ThemeToggle.tsx | 34 + components/ui/button.tsx | 56 + components/ui/card.tsx | 79 ++ components/ui/dropdown-menu.tsx | 200 ++++ lib/utils.ts | 6 + package-lock.json | 1476 +++++++++++++++++++++---- package.json | 8 + pages/_app.tsx | 11 +- pages/api/crew.ts | 9 +- pages/index.tsx | 25 +- pages/task/[page].tsx | 4 +- providers/ThemeProvider.tsx | 9 + styles/globals.css | 70 +- tailwind.config.ts | 86 +- 17 files changed, 1835 insertions(+), 291 deletions(-) create mode 100644 components.json create mode 100644 components/layout/Layout.tsx create mode 100644 components/layout/nav/Nav.tsx create mode 100644 components/layout/nav/ThemeToggle.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/dropdown-menu.tsx create mode 100644 lib/utils.ts create mode 100644 providers/ThemeProvider.tsx diff --git a/components.json b/components.json new file mode 100644 index 0000000..d4f1b4a --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "styles/globals.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} \ No newline at end of file diff --git a/components/layout/Layout.tsx b/components/layout/Layout.tsx new file mode 100644 index 0000000..46805d1 --- /dev/null +++ b/components/layout/Layout.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Nav } from './nav/Nav'; +import { ThemeProvider } from '@/providers/ThemeProvider'; +import { Inter } from 'next/font/google'; + +const inter = Inter({ subsets: ['latin'] }); + +interface Props { + children: React.ReactNode; +} + +export const Layout = ({ children }: Props) => { + return ( + <> + +