refactor: move components around to reflect next 14 pages structure

components/InputWithResults/Results/Result.tsx

@@ -2,26 +2,22 @@ import Link from "next/link";
 import React from "react";
 
 import { Badge, Combobox, Group, Stack, Text } from "@exile-watch/writ-react";
-import { IndexedSearchResultsBossProps } from "#types";
 
+import { IndexedSearchTypeItem } from "@exile-watch/encounter-data";
 import styles from "./Results.module.scss";
 
-type ResultProps = {
-  onClick: () => void;
-} & IndexedSearchResultsBossProps;
-
 const Result = ({
   mapPath,
   mapName,
   encounterPath,
   encounterName,
   encounterAbilityPath,
   encounterAbilityName,
-}: ResultProps) => {
+}: IndexedSearchTypeItem) => {
   const isMap = !encounterPath && !encounterAbilityPath;
   const isBoss = encounterPath && !encounterAbilityPath;
 
-  if (isMap) {
+  if (isMap && mapPath && mapName) {
     return (
       <Link href={mapPath} className={styles.link}>
         <Combobox.Option value={mapName}>
@@ -36,7 +32,7 @@ const Result = ({
     );
   }
 
-  if (isBoss) {
+  if (isBoss && encounterPath && encounterName) {
     return (
       <Link href={encounterPath} className={styles.link}>
         <Combobox.Option value={encounterName}>
@@ -57,25 +53,28 @@ const Result = ({
       </Link>
     );
   }
+  if (encounterAbilityPath && encounterAbilityName) {
+    return (
+      <Link href={encounterAbilityPath} className={styles.link}>
+        <Combobox.Option value={encounterAbilityName}>
+          <Group justify="space-between">
+            <Stack gap={0}>
+              <Text size="sm">{encounterAbilityName}</Text>
+              <Text c="dimmed" size="xs" fs="italic">
+                {encounterName}
+                {mapName && ` - ${mapName}`}
+              </Text>
+            </Stack>
+            <Badge size="xs" color="blue">
+              ability
+            </Badge>
+          </Group>
+        </Combobox.Option>
+      </Link>
+    );
+  }
 
-  return (
-    <Link href={encounterAbilityPath} className={styles.link}>
-      <Combobox.Option value={encounterAbilityName}>
-        <Group justify="space-between">
-          <Stack gap={0}>
-            <Text size="sm">{encounterAbilityName}</Text>
-            <Text c="dimmed" size="xs" fs="italic">
-              {encounterName}
-              {mapName && ` - ${mapName}`}
-            </Text>
-          </Stack>
-          <Badge size="xs" color="blue">
-            ability
-          </Badge>
-        </Group>
-      </Combobox.Option>
-    </Link>
-  );
+  return null;
 };
 
 export default Result;

components/Layout/Header/Header.tsx

@@ -43,10 +43,10 @@ const Header = ({ isOpen, toggle }: HeaderProps) => {
       )}
       <Group>
         <Link href="https://github.com/exile-watch" target="_blank">
-          <IconBrandGithub />
+          <IconBrandGithub color="beige" />
         </Link>
         <Link href="https://discord.gg/U3kXS4ej" target="_blank">
-          <IconBrandDiscord />
+          <IconBrandDiscord color="beige" />
         </Link>
       </Group>
     </Group>

components/Layout/Layout.tsx

@@ -10,7 +10,7 @@ import { ReactNode } from "react";
 const Header = dynamic(() => import("./Header/Header"));
 const SidebarEncountersDesktop = dynamic(
   () =>
-    import("#features/encounters/components/Sidebar/SidebarEncountersDesktop"),
+    import("#features/encounters/_components/Sidebar/SidebarEncountersDesktop"),
 );
 import styles from "./styles.module.scss";
 

features/encounters/Encounter/Encounter.page.tsx

@@ -0,0 +1,12 @@
+import { Layout } from "#components";
+import EncounterContainer from "./_components/EncounterHeading/EncounterContainer";
+
+const EncounterPage = () => {
+  return (
+    <Layout>
+      <EncounterContainer />
+    </Layout>
+  );
+};
+
+export { EncounterPage };

features/encounters/components/Boss/BossAbility/BossAbility.tsx → features/encounters/Encounter/_components/EncounterAbility/EncounterAbility.tsx

@@ -2,18 +2,24 @@ import cx from "classnames";
 import kebabCase from "lodash/kebabCase";
 import React, { useEffect, useRef } from "react";
 
+import Video from "#features/encounters/Encounter/_components/EncounterAbility/Video/Video";
 import { AbilityName, AbilityTip, AboutAbility } from "./Details";
-import Video from "./Video/Video";
 
 import { BossAbilityType } from "@exile-watch/encounter-data";
 import { useRouter } from "next/router";
-import styles from "./BossAbility.module.scss";
+import styles from "./EncounterAbility.module.scss";
 
 type BossAbilityProps = BossAbilityType & {
   isEven: boolean;
 };
 
-const BossAbility = ({ name, about, gif, tip, isEven }: BossAbilityProps) => {
+const EncounterAbility = ({
+  name,
+  about,
+  gif,
+  tip,
+  isEven,
+}: BossAbilityProps) => {
   const { query } = useRouter();
   const activeAbilityRef = useRef<HTMLDivElement>(null);
   const isActive = query.ability === kebabCase(name);
@@ -46,4 +52,4 @@ const BossAbility = ({ name, about, gif, tip, isEven }: BossAbilityProps) => {
   );
 };
 
-export default BossAbility;
+export default EncounterAbility;

features/encounters/components/Boss/BossContainer.tsx → features/encounters/Encounter/_components/EncounterHeading/EncounterContainer.tsx

@@ -2,29 +2,30 @@ import cx from "classnames";
 
 import { Title } from "@exile-watch/writ-react";
 import { startCase } from "lodash";
-import BossAbility from "#features/encounters/components/Boss/BossAbility/BossAbility";
-import MapBossesHeading from "#features/encounters/components/Map/MapBossesHeading";
+
+import EncounterAbility from "#features/encounters/Encounter/_components/EncounterAbility/EncounterAbility";
 import { useEncounterData } from "#hooks/useEncounterData";
-import styles from "./BossContainer.module.scss";
 
-const BossContainer = () => {
-  const { activeBossAbilities, heading, subheading } = useEncounterData();
+import styles from "./EncounterContainer.module.scss";
 
-  if (!activeBossAbilities) return null;
+import ListEncountersHeading from "./ListEncountersHeading/ListEncountersHeading";
+
+const EncounterContainer = () => {
+  const { activeBossAbilities, heading, subheading } = useEncounterData();
 
   return (
     <>
       <Title order={4} c="dimmed">
         {startCase(heading as string)} {subheading && `* ${subheading}`}
       </Title>
 
-      <MapBossesHeading />
+      <ListEncountersHeading />
 
       <div className={cx("my-3", styles.bossContainer)}>
         <div className={cx("pl-3 ml-3", styles.abilitiesWrapper)}>
           <div className={styles.abilities}>
             {activeBossAbilities?.map((props, i) => (
-              <BossAbility
+              <EncounterAbility
                 {...props}
                 isEven={i % 2 === 1}
                 key={`bossAbilities_${i}`}
@@ -37,4 +38,4 @@ const BossContainer = () => {
   );
 };
 
-export default BossContainer;
+export default EncounterContainer;

features/encounters/components/Map/MapBossesHeading.tsx → features/encounters/Encounter/_components/EncounterHeading/ListEncountersHeading/ListEncountersHeading.tsx

@@ -1,15 +1,13 @@
+import { Title } from "@exile-watch/writ-react";
 import cx from "classnames";
 import { kebabCase } from "lodash";
 import Link from "next/link";
-import React from "react";
-
-import { Title } from "@exile-watch/writ-react";
-
 import { useRouter } from "next/router";
+import React from "react";
 import { useEncounterData } from "#hooks/useEncounterData";
-import styles from "./Map.module.scss";
+import styles from "./ListEncountersHeading.module.scss";
 
-const MapBossesHeading = () => {
+const ListEncountersHeading = () => {
   const {
     query: { category, map, boss: queryBoss },
   } = useRouter();
@@ -42,4 +40,4 @@ const MapBossesHeading = () => {
   );
 };
 
-export default MapBossesHeading;
+export default ListEncountersHeading;

features/encounters/Encounters.page.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { Layout } from "#components";
+import ListEncounters from "./_components/ListEncounters/ListEncounters";
+
+const EncountersPage = () => {
+  return (
+    <Layout>
+      <ListEncounters />
+    </Layout>
+  );
+};
+
+export { EncountersPage };

features/encounters/EncountersCategory/EncountersCategory.page.tsx

@@ -0,0 +1,19 @@
+import { startCase } from "lodash";
+import { useRouter } from "next/router";
+import React from "react";
+import { Layout } from "#components";
+import ListEncounterCategories from "./_components/ListEncounterCategories/ListEncounterCategories";
+
+const EncountersCategoryPage = () => {
+  const {
+    query: { category },
+  } = useRouter();
+
+  return (
+    <Layout title={startCase(category as string)}>
+      <ListEncounterCategories />
+    </Layout>
+  );
+};
+
+export { EncountersCategoryPage };

features/encounters/EncountersCategory/_components/ListEncounterCategories/ListEncounterCategories.tsx

@@ -0,0 +1,42 @@
+import { CategoryPageType } from "@exile-watch/encounter-data";
+import { SimpleGrid } from "@exile-watch/writ-react";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { HomepageCard, SimpleCard } from "#components";
+
+const ListEncounterCategories = () => {
+  const {
+    query: { category },
+  } = useRouter();
+  const [data, setData] = useState<CategoryPageType | null>(null);
+
+  useEffect(() => {
+    import(
+      `@exile-watch/encounter-data/dist/extracted-data/${category}.esm` as string
+    )
+      .then((d) => {
+        setData(d.default);
+      })
+      .catch(() => {
+        setData(null);
+      });
+  }, [category]);
+
+  const isCommonMaps = category === "common-maps";
+
+  return (
+    <SimpleGrid
+      cols={{ xxxl: 6, xxl: 5, xl: 4, lg: 3, md: 2, sm: 2, xs: 1 }}
+      mb="md"
+    >
+      {isCommonMaps &&
+        data?.map((data) => <SimpleCard key={data.path} {...data} />)}
+      {!isCommonMaps &&
+        data?.map((data) => (
+          <HomepageCard key={data.path} {...data} isCategory={false} />
+        ))}
+    </SimpleGrid>
+  );
+};
+
+export default ListEncounterCategories;

features/encounters/EncountersMap/EncountersMap.page.tsx

@@ -0,0 +1,22 @@
+import { startCase } from "lodash";
+import { useRouter } from "next/router";
+import React from "react";
+import { Layout } from "#components";
+import { EncounterPage } from "#features/pages";
+import ListEncounterMap from "./_components/ListEncounterMap/ListEncounterMap";
+
+const EncountersMapPage = () => {
+  const {
+    query: { category, map },
+  } = useRouter();
+
+  if (category !== "common-maps") return <EncounterPage />;
+
+  return (
+    <Layout title={startCase(map as string)}>
+      <ListEncounterMap />
+    </Layout>
+  );
+};
+
+export { EncountersMapPage };

features/encounters/EncountersMap/_components/ListEncounterMap/ListEncounterMap.tsx

@@ -0,0 +1,52 @@
+import { MapType } from "@exile-watch/encounter-data";
+import { SimpleGrid } from "@exile-watch/writ-react";
+import { kebabCase } from "lodash";
+import { useRouter } from "next/router";
+import React, { useEffect, useState } from "react";
+import { HomepageCard } from "#components";
+import { EncounterPage } from "#features/pages";
+
+const ListEncounterMap = () => {
+  const {
+    query: { category, map },
+    asPath,
+  } = useRouter();
+  const [data, setData] = useState<MapType | null>(null);
+
+  useEffect(() => {
+    import(
+      `@exile-watch/encounter-data/dist/extracted-data/${category}/${map}.esm` as string
+    )
+      .then((d) => {
+        setData(d.default);
+      })
+      .catch(() => {
+        setData(null);
+      });
+  }, [map]);
+
+  if (!map) return null;
+
+  if (category !== "common-maps") return <EncounterPage />;
+
+  return (
+    <SimpleGrid cols={{ xxxl: 6, xxl: 5, xl: 4, lg: 3, md: 2, sm: 2, xs: 1 }}>
+      {data?.bosses.map(({ name: encounterName, abilities }) => {
+        const ability = abilities?.pop();
+        const path = `${asPath}/${kebabCase(encounterName)}`;
+
+        return (
+          <HomepageCard
+            key={path}
+            name={encounterName}
+            gif={ability?.gif}
+            path={path}
+            isCategory={false}
+          />
+        );
+      })}
+    </SimpleGrid>
+  );
+};
+
+export default ListEncounterMap;