From 1c7df74b2f94c6eb2524ac4f1cabe1ca748ee823 Mon Sep 17 00:00:00 2001 From: AQIB-NAWAB Date: Sun, 9 Mar 2025 00:26:26 +0500 Subject: [PATCH 1/9] add counter to the dropDown --- components/Sidebar.tsx | 1037 +++----------------- pages/tools/components/ui/DropdownMenu.tsx | 39 +- 2 files changed, 158 insertions(+), 918 deletions(-) diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx index ad52e2ab8..c66b0e265 100644 --- a/components/Sidebar.tsx +++ b/components/Sidebar.tsx @@ -1,925 +1,134 @@ -import { getLayout as getSiteLayout } from './SiteLayout'; -import React, { useEffect, useState } from 'react'; -import { useRouter } from 'next/router'; -import Link from 'next/link'; -import { HOST } from '~/lib/config'; -import classnames from 'classnames'; -import { SegmentHeadline } from './Layout'; -import extractPathWithoutFragment from '~/lib/extractPathWithoutFragment'; -import CarbonAds from './CarbonsAds'; -import { useTheme } from 'next-themes'; -import ExternalLinkIcon from '../public/icons/external-link-black.svg'; -import Image from 'next/image'; -const DocLink = ({ - uri, - label, - onClick, - setOpen, -}: { - uri: string; - label: string | React.ReactNode; - onClick?: () => void; - setOpen: (open: boolean) => void; -}) => { - const router = useRouter(); - const url = new URL(`${router.asPath}`, HOST); - url.search = ''; - url.hash = ''; - const stringUrl = url.toString().substr(HOST.length, Infinity); - const isActive = uri === extractPathWithoutFragment(stringUrl); - return ( - { - if (onClick) onClick(); - setOpen(false); - }} - > - {label} - - ); -}; - -const DocLinkBlank = ({ - uri, - label, - onClick, - setOpen, -}: { - uri: string; - label: string | React.ReactNode; - onClick?: () => void; - setOpen: (open: boolean) => void; -}) => { - const router = useRouter(); - const url = new URL(`${router.asPath}`, HOST); - url.search = ''; - url.hash = ''; - const stringUrl = url.toString().substr(HOST.length, Infinity); - const isActive = uri === extractPathWithoutFragment(stringUrl); - return ( - { - if (onClick) onClick(); - setOpen(false); - }} - style={{ - position: 'relative', - paddingRight: '1.25em', - }} - > - {label} - - - - - ); -}; -const SegmentSubtitle = ({ label }: { label: string }) => { - return ( -
- {label} -
- ); -}; -const getDocsPath = [ - '/docs', - '/overview/what-is-jsonschema', - '/overview/sponsors', - '/overview/case-studies', - '/overview/similar-technologies', - '/overview/use-cases', - '/overview/code-of-conduct', - '/overview/faq', - '/overview/roadmap', -]; -const getStartedPath = [ - '/learn', - '/learn/json-schema-examples', - '/learn/file-system', - '/learn/miscellaneous-examples', - '/learn/getting-started-step-by-step', - '/understanding-json-schema/about', - '/understanding-json-schema/basics', - '/learn/glossary', -]; -const getGuidesPath = [ - '/learn/guides', - '/implementers', - '/implementers/interfaces', -]; -const getReferencePath = [ - '/understanding-json-schema', - '/understanding-json-schema/keywords', - '/understanding-json-schema/conventions', - '/understanding-json-schema/credits', - '/understanding-json-schema/structuring', - '/understanding-json-schema/reference/annotations', - '/understanding-json-schema/reference/array', - '/understanding-json-schema/reference/boolean', - '/understanding-json-schema/reference/combining', - '/understanding-json-schema/reference/comments', - '/understanding-json-schema/reference/conditionals', - '/understanding-json-schema/reference/const', - '/understanding-json-schema/reference/enum', - '/understanding-json-schema/reference/composition', - '/understanding-json-schema/reference/metadata', - '/understanding-json-schema/reference/non_json_data', - '/understanding-json-schema/reference/null', - '/understanding-json-schema/reference/numeric', - '/understanding-json-schema/reference/object', - '/understanding-json-schema/reference/regular_expressions', - '/understanding-json-schema/reference/schema', - '/understanding-json-schema/reference/string', - '/understanding-json-schema/reference/type', - '/understanding-json-schema/reference/generic', - '/understanding-json-schema/reference', -]; -const getSpecificationPath = [ - '/draft/2020-12', - '/draft/2019-09', - '/draft-07', - '/draft-06', - '/draft-05', - '/specification-links', - '/specification/migration', - '/specification/release-notes', - '/specification/json-hyper-schema', - '/specification', - '/specification-links', -]; - -export const SidebarLayout = ({ children }: { children: React.ReactNode }) => { - const router = useRouter(); - const [open, setOpen] = useState(false); - const [rotateChevron, setRotateChevron] = useState(false); - const handleRotate = () => setRotateChevron(!rotateChevron); - const rotate = rotateChevron ? 'rotate(180deg)' : 'rotate(0)'; - const pathWtihoutFragment = extractPathWithoutFragment(router.asPath); - useEffect(() => { - if (window) { - window.addEventListener('resize', () => { - if (window.innerWidth > 1024) { - setOpen(false); - } - }); - } - }, [typeof window !== 'undefined']); - return ( -
-
-
-
e.stopPropagation()} - onClick={(e) => { - e.stopPropagation(); - handleRotate(); - setOpen(!open); - }} - > - {getDocsPath.includes(pathWtihoutFragment) && ( -

Introduction

- )} - {getStartedPath.includes(pathWtihoutFragment) && ( -

Get started

- )} - {getGuidesPath.includes(pathWtihoutFragment) && ( -

Guides

- )} - {getReferencePath.includes(pathWtihoutFragment) && ( -

Reference

- )} - {getSpecificationPath.includes(pathWtihoutFragment) && ( -

Specification

- )} - {router.pathname === null && ( -

Docs

- )} - - - -
-
- -
-
- -
-
-
-
-
- - -
-
-
- {children} -
-
-
-
- ); -}; - -export const DocsNav = ({ - setOpen, -}: { - open: boolean; - setOpen: (open: boolean) => void; -}) => { - const router = useRouter(); - - /* eslint-disable no-constant-condition */ - const [active, setActive] = useState({ - getDocs: false, - getStarted: false, - getGuides: false, - getReference: false, - getSpecification: false, - }); - useEffect(() => { - const pathWtihoutFragment = extractPathWithoutFragment(router.asPath); - const newActive = { - getDocs: false, - getStarted: false, - getGuides: false, - getReference: false, - getSpecification: false, - }; - if (getDocsPath.includes(pathWtihoutFragment)) { - newActive.getDocs = true; - } else if (getStartedPath.includes(pathWtihoutFragment)) { - newActive.getStarted = true; - setActive({ ...active, getStarted: true }); - } else if (getReferencePath.includes(pathWtihoutFragment)) { - newActive.getReference = true; - } else if (getSpecificationPath.includes(pathWtihoutFragment)) { - newActive.getSpecification = true; - } else if (getGuidesPath.includes(pathWtihoutFragment)) { - newActive.getGuides = true; - } - - setActive(newActive); - }, [router.asPath]); - - const handleClickDoc = () => { - setActive({ - getDocs: !active.getDocs, - getStarted: false, - getReference: false, - getSpecification: false, - getGuides: false, - }); - }; - - const handleClickGet = () => { - setActive({ - getDocs: false, - getStarted: !active.getStarted, - getReference: false, - getSpecification: false, - getGuides: false, - }); - }; - - const handleClickReference = () => { - setActive({ - getDocs: false, - getStarted: false, - getReference: !active.getReference, - getSpecification: false, - getGuides: false, +import React, { Dispatch, SetStateAction, useRef } from 'react'; +import FilterIcon from '~/public/icons/filter.svg'; +import DropdownMenu from './ui/DropdownMenu'; +import Checkbox from './ui/Checkbox'; +import SearchBar from './SearchBar'; +import toTitleCase from '../lib/toTitleCase'; +import type { Transform } from '../hooks/useToolsTransform'; +import type { FilterCriteriaFields } from '../index.page'; +import { postAnalytics } from '../lib/postAnalytics'; + +interface SidebarProps { + filterCriteria: Record; + transform: Transform; + setTransform: Dispatch>; + resetTransform: () => void; + setIsSidebarOpen: Dispatch>; +} + +export default function Sidebar({ + filterCriteria, + transform, + setTransform, + resetTransform, + setIsSidebarOpen, +}: SidebarProps) { + const filterFormRef = useRef(null); + + const filters = [ + { label: 'Language', accessorKey: 'languages' }, + { label: 'Tooling Type', accessorKey: 'toolingTypes' }, + { label: 'Environment', accessorKey: 'environments' }, + { label: 'Dialect', accessorKey: 'drafts' }, + { label: 'License', accessorKey: 'licenses' }, + ]; + + const applyFilters = (e: React.FormEvent) => { + e.preventDefault(); + if (!filterFormRef.current) return; + const formData = new FormData(filterFormRef.current); + setTransform((prev) => { + const newTransform = { + query: (formData.get('query') as Transform['query']) || '', + sortBy: prev.sortBy || 'name', + sortOrder: prev.sortOrder || 'ascending', + groupBy: prev.groupBy || 'toolingTypes', + languages: formData.getAll('languages').map((value) => value as string), + licenses: formData.getAll('licenses').map((value) => value as string), + drafts: formData + .getAll('drafts') + .map((value) => value) as Transform['drafts'], + toolingTypes: formData + .getAll('toolingTypes') + .map((value) => value as string), + environments: formData + .getAll('environments') + .map((value) => value as string), + showObsolete: + (formData.get('showObsolete') as string) === 'showObsolete' + ? 'true' + : 'false', + } satisfies Transform; + postAnalytics({ eventType: 'query', eventPayload: newTransform }); + return newTransform; }); + setIsSidebarOpen((prev) => !prev); }; - const handleClickGuides = () => { - setActive({ - getDocs: false, - getStarted: false, - getGuides: !active.getGuides, - getReference: false, - getSpecification: false, - }); - }; - - const handleClickSpec = () => { - setActive({ - getDocs: false, - getStarted: false, - getGuides: false, - getReference: false, - getSpecification: !active.getSpecification, - }); - }; - - const rotate = active.getDocs ? 'rotate(180deg)' : 'rotate(0)'; - const rotateG = active.getStarted ? 'rotate(180deg)' : 'rotate(0)'; - const rotateR = active.getReference ? 'rotate(180deg)' : 'rotate(0)'; - const rotateSpec = active.getSpecification ? 'rotate(180deg)' : 'rotate(0)'; - - const { resolvedTheme } = useTheme(); - - const [learn_icon, setLearn_icon] = useState(''); - const [reference_icon, setReference_icon] = useState(''); - const [spec_icon, setSpec_icon] = useState(''); - const [overview_icon, setOverview_icon] = useState(''); - const [guides_icon, setGuides_icon] = useState(''); - useEffect(() => { - if (resolvedTheme === 'dark') { - setOverview_icon('/icons/eye-dark.svg'); - setLearn_icon('/icons/compass-dark.svg'); - setReference_icon('/icons/book-dark.svg'); - setSpec_icon('/icons/clipboard-dark.svg'); - setGuides_icon('/icons/grad-cap-dark.svg'); - } else { - setOverview_icon('/icons/eye.svg'); - setLearn_icon('/icons/compass.svg'); - setReference_icon('/icons/book.svg'); - setSpec_icon('/icons/clipboard.svg'); - setGuides_icon('/icons/grad-cap.svg'); + const clearFilters = () => { + if (filterFormRef.current) { + filterFormRef.current.reset(); } - }, [resolvedTheme]); + resetTransform(); + setIsSidebarOpen((prev) => !prev); + }; return ( -