From d57226e5a802ecd6607faf67f32621e2da725a35 Mon Sep 17 00:00:00 2001 From: Andrew Lee Date: Wed, 19 Jul 2023 00:48:11 -0400 Subject: Moved all components to app folder --- app/Header.js | 12 +++++++ app/Navbar.js | 46 +++++++++++++++++++++++++ app/PSA.js | 47 +++++++++++++++++++++++++ app/layout.js | 4 +-- app/page.js | 4 +-- app/psa.json | 5 +++ app/services/page.js | 2 +- app/travel-advisory/HistoryModal.js | 40 ++++++++++++++++++++++ app/travel-advisory/ListCountries.js | 66 ++++++++++++++++++++++++++++++++++++ app/travel-advisory/page.js | 4 +-- app/updates/DateFormatter.js | 9 +++++ app/updates/PostPreview.js | 15 ++++++++ app/updates/[slug]/page.js | 4 +-- app/updates/getPostMetadata.js | 24 +++++++++++++ app/updates/page.js | 6 ++-- 15 files changed, 276 insertions(+), 12 deletions(-) create mode 100644 app/Header.js create mode 100644 app/Navbar.js create mode 100644 app/PSA.js create mode 100644 app/psa.json create mode 100644 app/travel-advisory/HistoryModal.js create mode 100644 app/travel-advisory/ListCountries.js create mode 100644 app/updates/DateFormatter.js create mode 100644 app/updates/PostPreview.js create mode 100644 app/updates/getPostMetadata.js (limited to 'app') diff --git a/app/Header.js b/app/Header.js new file mode 100644 index 0000000..bd70dd0 --- /dev/null +++ b/app/Header.js @@ -0,0 +1,12 @@ +const Header = ({title, description}) => { + return ( +
+
+

{title}

+

{description}

+
+
+ ) +} + +export default Header; diff --git a/app/Navbar.js b/app/Navbar.js new file mode 100644 index 0000000..1555eb9 --- /dev/null +++ b/app/Navbar.js @@ -0,0 +1,46 @@ +"use client"; +import Image from "next/image"; +import Link from "next/link"; +import { useState } from "react"; + +const Navbar = () => { + const [navbar, setNavbar] = useState(false); + return ( + + ) +} + +export default Navbar; diff --git a/app/PSA.js b/app/PSA.js new file mode 100644 index 0000000..06bf9ba --- /dev/null +++ b/app/PSA.js @@ -0,0 +1,47 @@ +import psaMessage from './psa.json' assert { type: 'json' }; +import Link from "next/link"; + +const PSA = () => { + let defaultStyle = "flex flex-row md:px-40 px-30 py-0.5 space-x-2"; + let styleImportant; + let important; + switch (psaMessage.important) { + case 0: + styleImportant = "hidden" + defaultStyle += ' ' + styleImportant + break; + case 1: + important = "Latest News:" + styleImportant = "bg-zinc-700" + defaultStyle += ' ' + styleImportant + break; + case 2: + important = "WARNING!" + styleImportant = "bg-yellow-700" + defaultStyle += ' ' + styleImportant + break; + case 3: + important = "EMERGENCY!" + styleImportant = "bg-red-800" + defaultStyle += ' ' + styleImportant + break; + + } + + return ( +
+

{important}

+
+

{psaMessage.announcement}

+

+ {psaMessage.link && ( + + Learn more ↗ + + )}

+
+
+ ) +} + +export default PSA; diff --git a/app/layout.js b/app/layout.js index fa5c790..50dad73 100644 --- a/app/layout.js +++ b/app/layout.js @@ -1,7 +1,7 @@ import './globals.css' import { Exo } from 'next/font/google' -import Navbar from "@/components/Navbar"; -import PSA from "@/components/PSA"; +import Navbar from "@/app/Navbar"; +import PSA from "@/app/PSA"; const exo = Exo({ subsets: ['latin'] }) diff --git a/app/page.js b/app/page.js index 60f5965..5a089df 100644 --- a/app/page.js +++ b/app/page.js @@ -1,5 +1,5 @@ -import getPostMetadata from "@/components/updates/getPostMetadata"; -import PostPreview from "@/components/updates/PostPreview"; +import getPostMetadata from "@/app/updates/getPostMetadata"; +import PostPreview from "@/app/updates/PostPreview"; import Link from "next/link"; export const metadata = { diff --git a/app/psa.json b/app/psa.json new file mode 100644 index 0000000..df9869f --- /dev/null +++ b/app/psa.json @@ -0,0 +1,5 @@ +{ + "important": 0, + "announcement": "No important announcements", + "link": "https://google.ca" +} diff --git a/app/services/page.js b/app/services/page.js index c91b92e..3acd69f 100644 --- a/app/services/page.js +++ b/app/services/page.js @@ -1,4 +1,4 @@ -import Header from "@/components/Header"; +import Header from "@/app/Header"; export const metadata = { title: 'Services', diff --git a/app/travel-advisory/HistoryModal.js b/app/travel-advisory/HistoryModal.js new file mode 100644 index 0000000..3ef2ea8 --- /dev/null +++ b/app/travel-advisory/HistoryModal.js @@ -0,0 +1,40 @@ +const HistoryModal = ({ isVisible, onClose, countries, dangerLevel, history }) => { + if (!isVisible) return null; + const handleClose = (e) => { + if(e.target.id === 'wrapper') onClose(); + } + + let historyList; + if (history && history.length > 0) { + historyList = history.map((event, index) => { + return ( +
  • {event}
    • + ) + }) + } else { + historyList =
  • Currently no diplomatic tensions in this country.
    • ; + } + + return ( +
    +
    +
    +
    +
    +
    +

    {countries}

    +

    {dangerLevel}

    +
    +
    +

    History

    +
      {historyList}
    +
    +
    +
    +
    +
    +
    + ) +} + +export default HistoryModal; diff --git a/app/travel-advisory/ListCountries.js b/app/travel-advisory/ListCountries.js new file mode 100644 index 0000000..c2e233d --- /dev/null +++ b/app/travel-advisory/ListCountries.js @@ -0,0 +1,66 @@ +"use client" +import countriesData from '@/app/travel-advisory/countries.json' assert { type: 'json' }; +import HistoryModal from "@/app/travel-advisory/HistoryModal"; +import { useState } from "react"; + +export function getDangerLevel(danger) { + let dangerLevel; + switch (danger) { + case 0: + dangerLevel = "Take normal security precautions" + break; + case 1: + dangerLevel = "Exercise a high degree of caution" + break; + case 2: + dangerLevel = "Avoid non-essential travel" + break; + case 3: + dangerLevel = "Avoid all travel" + break; + default: + dangerLevel = "Seems like the danger level is broken!" + break; + } + + return dangerLevel; +} + +export function Countries(){ + // eslint-disable-next-line react-hooks/rules-of-hooks + const [showModal, setShowModal] = useState(false); + const [selectedCountry, setSelectedCountry] = useState(null); + const [selectedDangerLevel, setSelectedDangerLevel] = useState(null); + const [selectedCountryHistory, setSelectedCountryHistory] = useState(null); + const countries = countriesData.countries; + + return countries.map((country) => { + let dangerLevel = getDangerLevel(country.danger); + + const settlementsList = country.settlements.map((settlement) => { + return ( +
    +

    {settlement.name}

    +

    {getDangerLevel(settlement.danger)}

    +
    + ) + }) + + return ( +
    +
    +

    {country.name}

    +

    {dangerLevel}

    +
    {settlementsList}
    + +
    + setShowModal(false)} countries={selectedCountry} dangerLevel={selectedDangerLevel} history={selectedCountryHistory} /> +
    + ) + }) +} diff --git a/app/travel-advisory/page.js b/app/travel-advisory/page.js index 415b6c2..259aaa4 100644 --- a/app/travel-advisory/page.js +++ b/app/travel-advisory/page.js @@ -1,5 +1,5 @@ -import { Countries, getDangerLevel } from "@/components/travel-advisory/ListCountries"; -import Header from "@/components/Header"; +import { Countries, getDangerLevel } from "@/app/travel-advisory/ListCountries"; +import Header from "@/app/Header"; export const metadata = { title: 'Travel Advisory', diff --git a/app/updates/DateFormatter.js b/app/updates/DateFormatter.js new file mode 100644 index 0000000..9e236d0 --- /dev/null +++ b/app/updates/DateFormatter.js @@ -0,0 +1,9 @@ + +import { parseISO, format } from 'date-fns' + +const DateFormatter = (dateString) => { + const date = parseISO(dateString) + return +} + +export default DateFormatter diff --git a/app/updates/PostPreview.js b/app/updates/PostPreview.js new file mode 100644 index 0000000..23e2176 --- /dev/null +++ b/app/updates/PostPreview.js @@ -0,0 +1,15 @@ +import Link from "next/link"; +import DateFormatter from '@/app/updates/DateFormatter' + +export default function PostPreview(props) { + return ( +
    + +

    {props.title}

    + + {props.author} +

    {props.description}

    +

    Posted on {DateFormatter(props.date)}

    +
    + ) +} diff --git a/app/updates/[slug]/page.js b/app/updates/[slug]/page.js index d91440e..102a98a 100644 --- a/app/updates/[slug]/page.js +++ b/app/updates/[slug]/page.js @@ -1,8 +1,8 @@ import {readFileSync} from "fs"; import Markdown from "markdown-to-jsx" import matter from "gray-matter"; -import getPostMetadata from "@/components/updates/getPostMetadata"; -import DateFormatter from "@/components/updates/DateFormatter"; +import getPostMetadata from "@/app/updates/getPostMetadata"; +import DateFormatter from "@/app/updates/DateFormatter"; const getPostContent = (slug) => { const folder = "posts/"; diff --git a/app/updates/getPostMetadata.js b/app/updates/getPostMetadata.js new file mode 100644 index 0000000..515cc79 --- /dev/null +++ b/app/updates/getPostMetadata.js @@ -0,0 +1,24 @@ +import {readdirSync, readFileSync} from "fs"; +import matter from "gray-matter"; + +export default function getPostMetadata() { + const folder = "posts/"; + const files = readdirSync(folder); + const markdownPosts = files.filter((file) => file.endsWith(".md")); + + const posts = markdownPosts.map((fileName) => { + const fileContent = readFileSync(`posts/${fileName}`, "utf-8"); + const matterResult = matter(fileContent); + return { + title: matterResult.data.title, + author: matterResult.data.author, + date: matterResult.data.date, + description: matterResult.data.description, + slug: fileName.replace(".md", "") + } + }) + + // Sort the posts by date in descending order + posts.sort((a, b) => new Date(b.date) - new Date(a.date)); + return posts +} diff --git a/app/updates/page.js b/app/updates/page.js index 04215c9..148c135 100644 --- a/app/updates/page.js +++ b/app/updates/page.js @@ -1,6 +1,6 @@ -import getPostMetadata from "@/components/updates/getPostMetadata"; -import PostPreview from "@/components/updates/PostPreview"; -import Header from "@/components/Header"; +import getPostMetadata from "@/app/updates/getPostMetadata"; +import PostPreview from "@/app/updates/PostPreview"; +import Header from "@/app/Header"; export const metadata = { title: 'Updates', -- cgit v1.2.3