app finished

components/UI/Card.module.css

@@ -0,0 +1,5 @@
+.card {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}

components/UI/Card.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import classes from "./Card.module.css";
+
+type Props = {
+  children: ReactNode;
+  className: string;
+};
+
+const Card: React.FC<Props> = (props) => {
+  return (
+    <div
+      className={`${classes.card} ${props.className ? props.className : ""}`}
+    >
+      {props.children}
+    </div>
+  );
+};
+
+export default Card;

components/UI/vikings/SingleViking.module.css

@@ -0,0 +1,24 @@
+.card-margin {
+  margin: 1rem 1rem;
+}
+
+.card-margin ul {
+  margin: 1rem 0;
+}
+
+.name {
+  padding: 0 0.5rem;
+  font-size: 1rem;
+  text-align: center;
+}
+
+.name p {
+  font-weight: 700;
+  font-size: 1.3rem;
+  padding: 0.5rem 0;
+  margin: 0;
+}
+
+.border--small {
+  border-bottom: 1px solid black;
+}

components/UI/vikings/SingleViking.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect, Fragment } from "react";
+
+import Card from "../Card";
+import { viking } from "../../../types";
+import styles from "./SingleViking.module.css";
+
+const SingleViking: React.FC<{ viking: viking }> = (props) => {
+  const [gotAnyFightingSkills, setGotAnyFightingSkills] = useState(false);
+  const {
+    viking: {
+      fullName,
+      presenceOfChildren,
+      age,
+      hometown,
+      canFightWithSword,
+      canFightWithAxe,
+      canFightWithSpear,
+    },
+  } = props;
+
+  useEffect(() => {
+    if (canFightWithSword || canFightWithAxe || canFightWithSpear) {
+      setGotAnyFightingSkills(true);
+    }
+  }, [canFightWithSword, canFightWithAxe, canFightWithSpear]);
+
+  return (
+    <Card className={styles["card-margin"]}>
+      <div className={styles.name}>
+        <p className={styles["border--small"]}>{fullName}</p>
+      </div>
+      <ul>
+        <li>Children: {presenceOfChildren ? "Yes" : "No"}</li>
+        <li>Age: {age}</li>
+        <li>Hometown: {hometown} </li>
+        {gotAnyFightingSkills && (
+          <Fragment>
+            {canFightWithSword && <li>Can fight with sword. </li>}
+            {canFightWithAxe && <li>Can fight with axe. </li>}
+            {canFightWithSpear && <li>Can fight with spear. </li>}
+          </Fragment>
+        )}
+      </ul>
+    </Card>
+  );
+};
+
+export default SingleViking;

lib/vikings.ts

@@ -0,0 +1,90 @@
+import { viking, rawJsonViking, rawYamlViking } from "../types";
+
+// Filters provided .json data from the same objects
+const getUniqueJsonArray = (rawJson: rawJsonViking[]) => {
+  return rawJson.filter(
+    (v: any, i: number, a: any) =>
+      a.findIndex((v2: any) =>
+        ["fullName", "age", "village", "valkyrie", "hasSon"].every(
+          (k: any) => v2[k] === v[k]
+        )
+      ) === i
+  );
+};
+
+// Filters provided .yaml data from the same objects
+const getUniqueYamlArray = (rawJson: rawYamlViking[]) => {
+  return rawJson.filter(
+    (v: any, i: number, a: any) =>
+      a.findIndex((v2: any) =>
+        [
+          "name",
+          "years_old",
+          "has_home_in",
+          "name_of_father",
+          "number_of_children",
+          "weapon",
+        ].every((k: any) => v2[k] === v[k])
+      ) === i
+  );
+};
+
+// Maps raw .json object to viking type
+const mapJsonToViking = (rawJson: rawJsonViking[]) => {
+  const mappedVikings: viking[] = getUniqueJsonArray(rawJson)
+    .filter((viking: rawJsonViking) => viking.age >= 25 && viking.age <= 65)
+    .map((viking: rawJsonViking) => {
+      return {
+        fullName: viking.fullName,
+        presenceOfChildren: viking.hasSon,
+        age: viking.age,
+        hometown: viking.village,
+        canFightWithSword: false,
+        canFightWithAxe: false,
+        canFightWithSpear: false,
+      };
+    });
+  return mappedVikings;
+};
+
+// Maps raw .yaml object to viking type
+const mapYamlToViking = (rawYaml: rawYamlViking[]) => {
+  const mappedVikings: viking[] = getUniqueYamlArray(rawYaml)
+    .filter(
+      (viking: rawYamlViking) =>
+        viking.years_old >= 25 && viking.years_old <= 65
+    )
+    .map((viking: rawYamlViking) => {
+      return {
+        fullName: `${viking.name} ${viking.name_of_father}sson`,
+        presenceOfChildren: viking.number_of_children === 0 ? false : true,
+        age: viking.years_old,
+        hometown: viking.has_home_in,
+        canFightWithSword: viking.weapon === "sword" ? true : false,
+        canFightWithAxe: viking.weapon === "axe" ? true : false,
+        canFightWithSpear: viking.weapon === "spear" ? true : false,
+      };
+    });
+
+  return mappedVikings;
+};
+
+// Filters out the same objects from the given arrays of viking type
+export const validateAndMergeArrays = (
+  rawJson: rawJsonViking[],
+  rawYaml: any
+) => {
+  const mappedJsonVikings = mapJsonToViking(rawJson);
+  const mappedYamlVikings = mapYamlToViking(rawYaml);
+
+  const names = new Set(mappedJsonVikings.map((viking) => viking.fullName));
+  const villages = new Set(mappedJsonVikings.map((viking) => viking.hometown));
+  const mergedVikings = [
+    ...mappedJsonVikings,
+    ...mappedYamlVikings.filter((viking) => {
+      return !names.has(viking.fullName) && !villages.has(viking.hometown);
+    }),
+  ];
+
+  return mergedVikings;
+};

module.d.ts

@@ -0,0 +1,4 @@
+declare module "*.yaml" {
+  const data: { [key: string]: any };
+  export default data;
+}

next.config.js

@@ -2,6 +2,9 @@
 const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
-}
+};
 
-module.exports = nextConfig
+const withYaml = require("next-yaml");
+
+module.exports = nextConfig;
+module.exports = withYaml();