fixing the orgTag (#206)

* fix: add the traditional close sidebar button * Update map.json Added String for Unsubscribe Mailnotification * New translations map.json (French) * New translations map.json (Italian) * New translations map.json (Dutch) * Update source file map.json * fix (#205): send the org_tag to the backend * fix: change the spelling of org_tag to orgTag --------- Co-authored-by: Helmut Wolman <helmut@bildungsagenten.com> Co-authored-by: Map of Tomorrow <105020802+mapoftomorrow@users.noreply.github.com>
kartevonmorgen · Mar 28, 2024 · 0d849aa · 0d849aa
1 parent 3a6c800
commit 0d849aa
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 141 deletions.
diff --git a/components/SearchEventsListener.tsx b/components/SearchEventsListener.tsx
@@ -39,6 +39,7 @@ const SearchEventsListener: FC = () => {
     start_min: startMinParam,
     start_max: startMaxParam,
     end_min: endMinParam,
+    orgTag: orgTagParam,
   } = query
 
   const { slug } = query
@@ -84,7 +85,8 @@ const SearchEventsListener: FC = () => {
     limit = limit !== 0 ? limit : undefined
 
     const typeNames = getTypeNamesFromRouterOrKnownCategoryNamesIfEmpty(router)
-
+
+    const orgTag: string = convertQueryParamToString(orgTagParam)
     const fixedTags: string[] = convertQueryParamToArray(fixedTagsParam)
     const tags: string[] = convertQueryParamToArray(tagsParam)
     const compoundTags = [...fixedTags, ...tags]
@@ -101,6 +103,11 @@ const SearchEventsListener: FC = () => {
         categories: toString(entryCategories),
         limit: limit,
       }
+
+      if (orgTag !== '') {
+        searchEntriesRequestDTO.org_tag = orgTag
+      }
+
       dispatch(fetchEntries(searchEntriesRequestDTO))
     } else {
       dispatch(emptyEntries())

diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
@@ -1,23 +1,27 @@
-import {FC, useEffect, useState} from 'react'
+import {FC, useEffect, useState, useMemo } from 'react'
+import dynamic from 'next/dynamic'
 import {useRouter} from 'next/router'
-import {Drawer} from 'antd'
-import { LeftOutlined } from '@ant-design/icons'
+import { Drawer } from 'antd'
 import SidebarContent from './SidebarContent'
+import SidebarCollapseButton from './SidebarCollapseButton'
 import {convertQueryParamToString} from '../utils/utils'
 import {isSidebarStatusShown} from '../dtos/SidebarStatus'
 import {useSidebar} from '../hooks/useResponsive'
 import { closeSidebar } from './SidebarCollapseButton'
 
 
-
 interface SidebarProps {
   title: String
 }
 
 
 const Sidebar: FC<SidebarProps> = (props) => {
-  const { title } = props
-
+  const ClientDrawer = useMemo(() => dynamic(
+    () => Promise.resolve(Drawer),
+    {
+      ssr: false,
+    },
+  ), [])
 
   const router = useRouter()
   const {
@@ -37,10 +41,11 @@ const Sidebar: FC<SidebarProps> = (props) => {
   }, [shouldOpenSidebar])
 
   return (
-    <Drawer
+    <ClientDrawer
       autoFocus={false}
+      closable={false}
+      forceRender
       open={isSidebarOpen}
-      closeIcon={<LeftOutlined/>}
       placement="left"
       mask={false}
       rootStyle={{
@@ -49,25 +54,23 @@ const Sidebar: FC<SidebarProps> = (props) => {
         display: 'flex',
         overflowX: 'clip',
         overflowY: 'scroll',
-        position: 'absolute',
       }}
       getContainer={false}
       width={isSidebarOpen ? sidebarWidth : 0}
       styles={{
         body: {
           padding: 0
         },
-        header: {
-          padding: 6,
+        wrapper: {
+          display: 'block'
         }
       }}
-      title={title}
-      onClose={() => closeSidebar(router)}
     >
+      <SidebarCollapseButton />
       {isSidebarOpen && (
         <SidebarContent/>
       )}
-    </Drawer>
+    </ClientDrawer>
   )
 }
 

diff --git a/components/SidebarCollapseButton.tsx b/components/SidebarCollapseButton.tsx
@@ -76,23 +76,33 @@ const SidebarCollapseButtonIcon: FC<CollapseSidebarButtonIcon> = (props) => {
   return <FontAwesomeIcon icon='chevron-left' />
 }
 
-const SidebarCollapseButton: FC = () => {
+interface SidebarCollapseButtonProps {
+  isOnMap?: boolean
+}
+
+const SidebarCollapseButton: FC<SidebarCollapseButtonProps> = (props) => {
+  const {isOnMap} = props
+
   const router = useRouter()
+  const { query } = router
+  const { sidebar: sidebarParam } = query
+  const isSidebarOpen = isSidebarStatusShown(convertQueryParamToString(sidebarParam))
 
   return (
     <Button
       icon={
-        <SidebarCollapseButtonIcon showOpenIcon />
+        <SidebarCollapseButtonIcon showOpenIcon={!isSidebarOpen} />
       }
-      onClick={toggleSidebarState(router, false)}
+      onClick={toggleSidebarState(router, isSidebarOpen)}
       size='middle'
       style={{
         height: 68,
         width: 36,
-        position: 'fixed',
+        position: 'absolute',
         top: 52,
-        left: 0,
-        zIndex: 500,
+        transform: 'translateX(100%)',
+        right: 0,
+        zIndex: 400,
         visibility: 'visible',
         display: 'block'
       }}
@@ -101,4 +111,9 @@ const SidebarCollapseButton: FC = () => {
 }
 
 
+SidebarCollapseButton.defaultProps = {
+  isOnMap: false
+}
+
+
 export default SidebarCollapseButton
diff --git a/locales/en/map.json b/locales/en/map.json
@@ -352,7 +352,8 @@
     "loginForPilots": "Login",
     "contact": "Contact",
     "aboutUs": "About",
-    "privacy": "Privacy"
+    "privacy": "Privacy",
+    "UnsubscribeMailnotification": "Unsubscirbe Mailnotification"
   },
   "mapColorMode": {
     "colorful": "Colorful",

diff --git a/locales/fr/map.json b/locales/fr/map.json
@@ -352,7 +352,8 @@
     "loginForPilots": "Login",
     "contact": "Contact",
     "aboutUs": "About",
-    "privacy": "Privacy"
+    "privacy": "Privacy",
+    "UnsubscribeMailnotification": "Unsubscirbe Mailnotification"
   },
   "mapColorMode": {
     "colorful": "Colorée",

diff --git a/locales/it/map.json b/locales/it/map.json
@@ -352,7 +352,8 @@
     "loginForPilots": "Login",
     "contact": "Contact",
     "aboutUs": "About",
-    "privacy": "Privacy"
+    "privacy": "Privacy",
+    "UnsubscribeMailnotification": "Unsubscirbe Mailnotification"
   },
   "mapColorMode": {
     "colorful": "Colorful",

diff --git a/locales/nl/map.json b/locales/nl/map.json
@@ -352,7 +352,8 @@
     "loginForPilots": "Login",
     "contact": "Contact",
     "aboutUs": "About",
-    "privacy": "Privacy"
+    "privacy": "Privacy",
+    "UnsubscribeMailnotification": "Unsubscirbe Mailnotification"
   },
   "mapColorMode": {
     "colorful": "Colorful",

diff --git a/package.json b/package.json
@@ -25,7 +25,7 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.10",
     "@types/valid-url": "^1.0.4",
-    "antd": "^5.12.2",
+    "antd": "^5.14.0",
     "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
     "eslint": "^8.30.0",
@@ -70,6 +70,7 @@
     "opening_hours": "^3.8.0",
     "qs": "^6.11.2",
     "rc-drawer": "^6.5.2",
+    "rc-picker": "^4.0.0-alpha.43",
     "react-copy-to-clipboard": "^5.1.0",
     "react-leaflet": "^4.2.1",
     "react-lowlight": "^3.0.0",