Patryk Kubala gotowy projekt

components/vikings/SingleField/index.tsx

@@ -0,0 +1,46 @@
+import styles from "../../../styles/SingleField.module.css";
+
+type Viking = {
+  fullName: string;
+  presenceOfChildren: boolean;
+  age: number;
+  hometown: string;
+  canFightWithSword: boolean;
+  canFightWithAxe: boolean;
+  canFightWithSpear: boolean;
+};
+
+function SingleField(props: { viking: Viking }): JSX.Element {
+  const {
+    fullName,
+    presenceOfChildren,
+    age,
+    hometown,
+    canFightWithSword,
+    canFightWithAxe,
+    canFightWithSpear,
+  } = props.viking;
+
+  return (
+    <tr>
+      <td className={styles.td}>{fullName}</td>
+      <td className={styles.td}>{presenceOfChildren ? "Yes" : "No"}</td>
+      <td className={styles.td}>{age}</td>
+      <td className={styles.td}>{hometown}</td>
+      <td className={styles.td}>
+        {" "}
+        {canFightWithSword || canFightWithAxe || canFightWithSpear ? (
+          <>
+            {canFightWithSword && "Sword"}
+            {canFightWithAxe && "Axe"}
+            {canFightWithSpear && "Spear"}
+          </>
+        ) : (
+          "None"
+        )}
+      </td>
+    </tr>
+  );
+}
+
+export default SingleField;

lib/vikings.ts

@@ -0,0 +1,62 @@
+type yaml = {
+  name: string;
+  weapon: string;
+  name_of_father: string;
+  has_home_in: string;
+  years_old: number;
+  number_of_children: number;
+};
+type json = {
+  fullName: string;
+  village: string;
+  age: number;
+  valkyrie: string;
+  hasSon: boolean;
+};
+type Viking = {
+  fullName: string;
+  presenceOfChildren: boolean;
+  age: number;
+  hometown: string;
+  canFightWithSword: boolean;
+  canFightWithAxe: boolean;
+  canFightWithSpear: boolean;
+};
+
+function transformData(data: yaml | json): Viking {
+  if ("name" in data) {
+    return {
+      fullName: data.name + " " + data.name_of_father + "son",
+      presenceOfChildren: data.number_of_children > 0,
+      age: data.years_old,
+      hometown: data.has_home_in,
+      canFightWithSword: data.weapon === "sword",
+      canFightWithAxe: data.weapon === "axe",
+      canFightWithSpear: data.weapon === "spear",
+    };
+  } else {
+    return {
+      fullName: data.fullName,
+      presenceOfChildren: data.hasSon,
+      age: data.age,
+      hometown: data.village,
+      canFightWithSword: false,
+      canFightWithAxe: false,
+      canFightWithSpear: false,
+    };
+  }
+}
+
+function getValidVikings(vikings: Viking[]): Viking[] {
+  return vikings.filter((viking) => viking.age > 25 && viking.age < 65);
+}
+
+export default function ValidateMergeYamlJsonData(
+  yaml: [yaml],
+  json: Array<json>
+) {
+  const datayaml = yaml.map((data: yaml) => transformData(data));
+  const datajson = json.map((data: json) => transformData(data));
+
+  return getValidVikings([...datajson, ...datayaml]);
+}

next.config.js

@@ -2,6 +2,16 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+};
 
-module.exports = nextConfig
+module.exports = {
+  nextConfig,
+  webpack: (config) => {
+    config.module.rules.push({
+      test: /\.yaml$/,
+      use: "js-yaml-loader",
+    });
+
+    return config;
+  },
+};

package.json

@@ -14,9 +14,15 @@
     "@types/react-dom": "18.0.9",
     "eslint": "8.29.0",
     "eslint-config-next": "13.0.6",
+    "js-yaml": "^4.1.0",
     "next": "13.0.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.4"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.5",
+    "js-yaml-loader": "^1.2.2",
+    "yaml-loader": "^0.8.0"
   }
 }

pages/api/getVikings.tsx

@@ -0,0 +1,16 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+import type { NextApiRequest, NextApiResponse } from "next";
+
+import ValidateMergeYamlJsonData from "../../lib/vikings";
+
+export default function getVikings(req: NextApiRequest, res: NextApiResponse) {
+  try {
+    res.status(200).json(ValidateMergeYamlJsonData);
+  } catch (err: unknown) {
+    if (typeof err === "string") {
+      res.status(500).json({ message: err });
+    } else {
+      res.status(500).json({ message: "An error occurred" });
+    }
+  }
+}

pages/index.tsx

@@ -1,71 +1,20 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '../styles/Home.module.css'
+import Head from "next/head";
+import styles from "../styles/Home.module.css";
+import Vikings from "./vikings";
+import getVikings from "./api/getVikings";
 
 export default function Home() {
   return (
     <div className={styles.container}>
       <Head>
-        <title>Create Next App</title>
+        <title>Local Host</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
       <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
+        <Vikings />
       </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
     </div>
-  )
+  );
 }

pages/vikings/index.tsx

@@ -0,0 +1,33 @@
+import styles from "../../styles/Vikings.module.css";
+import ValidateMergeYamlJsonData from "../../lib/vikings";
+import yamldata from "../../vikings.yaml";
+import jsondata from "../../vikings.json";
+import SingleField from "../../components/vikings/SingleField";
+const Vikings = () => {
+  const mapVikings = ValidateMergeYamlJsonData(yamldata, jsondata).map(
+    (viking, index) => {
+      return <SingleField key={index} viking={viking} />;
+    }
+  );
+
+  return (
+    <div className={styles.main}>
+      <h1>Załoga na najbliższą wyprawę do Anglii</h1>
+      <h2>W wyprawie wezmą tylko udział osoby między 25 a 65 rokiem życia</h2>
+      <table className={styles.table}>
+        <tbody>
+          <tr className={styles.tr}>
+            <th className={styles.th}>Full Name</th>
+            <th className={styles.th}>Has children</th>
+            <th className={styles.th}>Age</th>
+            <th className={styles.th}>HomeTown</th>
+            <th className={styles.th}>Weapon Fighting skills</th>
+          </tr>
+          {mapVikings}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Vikings;