Merge pull request #69 from React-ChatBotify/react-router-themes

feat: add theme param url behaviour with react-router

Author: hunxjunedo

src/components/Themes/ThemeCard.tsx

@@ -1,29 +1,26 @@
-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 = {
   theme: Theme;
   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<Props> = ({ theme, isPreviewed, onPreview, isLoading }) => {
-	const [viewDetails, setViewDetails] = useState(false);
+const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onViewDetails, onPreview, isLoading }) => {
+
 
-	const onViewDetails = () => {
-		setViewDetails(true);
-	};
 
 	const onClickPreview = () => {
 		onPreview(theme.name)
@@ -68,7 +65,7 @@ const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview, isLoading }
 				</div>
 				<div className="flex-1 basis-1/6 md:basis-1/6 flex flex-col">
 					<div className="flex items-center text-blue-500">
-						<button onClick={onViewDetails} className="text-sm my-4 w-fit mr-[3px]">
+						<button onClick={()=>(onViewDetails(theme))} className="text-sm my-4 w-fit mr-[3px]">
 							More Info
 						</button>
 						<InfoIcon size={15}/>
@@ -79,7 +76,7 @@ const ThemeCard: React.FC<Props> = ({ theme, isPreviewed, onPreview, isLoading }
 					</label>
 				</div>
 			</div>
-			<ThemeModal isOpen={viewDetails} theme={theme} onClose={() => setViewDetails(false)} />
+			
 		</>
 	);
 };

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<null | Theme>(null)
+
 	// id of themes being selected to be preview (and applied to the interactive chatbot)
 	const [previewIds, setPreviewIds] = useState<string[]>([]);
 
@@ -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)
+
+	}, [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 null;
+	}
+
+	/**
+   * 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
+	}
+
+
 	/**
    * Handles setting of search query when user hits enter.
    *
@@ -75,6 +120,7 @@ const Themes: React.FC = () => {
 		return <div>Error: {error.message}</div>;
 	}
 
+
 	return (
 	// 92vh comes from 100vh - 8vh (the height of the navbar)
 		<div className="bg-accent-950 flex h-[92vh] w-full">
@@ -107,11 +153,17 @@ const Themes: React.FC = () => {
 								isPreviewed={previewIds.includes(theme.id)}
 								onPreview={() => onPreview(theme.id)}
 								isLoading={loading}
+								onViewDetails={(theme) => (setFocusedTheme(modalOpenHandler(theme)))}
 							/>
 						);
 					})}
 				</div>
 			</div>
+			<ThemeModal 
+				isOpen={focusedTheme !== null} 
+				onClose={()=>(setFocusedTheme(modalCloseHandler()))} 
+				theme={focusedTheme as Theme} 
+			/>
 			{/* Drawer Section */}
 			<ThemePreview
 				setPreviewIds={setPreviewIds}