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 +-- components/Header.js | 12 ------ components/Navbar.js | 46 -------------------- components/PSA.js | 47 -------------------- components/psa.json | 5 --- components/travel-advisory/HistoryModal.js | 40 ----------------- components/travel-advisory/ListCountries.js | 66 ----------------------------- components/updates/DateFormatter.js | 9 ---- components/updates/PostPreview.js | 15 ------- components/updates/getPostMetadata.js | 24 ----------- 24 files changed, 276 insertions(+), 276 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 delete mode 100644 components/Header.js delete mode 100644 components/Navbar.js delete mode 100644 components/PSA.js delete mode 100644 components/psa.json delete mode 100644 components/travel-advisory/HistoryModal.js delete mode 100644 components/travel-advisory/ListCountries.js delete mode 100644 components/updates/DateFormatter.js delete mode 100644 components/updates/PostPreview.js delete mode 100644 components/updates/getPostMetadata.js 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', diff --git a/components/Header.js b/components/Header.js deleted file mode 100644 index bd70dd0..0000000 --- a/components/Header.js +++ /dev/null @@ -1,12 +0,0 @@ -const Header = ({title, description}) => { - return ( -
    -
    -

    {title}

    -

    {description}

    -
    -
    - ) -} - -export default Header; diff --git a/components/Navbar.js b/components/Navbar.js deleted file mode 100644 index 1555eb9..0000000 --- a/components/Navbar.js +++ /dev/null @@ -1,46 +0,0 @@ -"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/components/PSA.js b/components/PSA.js deleted file mode 100644 index 06bf9ba..0000000 --- a/components/PSA.js +++ /dev/null @@ -1,47 +0,0 @@ -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/components/psa.json b/components/psa.json deleted file mode 100644 index df9869f..0000000 --- a/components/psa.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "important": 0, - "announcement": "No important announcements", - "link": "https://google.ca" -} diff --git a/components/travel-advisory/HistoryModal.js b/components/travel-advisory/HistoryModal.js deleted file mode 100644 index 3ef2ea8..0000000 --- a/components/travel-advisory/HistoryModal.js +++ /dev/null @@ -1,40 +0,0 @@ -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/components/travel-advisory/ListCountries.js b/components/travel-advisory/ListCountries.js deleted file mode 100644 index 078af5c..0000000 --- a/components/travel-advisory/ListCountries.js +++ /dev/null @@ -1,66 +0,0 @@ -"use client" -import countriesData from '@/app/travel-advisory/countries.json' assert { type: 'json' }; -import HistoryModal from "@/components/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/components/updates/DateFormatter.js b/components/updates/DateFormatter.js deleted file mode 100644 index 9e236d0..0000000 --- a/components/updates/DateFormatter.js +++ /dev/null @@ -1,9 +0,0 @@ - -import { parseISO, format } from 'date-fns' - -const DateFormatter = (dateString) => { - const date = parseISO(dateString) - return -} - -export default DateFormatter diff --git a/components/updates/PostPreview.js b/components/updates/PostPreview.js deleted file mode 100644 index ec9183d..0000000 --- a/components/updates/PostPreview.js +++ /dev/null @@ -1,15 +0,0 @@ -import Link from "next/link"; -import DateFormatter from '@/components/updates/DateFormatter' - -export default function PostPreview(props) { - return ( -
    - -

    {props.title}

    - - {props.author} -

    {props.description}

    -

    Posted on {DateFormatter(props.date)}

    -
    - ) -} diff --git a/components/updates/getPostMetadata.js b/components/updates/getPostMetadata.js deleted file mode 100644 index 515cc79..0000000 --- a/components/updates/getPostMetadata.js +++ /dev/null @@ -1,24 +0,0 @@ -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 -} -- cgit v1.2.3