From c9eb1d1e36f8288099053c2ed18e62f8a48e0dd1 Mon Sep 17 00:00:00 2001 From: Daniel Date: Wed, 16 Aug 2023 14:30:41 +0200 Subject: [PATCH] #5 df: merge conflict v16 --- src/components/testing/Breadcrumb.jsx | 52 +++++++++++++++ src/components/testing/MenuSidebar.jsx | 32 ++++++++++ src/components/testing/components/Burger.jsx | 28 +++++++++ .../testing/components/DomainList.jsx | 23 +++++++ .../testing/components/DomainListItem.jsx | 63 +++++++++++++++++++ .../testing/components/DomainTabs.jsx | 26 ++++++++ .../testing/components/YourDomains.jsx | 12 ++++ src/pages/Testing.tsx | 15 ----- 8 files changed, 236 insertions(+), 15 deletions(-) create mode 100644 src/components/testing/Breadcrumb.jsx create mode 100644 src/components/testing/MenuSidebar.jsx create mode 100644 src/components/testing/components/Burger.jsx create mode 100644 src/components/testing/components/DomainList.jsx create mode 100644 src/components/testing/components/DomainListItem.jsx create mode 100644 src/components/testing/components/DomainTabs.jsx create mode 100644 src/components/testing/components/YourDomains.jsx delete mode 100644 src/pages/Testing.tsx diff --git a/src/components/testing/Breadcrumb.jsx b/src/components/testing/Breadcrumb.jsx new file mode 100644 index 0000000..a27395f --- /dev/null +++ b/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 ( + + ); +} diff --git a/src/components/testing/MenuSidebar.jsx b/src/components/testing/MenuSidebar.jsx new file mode 100644 index 0000000..9526fda --- /dev/null +++ b/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 ( + + + + + + Domains + + + Contexts + + + + + ); +} diff --git a/src/components/testing/components/Burger.jsx b/src/components/testing/components/Burger.jsx new file mode 100644 index 0000000..3c76955 --- /dev/null +++ b/src/components/testing/components/Burger.jsx @@ -0,0 +1,28 @@ +import React from "react"; + +export default function Burger() { + return ( + + ); +} diff --git a/src/components/testing/components/DomainList.jsx b/src/components/testing/components/DomainList.jsx new file mode 100644 index 0000000..0d03a9a --- /dev/null +++ b/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 ( +
+ +
+ ); +} diff --git a/src/components/testing/components/DomainListItem.jsx b/src/components/testing/components/DomainListItem.jsx new file mode 100644 index 0000000..d371a77 --- /dev/null +++ b/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 ( + <> +
  • +
    +
    + {domain.subdomains.length > 0 && ( +
    + {!subdomainsOpen ? : } +
    + )} + + {domain.name} +
    +
    + handleDelete(parent?.name, domain.name)} /> + +
    +
    +
    • + {subdomainsOpen && + domain.subdomains.map((subdomain) => { + return ( + + ); + })} + + ); +} diff --git a/src/components/testing/components/DomainTabs.jsx b/src/components/testing/components/DomainTabs.jsx new file mode 100644 index 0000000..8d1ff88 --- /dev/null +++ b/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 ( + + + + + +

    + This is + + Dashboard tab's associated content + + . 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. +

    +     +     + ); +} diff --git a/src/components/testing/components/YourDomains.jsx b/src/components/testing/components/YourDomains.jsx new file mode 100644 index 0000000..ef8b96d --- /dev/null +++ b/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
    YourProjects
    ; +} diff --git a/src/pages/Testing.tsx b/src/pages/Testing.tsx deleted file mode 100644 index a9c418c..0000000 --- a/src/pages/Testing.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { useQuery } from "@tanstack/react-query"; -import React from "react"; -import { useState } from "react"; - -import werkstatt from "../data/werkstatt.json"; -import loadtestSpecs from "../data/loadtest-specs.json"; - -export default function Testing() { - - return ( -
    - -
    - ); -}