#5 df: merge conflict v16

src/components/testing/Breadcrumb.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useMatches } from "react-router-dom";
+
+export default function Breadcrumb() {
+  let matches = useMatches();
+  console.log(matches);
+  let crumbs = matches
+    // first get rid of any matches that don't have handle and crumb
+    .filter((match) => Boolean(match.handle?.crumb))
+    // now map them into an array of elements, passing the loader
+    // data to each one
+    .map((match) => match.handle.crumb(match.data));
+  return (
+    <nav
+      class="flex flex-grow py-2 border-b-2 border-gray-200"
+      aria-label="Breadcrumb"
+    >
+      <ol class="inline-flex items-center space-x-1 md:space-x-3">
+        {crumbs.map((crumb, index) => (
+          <li class="inline-flex items-center" key={index}>
+            <div class="flex items-center">
+              {index > 0 && (
+                <svg
+                  class="w-3 h-3 text-gray-400 mx-1"
+                  aria-hidden="true"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 6 10"
+                >
+                  <path
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="m1 9 4-4-4-4"
+                  />
+                </svg>
+              )}
+
+              <a
+                href="#"
+                class="ml-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ml-2 dark:text-gray-400 dark:hover:text-white"
+              >
+                {crumb}
+              </a>
+            </div>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

src/components/testing/MenuSidebar.jsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Sidebar } from "flowbite-react";
+import {
+  HiArrowSmRight,
+  HiChartPie,
+  HiInbox,
+  HiShoppingBag,
+  HiTable,
+  HiUser,
+  HiViewBoards,
+} from "react-icons/hi";
+import Logo from "../../assets/dqualizer_logo.png";
+import { Link } from "react-router-dom";
+
+export default function MenuSidebar() {
+  return (
+    <Sidebar aria-label="Sidebar with logo branding example">
+      <Sidebar.Logo href="#" img={Logo} imgAlt="dqualizer Logo"></Sidebar.Logo>
+      <Sidebar.Items>
+        <Sidebar.ItemGroup>
+          <Link className="flex" to="/dqedit/domains">
+            <Sidebar.Item icon={HiChartPie}>Domains</Sidebar.Item>
+          </Link>
+          <Link className="flex" to="/dqedit/contexts">
+            <Sidebar.Item icon={HiChartPie}>Contexts</Sidebar.Item>
+          </Link>
+        </Sidebar.ItemGroup>
+      </Sidebar.Items>
+    </Sidebar>
+  );
+}

src/components/testing/components/Burger.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function Burger() {
+  return (
+    <button
+      data-drawer-target="sidebar-multi-level-sidebar"
+      data-drawer-toggle="sidebar-multi-level-sidebar"
+      aria-controls="sidebar-multi-level-sidebar"
+      type="button"
+      class="inline-flex items-center p-2 mt-2 ml-3 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+    >
+      <span class="sr-only">Open sidebar</span>
+      <svg
+        class="w-6 h-6"
+        aria-hidden="true"
+        fill="currentColor"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          clip-rule="evenodd"
+          fill-rule="evenodd"
+          d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"
+        ></path>
+      </svg>
+    </button>
+  );
+}

src/components/testing/components/DomainList.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getAllDomains } from "../../../queries/domain";
+import { Table } from "flowbite-react";
+
+import DomainListItem from "./DomainListItem";
+export default function DomainList() {
+  const domainQuery = useQuery({
+    queryKey: ["domains"],
+    queryFn: getAllDomains,
+  });
+
+  console.log(domainQuery);
+  return (
+    <div>
+      <ul>
+        {domainQuery.data?.map((domain) => {
+          return <DomainListItem domain={domain} />;
+        })}
+      </ul>
+    </div>
+  );
+}

src/components/testing/components/DomainListItem.jsx

@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { FaLayerGroup } from "react-icons/fa";
+import { FaTrash } from "react-icons/fa";
+import { RxDropdownMenu } from "react-icons/rx";
+import { BiRightArrow, BiDownArrow } from "react-icons/bi";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  deleteDomainByName,
+  deleteSubdomainByName,
+} from "../../../queries/domain";
+
+export default function DomainListItem({ domain, isSubdomain, parent }) {
+  const [subdomainsOpen, setSubDomainsOpen] = useState(false);
+  const queryClient = useQueryClient();
+  const deleteDomainMutation = useMutation({
+    mutationKey: ["domains"],
+    mutationFn: deleteDomainByName,
+    onSuccess: () => queryClient.invalidateQueries(["domains"]),
+  });
+  const deleteSubDomainMutation = useMutation({
+    mutationKey: ["domains"],
+    mutationFn: deleteSubdomainByName,
+    onSuccess: () => queryClient.invalidateQueries(["domains"]),
+  });
+  const openSubDomains = (e) => {
+    setSubDomainsOpen((prevState) => !prevState);
+  };
+
+  const handleDelete = (parent, domain) => {
+    if (!isSubdomain) deleteDomainMutation.mutate(domain);
+    else {
+      console.log(isSubdomain);
+      deleteSubDomainMutation.mutate({ parent, domain });
+    }
+  };
+  return (
+    <>
+      <li className={isSubdomain && "ml-8"}>
+        <div className="p-2 flex border-b items-center justify-between">
+          <div className="flex items-center gap-2">
+            {domain.subdomains.length > 0 && (
+              <div className="hover:cursor-pointer" onClick={openSubDomains}>
+                {!subdomainsOpen ? <BiRightArrow /> : <BiDownArrow />}
+              </div>
+            )}
+            <FaLayerGroup />
+            <span>{domain.name}</span>
+          </div>
+          <div className="flex items-center gap-4">
+            <FaTrash onClick={() => handleDelete(parent?.name, domain.name)} />
+            <RxDropdownMenu />
+          </div>
+        </div>
+      </li>
+      {subdomainsOpen &&
+        domain.subdomains.map((subdomain) => {
+          return (
+            <DomainListItem parent={domain} domain={subdomain} isSubdomain />
+          );
+        })}
+    </>
+  );
+}

src/components/testing/components/DomainTabs.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Tabs } from "flowbite-react";
+import { HiAdjustments, HiClipboardList, HiUserCircle } from "react-icons/hi";
+import { MdDashboard } from "react-icons/md";
+import { MdStar } from "react-icons/md";
+import YourDomains from "./YourDomains";
+export default function DomainTabs() {
+  return (
+    <Tabs.Group aria-label="Tabs with underline" style="underline">
+      <Tabs.Item active icon={HiUserCircle} title="Yours">
+        <YourDomains />
+      </Tabs.Item>
+      <Tabs.Item icon={MdStar} title="Starred">
+        <p>
+          This is
+          <span className="font-medium text-gray-800 dark:text-white">
+            Dashboard tab's associated content
+          </span>
+          . Clicking another tab will toggle the visibility of this one for the
+          next. The tab JavaScript swaps classes to control the content
+          visibility and styling.
+        </p>
+      </Tabs.Item>
+    </Tabs.Group>
+  );
+}

src/components/testing/components/YourDomains.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { getAllDomains } from "../../../queries/domain";
+export default function YourDomains() {
+  const domainQuery = useQuery({
+    queryKey: ["domains"],
+    queryFn: getAllDomains,
+  });
+
+  console.log(domainQuery.data);
+  return <div>YourProjects</div>;
+}