From 5b38ee0f2f4ef381b504231814ab582bb8a04eac Mon Sep 17 00:00:00 2001 From: agricreations Date: Thu, 25 Apr 2024 07:56:20 +0530 Subject: [PATCH 1/2] component view section updates depends on api response --- ui_tailwind_shadecn/src/api/components/component.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui_tailwind_shadecn/src/api/components/component.tsx b/ui_tailwind_shadecn/src/api/components/component.tsx index 963cc73..e94bdce 100644 --- a/ui_tailwind_shadecn/src/api/components/component.tsx +++ b/ui_tailwind_shadecn/src/api/components/component.tsx @@ -18,7 +18,7 @@ export const fetchComponentStore = async (categorie: string , title: string) => throw new Error('Failed to fetch categorie'); } const responseData = await response.json(); - const postDetails = responseData.post_details; + const postDetails = responseData.response.post_details; // Extract post_details from response // const details: ComponentData[] = responseData.map((item: ResponseItem) => item.post_details); From 977bb9da843de48bd90da1dcc707beace2678cfb Mon Sep 17 00:00:00 2001 From: agricreations Date: Thu, 25 Apr 2024 08:22:30 +0530 Subject: [PATCH 2/2] update view components state with zustand and react state management --- .../src/api/components/component.tsx | 8 +--- ui_tailwind_shadecn/src/screens/View.tsx | 45 ++++++++++--------- ui_tailwind_shadecn/src/store/store.tsx | 35 ++++++++++++--- .../src/types/ComponentStore.type.tsx | 5 ++- 4 files changed, 61 insertions(+), 32 deletions(-) diff --git a/ui_tailwind_shadecn/src/api/components/component.tsx b/ui_tailwind_shadecn/src/api/components/component.tsx index e94bdce..01d1f58 100644 --- a/ui_tailwind_shadecn/src/api/components/component.tsx +++ b/ui_tailwind_shadecn/src/api/components/component.tsx @@ -1,7 +1,7 @@ // http://localhost:4000/componentsbuttons/moovendhan_amazing_tooltip4 -// import { useComponentsStore } from '@/store/store'; +import { useViewComponentStore } from '@/store/store'; // import {ComponentData} from '@/types/ComponentData.type' import {getEnvVariable} from '@/utils/load.utils'; @@ -20,11 +20,7 @@ export const fetchComponentStore = async (categorie: string , title: string) => const responseData = await response.json(); const postDetails = responseData.response.post_details; - // Extract post_details from response - // const details: ComponentData[] = responseData.map((item: ResponseItem) => item.post_details); - - // Update the store - // useComponentsStore.setState({ [categorie]: details }); + useViewComponentStore.setState({viewComponents: postDetails}); return postDetails; } catch (error) { diff --git a/ui_tailwind_shadecn/src/screens/View.tsx b/ui_tailwind_shadecn/src/screens/View.tsx index ab85701..93be577 100644 --- a/ui_tailwind_shadecn/src/screens/View.tsx +++ b/ui_tailwind_shadecn/src/screens/View.tsx @@ -25,11 +25,16 @@ import { ViewSkeleton } from "@/components/custom_ui/skeleton/ViewSkeleton"; import { MovingButton } from "@/components/ui/moving-border"; import { HoverBorderGradient } from "@/components/ui/hover-border-gradient"; import { CommandDialogDemo } from "@/components/ui/commandMenu"; +import { useViewComponentStore }from "@/store/store"; +// import { SelectValue } from "@/components/ui/select" export function View() { const [isSticky, setIsSticky] = useState(false); const [componentDetails, setComponentDetails] = useState(null); + // #TODO do a api call and stoe in a zustand store + const viewCompoentsStore = useViewComponentStore((state) => state.viewComponents); + type componentParamType = { categorie: string; title: string; @@ -182,7 +187,7 @@ export function View() {
Go Back

- Awesome Buttons + {viewCompoentsStore.title}

@@ -267,7 +272,7 @@ export function View() {
- +
@@ -301,30 +306,30 @@ export function View() { language="html" value={componentDetails?.html || ''} onChange={(value) => { - setComponentDetails((prevDetails) => ({ - ...prevDetails, - html: value, - css: prevDetails?.css || '', - js: prevDetails?.js || "" - })); + useViewComponentStore.setState((state) => ({ + viewComponents: { + ...state.viewComponents, + html: value, + }, + })); }} /> )} {activeTab === 'css' && { - setComponentDetails((prevDetails) => ({ - ...prevDetails, - html: prevDetails?.html || "", - css: value, - js: prevDetails?.js || "" - })); + useViewComponentStore.setState((state) => ({ + viewComponents: { + ...state.viewComponents, + html: value, + }, + })); }} />} {activeTab === 'javascript' && { - setComponentDetails((prevDetails) => ({ - ...prevDetails, - html: prevDetails?.html || "", - css: prevDetails?.css || '', - js: value - })); + useViewComponentStore.setState((state) => ({ + viewComponents: { + ...state.viewComponents, + html: value, + }, + })); }} />} diff --git a/ui_tailwind_shadecn/src/store/store.tsx b/ui_tailwind_shadecn/src/store/store.tsx index a4bc686..5b4c3f2 100644 --- a/ui_tailwind_shadecn/src/store/store.tsx +++ b/ui_tailwind_shadecn/src/store/store.tsx @@ -1,5 +1,5 @@ import { create } from 'zustand'; -import {ComponentsStore, } from '@/types/ComponentStore.type' +import {ComponentsStore, ViewComponentStore, } from '@/types/ComponentStore.type' import {CategoriesStore} from '@/types/CategoriesStore.type' @@ -39,7 +39,32 @@ export const useComponentsStore = create(() => ({ toast : [], })); - -// export const useComponentStore = create(()=>{ -// currentComponentStore : ComponentStore; -// }) \ No newline at end of file +export const useViewComponentStore = create(() => ({ + viewComponents: { + html: "", + css: "", + js: "", + catogries: "", + folder_path: "", + folder_name: "", + isActive: false, + title: "", + description: "", + admin: { + _id: "", + id: 0, + login: "", + avatar_url: "", + url: "", + html_url: "", + company: "", + location: "", + email: null, + name: "", + blog: "", + bio: "", + twitter_username: null, + __v: 0, + }, + }, +})); \ No newline at end of file diff --git a/ui_tailwind_shadecn/src/types/ComponentStore.type.tsx b/ui_tailwind_shadecn/src/types/ComponentStore.type.tsx index 79f485c..e0e5902 100644 --- a/ui_tailwind_shadecn/src/types/ComponentStore.type.tsx +++ b/ui_tailwind_shadecn/src/types/ComponentStore.type.tsx @@ -37,4 +37,7 @@ export type ComponentStore ={ html: string; css : string; js : string; -} \ No newline at end of file +} + export type ViewComponentStore = { + viewComponents : ComponentData; + } \ No newline at end of file