From 9a0de1b8eecb643938a593f802abfda9a9e36c58 Mon Sep 17 00:00:00 2001 From: hunxjunedo Date: Thu, 14 Nov 2024 20:35:39 +0500 Subject: [PATCH 1/3] feat: add theme param url behaviour with react-router --- src/components/Themes/ThemeCard.tsx | 15 ++++---- src/pages/Themes.tsx | 54 ++++++++++++++++++++++++++++- 2 files changed, 59 insertions(+), 10 deletions(-) diff --git a/src/components/Themes/ThemeCard.tsx b/src/components/Themes/ThemeCard.tsx index bb3a7df..47e3bfc 100644 --- a/src/components/Themes/ThemeCard.tsx +++ b/src/components/Themes/ThemeCard.tsx @@ -1,11 +1,10 @@ -import React, { useState } from "react"; +import React from "react"; import Skeleton from "react-loading-skeleton"; import { Theme } from "../../interfaces/Theme"; import { useTranslation } from 'react-i18next'; import "../../styles/theme_card.css"; -import ThemeModal from "./ThemeModal"; import { InfoIcon } from "lucide-react"; type Props = { @@ -13,17 +12,15 @@ type Props = { isPreviewed: boolean; onPreview: (name: string) => void; isLoading: boolean; + onViewDetails: (theme: Theme) => void }; /** * Theme card component to hold the details of each theme in the themes page. */ -const ThemeCard: React.FC = ({ theme, isPreviewed, onPreview, isLoading }) => { - const [viewDetails, setViewDetails] = useState(false); +const ThemeCard: React.FC = ({ theme, isPreviewed, onViewDetails, onPreview, isLoading }) => { + - const onViewDetails = () => { - setViewDetails(true); - }; const onClickPreview = () => { onPreview(theme.name) @@ -68,7 +65,7 @@ const ThemeCard: React.FC = ({ theme, isPreviewed, onPreview, isLoading }
- @@ -79,7 +76,7 @@ const ThemeCard: React.FC = ({ theme, isPreviewed, onPreview, isLoading }
- setViewDetails(false)} /> + ); }; diff --git a/src/pages/Themes.tsx b/src/pages/Themes.tsx index 77300eb..6432351 100644 --- a/src/pages/Themes.tsx +++ b/src/pages/Themes.tsx @@ -11,6 +11,9 @@ import ThemePreview from '../components/Themes/ThemePreview'; import { InfoIcon } from 'lucide-react'; import { useTranslation } from 'react-i18next'; +import ThemeModal from '@/components/Themes/ThemeModal'; +import { useEffect } from 'react'; +import { Theme } from '@/interfaces/Theme'; /** * Displays themes for users to search, browse and rate. @@ -26,6 +29,8 @@ const Themes: React.FC = () => { () => searchParams.get('searchQuery') || '' ); + const [focusedTheme, setFocusedTheme] = useState(false) + // id of themes being selected to be preview (and applied to the interactive chatbot) const [previewIds, setPreviewIds] = useState([]); @@ -41,7 +46,47 @@ const Themes: React.FC = () => { searchQuery ); - console.log(themes); + useEffect(()=>{ + //to update the current focused theme based on url and fetched themes + const focusedThemeId = searchParams.get('theme') || ''; + if(focusedThemeId == ''){ + return; + } + const focusedThemeObject = themes.find(theme => theme.id === focusedThemeId); + if(!focusedThemeObject){ + return + } + setFocusedTheme(focusedThemeObject as unknown as boolean) + + }, [themes]) + + /** + * Handles the closinf of modal and cleanup of url + * + */ + const modalCloseHandler = () => { + //first update the search params + setSearchParams(params => { + params.delete('theme') + return params; + }) + return false; + } + + /** + * Handles opening of the modal for a theme, and updates the url accordingly + * + * @param theme the theme to focus on + */ + const modalOpenHandler = (theme: Theme) => { + setSearchParams(params => { + params.set('theme', theme.id) + return params; + }) + return theme as unknown as boolean + } + + /** * Handles setting of search query when user hits enter. * @@ -75,6 +120,7 @@ const Themes: React.FC = () => { return
Error: {error.message}
; } + return ( // 92vh comes from 100vh - 8vh (the height of the navbar)
@@ -107,11 +153,17 @@ const Themes: React.FC = () => { isPreviewed={previewIds.includes(theme.id)} onPreview={() => onPreview(theme.id)} isLoading={loading} + onViewDetails={(theme) => (setFocusedTheme(modalOpenHandler(theme)))} /> ); })}
+ {focusedTheme && (setFocusedTheme(modalCloseHandler))} + theme={focusedTheme as unknown as Theme} + />} {/* Drawer Section */} Date: Sat, 16 Nov 2024 13:02:02 +0500 Subject: [PATCH 2/3] remove double assertions and cleanup --- src/pages/Themes.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/pages/Themes.tsx b/src/pages/Themes.tsx index 6432351..4a89cc5 100644 --- a/src/pages/Themes.tsx +++ b/src/pages/Themes.tsx @@ -29,7 +29,7 @@ const Themes: React.FC = () => { () => searchParams.get('searchQuery') || '' ); - const [focusedTheme, setFocusedTheme] = useState(false) + const [focusedTheme, setFocusedTheme] = useState(null) // id of themes being selected to be preview (and applied to the interactive chatbot) const [previewIds, setPreviewIds] = useState([]); @@ -56,7 +56,7 @@ const Themes: React.FC = () => { if(!focusedThemeObject){ return } - setFocusedTheme(focusedThemeObject as unknown as boolean) + setFocusedTheme(focusedThemeObject) }, [themes]) @@ -70,7 +70,7 @@ const Themes: React.FC = () => { params.delete('theme') return params; }) - return false; + return null; } /** @@ -83,7 +83,7 @@ const Themes: React.FC = () => { params.set('theme', theme.id) return params; }) - return theme as unknown as boolean + return theme } @@ -159,11 +159,11 @@ const Themes: React.FC = () => { })} - {focusedTheme && (setFocusedTheme(modalCloseHandler))} - theme={focusedTheme as unknown as Theme} - />} + theme={focusedTheme as Theme} + /> {/* Drawer Section */} Date: Sun, 17 Nov 2024 18:26:13 +0500 Subject: [PATCH 3/3] some small changes --- src/pages/Themes.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/Themes.tsx b/src/pages/Themes.tsx index 4a89cc5..1fd7cfd 100644 --- a/src/pages/Themes.tsx +++ b/src/pages/Themes.tsx @@ -49,11 +49,11 @@ const Themes: React.FC = () => { useEffect(()=>{ //to update the current focused theme based on url and fetched themes const focusedThemeId = searchParams.get('theme') || ''; - if(focusedThemeId == ''){ + if (focusedThemeId == '') { return; } const focusedThemeObject = themes.find(theme => theme.id === focusedThemeId); - if(!focusedThemeObject){ + if (!focusedThemeObject) { return } setFocusedTheme(focusedThemeObject) @@ -161,7 +161,7 @@ const Themes: React.FC = () => { (setFocusedTheme(modalCloseHandler))} + onClose={()=>(setFocusedTheme(modalCloseHandler()))} theme={focusedTheme as Theme} /> {/* Drawer Section */}