salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor Dropdown Handlers and Update WordPress Integration

Browse Source 
- Updated dropdown onChange handlers across multiple components to use direct value passing instead of event target value for improved clarity and consistency.
- Changed `url` to `site_url` in WordPress integration configuration for better semantic clarity.
- Enhanced Vite configuration to include `fast-deep-equal` for compatibility with `react-dnd`.
- Updated navigation paths in `SiteContentEditor` and `SiteList` for consistency with new routing structure.
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-18 08:38:59 +00:00
parent b05421325c
commit 8508af37c7
12 changed files with 69 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/integration/PlatformSelector.tsx
View File

@@ -22,7 +22,7 @@ export default function PlatformSelector({ value, onChange, disabled }: Platform
<SelectDropdown
options={PLATFORMS}
value={value}
onChange={(e) => onChange(e.target.value)}
onChange={(optionValue) => onChange(optionValue)}
disabled={disabled}
placeholder="Select platform"
/>

8
frontend/src/components/publishing/PublishingRules.tsx
View File

@@ -142,8 +142,8 @@ export default function PublishingRules({ rules, onChange }: PublishingRulesProp
<SelectDropdown
options={CONTENT_TYPES}
value={rule.content_type}
onChange={(e) =>
handleUpdateRule(rule.id, 'content_type', e.target.value)
onChange={(value) =>
handleUpdateRule(rule.id, 'content_type', value)
}
/>
</div>
@@ -153,8 +153,8 @@ export default function PublishingRules({ rules, onChange }: PublishingRulesProp
<SelectDropdown
options={TRIGGERS}
value={rule.trigger}
onChange={(e) =>
handleUpdateRule(rule.id, 'trigger', e.target.value)
onChange={(value) =>
handleUpdateRule(rule.id, 'trigger', value)
}
/>
</div>

30
frontend/src/components/sites/TemplateCustomizer.tsx
View File

@@ -133,7 +133,7 @@ export default function TemplateCustomizer({
{ value: 'fullwidth', label: 'Full Width' },
]}
value={customization.layout}
onChange={(e) => updateCustomization({ layout: e.target.value })}
onChange={(value) => updateCustomization({ layout: value })}
/>
</div>
@@ -147,7 +147,7 @@ export default function TemplateCustomizer({
{ value: 'minimal', label: 'Minimal' },
]}
value={customization.headerStyle}
onChange={(e) => updateCustomization({ headerStyle: e.target.value })}
onChange={(value) => updateCustomization({ headerStyle: value })}
/>
</div>
@@ -161,7 +161,7 @@ export default function TemplateCustomizer({
{ value: 'none', label: 'No Footer' },
]}
value={customization.footerStyle}
onChange={(e) => updateCustomization({ footerStyle: e.target.value })}
onChange={(value) => updateCustomization({ footerStyle: value })}
/>
</div>
@@ -175,7 +175,7 @@ export default function TemplateCustomizer({
{ value: 'none', label: 'No Sidebar' },
]}
value={customization.sidebarPosition}
onChange={(e) => updateCustomization({ sidebarPosition: e.target.value as 'left' | 'right' | 'none' })}
onChange={(value) => updateCustomization({ sidebarPosition: value as 'left' | 'right' | 'none' })}
/>
</div>
)}
@@ -196,7 +196,7 @@ export default function TemplateCustomizer({
{ value: 'auto', label: 'Auto (System)' },
]}
value={customization.colorScheme}
onChange={(e) => updateCustomization({ colorScheme: e.target.value })}
onChange={(value) => updateCustomization({ colorScheme: value })}
/>
</div>
@@ -271,7 +271,7 @@ export default function TemplateCustomizer({
{ value: 'custom', label: 'Custom' },
]}
value={customization.typography}
onChange={(e) => updateCustomization({ typography: e.target.value })}
onChange={(value) => updateCustomization({ typography: value })}
/>
</div>
@@ -285,9 +285,9 @@ export default function TemplateCustomizer({
{ value: 'xlarge', label: 'Extra Large' },
]}
value={customization.customStyles?.headingSize || 'medium'}
onChange={(e) =>
onChange={(value) =>
updateCustomization({
customStyles: { ...customization.customStyles, headingSize: e.target.value },
customStyles: { ...customization.customStyles, headingSize: value },
})
}
/>
@@ -302,9 +302,9 @@ export default function TemplateCustomizer({
{ value: 'large', label: 'Large (18px)' },
]}
value={customization.customStyles?.bodySize || 'medium'}
onChange={(e) =>
onChange={(value) =>
updateCustomization({
customStyles: { ...customization.customStyles, bodySize: e.target.value },
customStyles: { ...customization.customStyles, bodySize: value },
})
}
/>
@@ -327,7 +327,7 @@ export default function TemplateCustomizer({
{ value: 'spacious', label: 'Spacious' },
]}
value={customization.spacing}
onChange={(e) => updateCustomization({ spacing: e.target.value })}
onChange={(value) => updateCustomization({ spacing: value })}
/>
</div>
@@ -341,9 +341,9 @@ export default function TemplateCustomizer({
{ value: 'large', label: 'Large' },
]}
value={customization.customStyles?.sectionPadding || 'medium'}
onChange={(e) =>
onChange={(value) =>
updateCustomization({
customStyles: { ...customization.customStyles, sectionPadding: e.target.value },
customStyles: { ...customization.customStyles, sectionPadding: value },
})
}
/>
@@ -360,9 +360,9 @@ export default function TemplateCustomizer({
{ value: 'full', label: 'Full Width' },
]}
value={customization.customStyles?.containerWidth || 'lg'}
onChange={(e) =>
onChange={(value) =>
updateCustomization({
customStyles: { ...customization.customStyles, containerWidth: e.target.value },
customStyles: { ...customization.customStyles, containerWidth: value },
})
}
/>

5
frontend/src/components/sites/WordPressIntegrationCard.tsx
View File

@@ -17,8 +17,7 @@ interface WordPressIntegration {
sync_status: 'success' | 'failed' | 'pending';
last_sync_at?: string;
config_json?: {
url?: string;
username?: string;
site_url?: string;
};
}
@@ -75,7 +74,7 @@ export default function WordPressIntegrationCard({
WordPress Integration
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
{integration.config_json?.url || 'WordPress Site'}
{integration.config_json?.site_url || 'WordPress Site'}
</p>
</div>
</div>

4
frontend/src/components/sites/WordPressIntegrationModal.tsx
View File

@@ -4,10 +4,10 @@
*/
import React, { useState } from 'react';
import { X, Globe, AlertCircle } from 'lucide-react';
import Modal from '../ui/modal/Modal';
import { Modal } from '../ui/modal';
import Button from '../ui/button/Button';
import Label from '../form/Label';
import Input from '../form/input/Input';
import Input from '../form/input/InputField';
import Checkbox from '../form/input/Checkbox';
import { useToast } from '../ui/toast/ToastContainer';

2
frontend/src/pages/Sites/Editor.tsx
View File

@@ -144,7 +144,7 @@ export default function SiteContentEditor() {
<p className="text-gray-600 dark:text-gray-400 mb-4">
No pages found in this blueprint
</p>
<Button onClick={() => navigate('/site-builder')} variant="primary">
<Button onClick={() => navigate('/sites/builder')} variant="primary">
Generate Pages
</Button>
</Card>

24
frontend/src/pages/Sites/List.tsx
View File

@@ -5,7 +5,7 @@
*/
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { PlusIcon, EditIcon, SettingsIcon, EyeIcon, TrashIcon, FilterIcon, SearchIcon, PlugIcon, FileTextIcon } from 'lucide-react';
import { PlusIcon, EditIcon, SettingsIcon, EyeIcon, TrashIcon, FilterIcon, SearchIcon, PlugIcon, FileTextIcon, MoreVerticalIcon, Building2Icon } from 'lucide-react';
import PageMeta from '../../components/common/PageMeta';
import { Card } from '../../components/ui/card';
import Button from '../../components/ui/button/Button';
@@ -515,10 +515,6 @@ export default function SiteList() {
</p>
</div>
<div className="flex gap-2">
<Button onClick={() => navigate('/sites/manage')} variant="outline">
<SettingsIcon className="w-4 h-4 mr-2" />
Site Management
</Button>
<Button onClick={() => navigate('/sites/builder')} variant="outline">
<PlusIcon className="w-4 h-4 mr-2" />
Create with Builder
@@ -583,7 +579,7 @@ export default function SiteList() {
<SelectDropdown
options={SITE_TYPES}
value={siteTypeFilter}
onChange={(e) => setSiteTypeFilter(e.target.value)}
onChange={(value) => setSiteTypeFilter(value)}
/>
</div>
@@ -595,7 +591,7 @@ export default function SiteList() {
<SelectDropdown
options={HOSTING_TYPES}
value={hostingTypeFilter}
onChange={(e) => setHostingTypeFilter(e.target.value)}
onChange={(value) => setHostingTypeFilter(value)}
/>
</div>
@@ -607,7 +603,7 @@ export default function SiteList() {
<SelectDropdown
options={STATUS_OPTIONS}
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
onChange={(value) => setStatusFilter(value)}
/>
</div>
</div>
@@ -619,7 +615,7 @@ export default function SiteList() {
<SelectDropdown
options={INTEGRATION_OPTIONS}
value={integrationFilter}
onChange={(e) => setIntegrationFilter(e.target.value)}
onChange={(value) => setIntegrationFilter(value)}
/>
</div>
</Card>
@@ -738,19 +734,21 @@ export default function SiteList() {
variant="outline"
size="sm"
onClick={() => handleSettings(site.id)}
className="shadow-theme-xs inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400"
className="shadow-theme-xs inline-flex h-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 px-3"
title="Configure Sectors"
>
<SettingsIcon className="w-4 h-4" />
<Building2Icon className="w-4 h-4 mr-1" />
<span className="text-xs">Sectors</span>
</Button>
<Button
variant="outline"
size="sm"
onClick={() => navigate(`/sites/${site.id}/settings`)}
className="shadow-theme-xs inline-flex h-9 w-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400"
className="shadow-theme-xs inline-flex h-9 items-center justify-center rounded-lg border border-gray-300 text-gray-700 dark:border-gray-700 dark:text-gray-400 px-3"
title="Site Settings"
>
<SettingsIcon className="w-4 h-4" />
<SettingsIcon className="w-4 h-4 mr-1" />
<span className="text-xs">Settings</span>
</Button>
</div>
<Switch

4
frontend/src/pages/Sites/PostEditor.tsx
View File

@@ -327,7 +327,7 @@ export default function PostEditor() {
<SelectDropdown
options={CONTENT_TYPES}
value={content.content_type}
onChange={(e) => setContent({ ...content, content_type: e.target.value })}
onChange={(value) => setContent({ ...content, content_type: value })}
/>
</div>
@@ -336,7 +336,7 @@ export default function PostEditor() {
<SelectDropdown
options={STATUS_OPTIONS}
value={content.status}
onChange={(e) => setContent({ ...content, status: e.target.value })}
onChange={(value) => setContent({ ...content, status: value })}
/>
</div>
</div>

33
frontend/src/pages/Sites/Settings.tsx
View File

@@ -225,7 +225,10 @@ export default function SiteSettings() {
<div className="flex gap-4">
<button
type="button"
onClick={() => setActiveTab('general')}
onClick={() => {
setActiveTab('general');
navigate(`/sites/${siteId}/settings`, { replace: true });
}}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'general'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -237,7 +240,10 @@ export default function SiteSettings() {
</button>
<button
type="button"
onClick={() => setActiveTab('seo')}
onClick={() => {
setActiveTab('seo');
navigate(`/sites/${siteId}/settings?tab=seo`, { replace: true });
}}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'seo'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -249,7 +255,10 @@ export default function SiteSettings() {
</button>
<button
type="button"
onClick={() => setActiveTab('og')}
onClick={() => {
setActiveTab('og');
navigate(`/sites/${siteId}/settings?tab=og`, { replace: true });
}}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'og'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -261,7 +270,10 @@ export default function SiteSettings() {
</button>
<button
type="button"
onClick={() => setActiveTab('schema')}
onClick={() => {
setActiveTab('schema');
navigate(`/sites/${siteId}/settings?tab=schema`, { replace: true });
}}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'schema'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -273,7 +285,10 @@ export default function SiteSettings() {
</button>
<button
type="button"
onClick={() => setActiveTab('integrations')}
onClick={() => {
setActiveTab('integrations');
navigate(`/sites/${siteId}/settings?tab=integrations`, { replace: true });
}}
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
activeTab === 'integrations'
? 'border-brand-500 text-brand-600 dark:text-brand-400'
@@ -316,7 +331,7 @@ export default function SiteSettings() {
<SelectDropdown
options={SITE_TYPES}
value={formData.site_type}
onChange={(e) => setFormData({ ...formData, site_type: e.target.value })}
onChange={(value) => setFormData({ ...formData, site_type: value })}
/>
</div>
@@ -325,7 +340,7 @@ export default function SiteSettings() {
<SelectDropdown
options={HOSTING_TYPES}
value={formData.hosting_type}
onChange={(e) => setFormData({ ...formData, hosting_type: e.target.value })}
onChange={(value) => setFormData({ ...formData, hosting_type: value })}
/>
</div>
@@ -572,8 +587,8 @@ export default function SiteSettings() {
initialData={
wordPressIntegration
? {
url: wordPressIntegration.config_json?.url || '',
username: wordPressIntegration.config_json?.username || '',
url: wordPressIntegration.config_json?.site_url || '',
username: wordPressIntegration.credentials_json?.username || '',
app_password: '', // Never show password
is_active: wordPressIntegration.is_active,
sync_enabled: wordPressIntegration.sync_enabled,

9
frontend/src/services/integration.api.ts
View File

@@ -10,6 +10,7 @@ export interface SiteIntegration {
platform: 'wordpress' | 'shopify' | 'custom';
platform_type: 'cms' | 'ecommerce' | 'custom_api';
config_json: Record<string, any>;
credentials_json?: Record<string, any>;
is_active: boolean;
sync_enabled: boolean;
last_sync_at?: string;
@@ -23,7 +24,7 @@ export interface CreateIntegrationData {
platform: 'wordpress' | 'shopify' | 'custom';
platform_type?: 'cms' | 'ecommerce' | 'custom_api';
config_json: Record<string, any>;
credentials?: Record<string, string>;
credentials_json?: Record<string, string>;
is_active?: boolean;
sync_enabled?: boolean;
}
@@ -126,10 +127,10 @@ export const integrationApi = {
platform: 'wordpress',
platform_type: 'cms',
config_json: {
url: data.url,
username: data.username,
site_url: data.url,
},
credentials: {
credentials_json: {
username: data.username,
app_password: data.app_password,
},
is_active: data.is_active ?? true,

4
frontend/vite.config.ts
View File

@@ -120,6 +120,8 @@ export default defineConfig(({ mode, command }) => {
"zustand/middleware", // Required for persist middleware used in stores
// Include apexcharts for proper module resolution (skip during marketing-only build)
...(isMarketingBuild ? [] : ["apexcharts", "react-apexcharts"]),
// Force include fast-deep-equal for react-dnd compatibility
"fast-deep-equal",
],
// Exclude heavy dependencies that are only used in specific pages
// They will be lazy-loaded when needed
@@ -132,8 +134,6 @@ export default defineConfig(({ mode, command }) => {
"@fullcalendar/timegrid",
"@react-jvectormap/core",
"@react-jvectormap/world",
"react-dnd",
"react-dnd-html5-backend",
"swiper",
],
esbuildOptions: {