From 34cae509be275419e42f12c28810b413de1eb04d Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Thu, 26 Oct 2023 10:53:30 +0100 Subject: [PATCH 1/3] Implement the DataTool's Details panel + design tweaks to approximate the app to the designs --- frontend/src/components/ui/button.tsx | 5 ++ .../data-tool/content/details/index.tsx | 40 +++++++++++ .../data-tool/content/details/mocked-data.ts | 67 +++++++++++++++++++ .../containers/data-tool/content/index.tsx | 13 +++- .../data-tool/content/map/index.tsx | 2 +- .../data-tool/content/table/index.tsx | 5 -- .../sidebar/details-button/index.tsx | 26 +++++++ .../containers/data-tool/sidebar/index.tsx | 12 ++-- .../src/containers/data-tool/sync-settings.ts | 15 +++++ 9 files changed, 173 insertions(+), 12 deletions(-) create mode 100644 frontend/src/containers/data-tool/content/details/index.tsx create mode 100644 frontend/src/containers/data-tool/content/details/mocked-data.ts delete mode 100644 frontend/src/containers/data-tool/content/table/index.tsx create mode 100644 frontend/src/containers/data-tool/sidebar/details-button/index.tsx create mode 100644 frontend/src/containers/data-tool/sync-settings.ts diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx index 2828b49e..669028dd 100644 --- a/frontend/src/components/ui/button.tsx +++ b/frontend/src/components/ui/button.tsx @@ -20,6 +20,10 @@ const buttonVariants = cva( // 'bg-slate-100 text-slate-900 hover:bg-slate-100/80', ghost: 'hover:bg-gray-50 hover:text-gray-900 focus-visible:ring-black', // link: 'text-slate-900 underline-offset-4 hover:underline', + white: 'bg-white border border-black', + 'sidebar-details': + 'bg-blue text-black text-black text-sm justify-start text-left text-sm hover:brightness-90 font-bold uppercase md:px-8 focus-visible:ring-black', + 'text-link': 'text-sm font-semibold uppercase underline focus-visible:ring-black', }, size: { default: 'h-10 px-4 py-2', @@ -27,6 +31,7 @@ const buttonVariants = cva( // lg: 'h-11 px-8', icon: 'h-10 w-10', 'icon-sm': 'h-6 w-6', + full: 'h-full w-full', }, }, defaultVariants: { diff --git a/frontend/src/containers/data-tool/content/details/index.tsx b/frontend/src/containers/data-tool/content/details/index.tsx new file mode 100644 index 00000000..7812978d --- /dev/null +++ b/frontend/src/containers/data-tool/content/details/index.tsx @@ -0,0 +1,40 @@ +import DashboardTable from '@/components/dashboard-table'; +import { Button } from '@/components/ui/button'; +import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings'; + +import { mockedData } from './mocked-data'; + +const DataToolDetails: React.FC = () => { + const [settings, setSettings] = useSyncDataToolContentSettings(); + + const handleOnCloseClick = () => { + setSettings({ ...settings, details: false }); + }; + + return ( +
+
+ +

+ Marine Conservation at National and Regional Levels +

+ + +
+
+ {/* NOTE: Div to test the horizontal overflow */} +
+ {/* + NOTE: We don't need a separate table component, but it's easier + to have one while using mocked data in order to keep this component clean + */} + +
+
+
+ ); +}; + +export default DataToolDetails; diff --git a/frontend/src/containers/data-tool/content/details/mocked-data.ts b/frontend/src/containers/data-tool/content/details/mocked-data.ts new file mode 100644 index 00000000..dec3825f --- /dev/null +++ b/frontend/src/containers/data-tool/content/details/mocked-data.ts @@ -0,0 +1,67 @@ +import { DashboardTableItem } from '@/components/dashboard-table'; + +export const mockedData: DashboardTableItem[] = [ + { + location: 'United Kingdom', + locationId: 'GB', + type: 'country', + signedInitiative: true, + score: 0.6, + ecosystems: ['Mangroves', 'Open ocean', 'Kelp forest'], + updated: new Date('2023-08-01'), + }, + { + location: 'Mexico', + locationId: 'MX', + type: 'country', + signedInitiative: false, + score: undefined, + ecosystems: [], + updated: new Date('2023-07-01'), + }, + { + location: 'Spain', + locationId: 'ES', + type: 'country', + signedInitiative: true, + score: 3.0, + ecosystems: ['Open ocean'], + updated: new Date('2022-10-01'), + }, + { + location: 'Brazil', + locationId: 'BR', + type: 'country', + signedInitiative: false, + score: undefined, + ecosystems: [], + updated: new Date('2023-01-01'), + }, + { + location: 'France', + locationId: 'FR', + type: 'country', + signedInitiative: true, + score: 12.7, + ecosystems: ['Mangroves'], + updated: new Date('2021-12-01'), + }, + { + location: 'Netherlands', + locationId: 'NL', + type: 'country', + signedInitiative: true, + score: 1.6, + ecosystems: ['Kelp forest', 'Open ocean'], + updated: new Date('2022-02-01'), + }, + { + location: 'Worldwide', + locationId: 'worldwide', + type: 'region', + signedInitiative: true, + score: 1.6, + ecosystems: ['Coral reefs', 'Kelp forest', 'Open ocean'], + updated: new Date('2023-04-01'), + }, +]; diff --git a/frontend/src/containers/data-tool/content/index.tsx b/frontend/src/containers/data-tool/content/index.tsx index ee19afe2..a43ff7e3 100644 --- a/frontend/src/containers/data-tool/content/index.tsx +++ b/frontend/src/containers/data-tool/content/index.tsx @@ -1,8 +1,17 @@ +import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings'; + +import Details from './details'; import Map from './map'; -// import Table from './table'; const DataToolContent: React.FC = () => { - return ; + const [{ details }] = useSyncDataToolContentSettings(); + + return ( +
+ + {details &&
} +
+ ); }; export default DataToolContent; diff --git a/frontend/src/containers/data-tool/content/map/index.tsx b/frontend/src/containers/data-tool/content/map/index.tsx index 1672084c..eb1db5c1 100644 --- a/frontend/src/containers/data-tool/content/map/index.tsx +++ b/frontend/src/containers/data-tool/content/map/index.tsx @@ -85,7 +85,7 @@ const DataToolMap: React.FC = () => { ); return ( -
+
{ - return
Table
; -}; - -export default DatatoolTable; diff --git a/frontend/src/containers/data-tool/sidebar/details-button/index.tsx b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx new file mode 100644 index 00000000..20f849f4 --- /dev/null +++ b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx @@ -0,0 +1,26 @@ +import { ArrowRight } from 'lucide-react'; + +import { Button } from '@/components/ui/button'; +import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings'; + +const DetailsButton: React.FC = () => { + const [settings, setSettings] = useSyncDataToolContentSettings(); + + const handleButtonClick = () => { + setSettings({ ...settings, details: true }); + }; + + return ( + + ); +}; + +export default DetailsButton; diff --git a/frontend/src/containers/data-tool/sidebar/index.tsx b/frontend/src/containers/data-tool/sidebar/index.tsx index 54dcd2d1..56f74f9c 100644 --- a/frontend/src/containers/data-tool/sidebar/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/index.tsx @@ -8,6 +8,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/component import { cn } from '@/lib/classnames'; import { locationAtom } from '@/store/location'; +import DetailsButton from './details-button'; import LocationSelector from './location-selector'; import Widgets from './widgets'; @@ -25,8 +26,8 @@ const DataToolSidebar: React.FC = () => { -
+

{location.name}

-
+
+
+ +
); diff --git a/frontend/src/containers/data-tool/sync-settings.ts b/frontend/src/containers/data-tool/sync-settings.ts new file mode 100644 index 00000000..982b1268 --- /dev/null +++ b/frontend/src/containers/data-tool/sync-settings.ts @@ -0,0 +1,15 @@ +import { useQueryState } from 'next-usequerystate'; +import { parseAsJson } from 'next-usequerystate/parsers'; + +const DEFAULT_SYNC_CONTENT_SETTINGS: { + details: boolean; +} = { + details: false, +}; + +export const useSyncDataToolContentSettings = () => { + return useQueryState( + 'content', + parseAsJson().withDefault(DEFAULT_SYNC_CONTENT_SETTINGS) + ); +}; From ac678e78c01105c059b522eb4a7df8cf1f61769f Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 31 Oct 2023 10:46:46 +0000 Subject: [PATCH 2/3] Rename sync-settings content settings from details to showDetails --- frontend/src/containers/data-tool/content/details/index.tsx | 2 +- frontend/src/containers/data-tool/content/index.tsx | 4 ++-- .../src/containers/data-tool/sidebar/details-button/index.tsx | 2 +- frontend/src/containers/data-tool/sync-settings.ts | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/containers/data-tool/content/details/index.tsx b/frontend/src/containers/data-tool/content/details/index.tsx index 7812978d..f89f17a7 100644 --- a/frontend/src/containers/data-tool/content/details/index.tsx +++ b/frontend/src/containers/data-tool/content/details/index.tsx @@ -8,7 +8,7 @@ const DataToolDetails: React.FC = () => { const [settings, setSettings] = useSyncDataToolContentSettings(); const handleOnCloseClick = () => { - setSettings({ ...settings, details: false }); + setSettings({ ...settings, showDetails: false }); }; return ( diff --git a/frontend/src/containers/data-tool/content/index.tsx b/frontend/src/containers/data-tool/content/index.tsx index a43ff7e3..ee08a3f0 100644 --- a/frontend/src/containers/data-tool/content/index.tsx +++ b/frontend/src/containers/data-tool/content/index.tsx @@ -4,12 +4,12 @@ import Details from './details'; import Map from './map'; const DataToolContent: React.FC = () => { - const [{ details }] = useSyncDataToolContentSettings(); + const [{ showDetails }] = useSyncDataToolContentSettings(); return (
- {details &&
} + {showDetails &&
}
); }; diff --git a/frontend/src/containers/data-tool/sidebar/details-button/index.tsx b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx index 20f849f4..24dde3e2 100644 --- a/frontend/src/containers/data-tool/sidebar/details-button/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx @@ -7,7 +7,7 @@ const DetailsButton: React.FC = () => { const [settings, setSettings] = useSyncDataToolContentSettings(); const handleButtonClick = () => { - setSettings({ ...settings, details: true }); + setSettings({ ...settings, showDetails: true }); }; return ( diff --git a/frontend/src/containers/data-tool/sync-settings.ts b/frontend/src/containers/data-tool/sync-settings.ts index 982b1268..f3122ea4 100644 --- a/frontend/src/containers/data-tool/sync-settings.ts +++ b/frontend/src/containers/data-tool/sync-settings.ts @@ -2,9 +2,9 @@ import { useQueryState } from 'next-usequerystate'; import { parseAsJson } from 'next-usequerystate/parsers'; const DEFAULT_SYNC_CONTENT_SETTINGS: { - details: boolean; + showDetails: boolean; } = { - details: false, + showDetails: false, }; export const useSyncDataToolContentSettings = () => { From af01f8c2fb0eedd6d7f9523e55bb97c6b208e688 Mon Sep 17 00:00:00 2001 From: Simao Rodrigues Date: Tue, 31 Oct 2023 10:49:11 +0000 Subject: [PATCH 3/3] Improve how content settings are set in order to prevent unnecessary renders --- frontend/src/containers/data-tool/content/details/index.tsx | 4 ++-- .../src/containers/data-tool/sidebar/details-button/index.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/containers/data-tool/content/details/index.tsx b/frontend/src/containers/data-tool/content/details/index.tsx index f89f17a7..b75cf083 100644 --- a/frontend/src/containers/data-tool/content/details/index.tsx +++ b/frontend/src/containers/data-tool/content/details/index.tsx @@ -5,10 +5,10 @@ import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-sett import { mockedData } from './mocked-data'; const DataToolDetails: React.FC = () => { - const [settings, setSettings] = useSyncDataToolContentSettings(); + const [, setSettings] = useSyncDataToolContentSettings(); const handleOnCloseClick = () => { - setSettings({ ...settings, showDetails: false }); + setSettings((prevSettings) => ({ ...prevSettings, showDetails: false })); }; return ( diff --git a/frontend/src/containers/data-tool/sidebar/details-button/index.tsx b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx index 24dde3e2..f3cab1ed 100644 --- a/frontend/src/containers/data-tool/sidebar/details-button/index.tsx +++ b/frontend/src/containers/data-tool/sidebar/details-button/index.tsx @@ -4,10 +4,10 @@ import { Button } from '@/components/ui/button'; import { useSyncDataToolContentSettings } from '@/containers/data-tool/sync-settings'; const DetailsButton: React.FC = () => { - const [settings, setSettings] = useSyncDataToolContentSettings(); + const [, setSettings] = useSyncDataToolContentSettings(); const handleButtonClick = () => { - setSettings({ ...settings, showDetails: true }); + setSettings((prevSettings) => ({ ...prevSettings, showDetails: true })); }; return (