Merge pull request #42 from HORNET-Storage/feature/generic-settings

Feature/generic settings

Author: f7f376a1fcd0d0e11a10ed1b6577c9

.env.example

@@ -1,6 +1 @@
-REACT_APP_BASE_URL=http://localhost:9002
-REACT_APP_ASSETS_BUCKET=https://lightence-assets.s3.amazonaws.com
-
-# more info https://create-react-app.dev/docs/advanced-configuration
-ESLINT_NO_DEV_ERRORS=
-TSC_COMPILE_ON_ERROR=
+NODE_OPTIONS=--openssl-legacy-provider

package.json

@@ -83,14 +83,15 @@
     "workbox-streams": "^5.1.3"
   },
   "scripts": {
-    "start": "yarn buildThemes && craco start",
-    "build": "yarn buildThemes && craco build",
-    "test": "craco test",
-    "eject": "craco eject",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider yarn buildThemes && NODE_OPTIONS=--openssl-legacy-provider craco start",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider yarn buildThemes && NODE_OPTIONS=--openssl-legacy-provider craco build",
+    "test": "NODE_OPTIONS=--openssl-legacy-provider craco test",
+    "eject": "NODE_OPTIONS=--openssl-legacy-provider craco eject",
     "lint": "eslint \"*/**/*.{js,ts,tsx}\" --fix",
     "lint:styles": "stylelint '*/**/*.{js,ts,tsx}'",
     "prepare": "husky install",
-    "buildThemes": "lessc --js --clean-css=\"--s1 --advanced\" src/styles/themes/main.less public/themes/main.css"
+    "update-browserslist": "npx update-browserslist-db@latest",
+    "buildThemes": "NODE_OPTIONS=--openssl-legacy-provider lessc --js --clean-css=\"--s1 --advanced\" src/styles/themes/main.less public/themes/main.css"
   },
   "browserslist": [
     ">0.2%",

src/@types/event-target.d.ts

@@ -0,0 +1,3 @@
+interface EventTarget {
+  state?: 'activated';
+}

src/components/common/BaseNotification/BaseNotification.tsx

@@ -9,9 +9,10 @@ interface Icons {
   warning: React.ReactNode;
   error: React.ReactNode;
   mention: React.ReactNode;
+  moderation: React.ReactNode;
 }
 
-export type NotificationType = 'info' | 'mention' | 'success' | 'warning' | 'error';
+export type NotificationType = 'info' | 'mention' | 'success' | 'warning' | 'error' | 'moderation';
 
 interface BaseNotificationProps {
   type: NotificationType;
@@ -27,6 +28,7 @@ export const BaseNotification: React.FC<BaseNotificationProps> = ({ type, mentio
     warning: <ExclamationCircleFilled />,
     error: <WarningFilled />,
     mention: mentionIconSrc,
+    moderation: <WarningFilled />, // Using the same icon as error for moderation
   };
 
   const icon = icons[type] || icons.warning;

src/components/layouts/main/sider/sidebarNavigation.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { DashboardOutlined, TableOutlined, StopOutlined, FlagOutlined } from '@ant-design/icons';
+import { DashboardOutlined, TableOutlined, StopOutlined, FlagOutlined, SettingOutlined } from '@ant-design/icons';
 import { ReactComponent as NestIcon } from '@app/assets/icons/hive.svg';
 import { ReactComponent as BtcIcon } from '@app/assets/icons/btc.svg';
 import { ReactComponent as StatsIcon } from '@app/assets/icons/stats.svg';
@@ -31,6 +31,12 @@ export const useSidebarNavigation = (): SidebarNavigationItem[] => {
         url: '/relay-settings',
         icon: <StorageSettingsIcon />,
       },
+      {
+        title: 'Advanced Settings',
+        key: 'advanced-settings',
+        url: '/settings',
+        icon: <SettingOutlined />,
+      },
       {
         title: 'common.access-control',
         key: 'blocked-pubkeys',

src/components/router/AppRouter.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { AuthGuard } from '@app/components/AuthGuard';
 import AuthLayout from '@app/components/layouts/AuthLayout/AuthLayout';
+import SettingsPage from '@app/components/settings/SettingsPage';
 
 AuthLayout.displayName = 'AuthLayout';
 import LoginPage from '@app/pages/LoginPage';
@@ -74,6 +75,7 @@ const Logout = React.lazy(() => import('./Logout'));
 export const NFT_DASHBOARD_PATH = '/';
 export const MEDICAL_DASHBOARD_PATH = '/medical-dashboard';
 export const RELAY_SETTINGS_PATH = '/relay-settings';
+export const SETTINGS_PATH = '/settings';
 export const TABLES_PAGE_PATH = '/nostr-stats';
 
 const MedicalDashboard = withLoading(MedicalDashboardPage);
@@ -114,6 +116,7 @@ const DataTables = withLoading(DataTablesPage);
 const Charts = withLoading(ChartsPage);
 const RelayStats = withLoading(RelayStatsPage);
 const RelaySettings = withLoading(RelaySettingsPage);
+const Settings = withLoading(SettingsPage);
 const BlockedPubkeys = withLoading(BlockedPubkeysPage);
 
 // Maps
@@ -155,6 +158,7 @@ export const AppRouter: React.FC = () => {
           <Route path="media-manager" element={<MediaPage />} />
           <Route path="relay-stats" element={<RelayStats />} />
           <Route path={RELAY_SETTINGS_PATH} element={<RelaySettings />} />
+          <Route path={`${SETTINGS_PATH}/*`} element={<Settings />} />
           <Route path="blocked-pubkeys" element={<BlockedPubkeys />} />
           <Route path="apps">
             <Route path="feed" element={<NewsFeed />} />

src/components/settings/BaseSettingsForm.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { Form, Button, Card, Space, Alert, Spin } from 'antd';
+import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+
+const StyledCard = styled(Card)`
+  margin-bottom: 1.5rem;
+`;
+
+const ButtonsContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+`;
+
+interface BaseSettingsFormProps {
+  title: string;
+  loading: boolean;
+  error: Error | null;
+  onSave: () => Promise<void>;
+  onReset: () => void;
+  children: React.ReactNode;
+}
+
+const BaseSettingsForm: React.FC<BaseSettingsFormProps> = ({
+  title,
+  loading,
+  error,
+  onSave,
+  onReset,
+  children,
+}) => {
+  const [form] = Form.useForm();
+  const [saving, setSaving] = React.useState(false);
+
+  const handleSave = async () => {
+    try {
+      await form.validateFields();
+      setSaving(true);
+      await onSave();
+    } catch (error) {
+      console.error('Validation failed:', error);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <StyledCard title={title}>
+      {error && (
+        <Alert
+          message="Error"
+          description={error.message}
+          type="error"
+          showIcon
+          style={{ marginBottom: '1rem' }}
+        />
+      )}
+      
+      <Spin spinning={loading}>
+        <Form
+          form={form}
+          layout="vertical"
+          initialValues={{}}
+        >
+          {children}
+          
+          <ButtonsContainer>
+            <Space>
+              <Button
+                icon={<ReloadOutlined />}
+                onClick={onReset}
+                disabled={loading || saving}
+              >
+                Reset
+              </Button>
+              <Button
+                type="primary"
+                icon={<SaveOutlined />}
+                onClick={handleSave}
+                loading={saving}
+                disabled={loading}
+              >
+                Save
+              </Button>
+            </Space>
+          </ButtonsContainer>
+        </Form>
+      </Spin>
+    </StyledCard>
+  );
+};
+
+export default BaseSettingsForm;

src/components/settings/BaseSettingsPanel.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Form, Card, Alert, Spin } from 'antd';
+import styled from 'styled-components';
+
+const StyledCard = styled(Card)`
+  margin-bottom: 1rem;
+  border: none;
+  box-shadow: none;
+`;
+
+interface BaseSettingsPanelProps {
+  title?: string;
+  loading: boolean;
+  error: Error | null;
+  children: React.ReactNode;
+  extra?: React.ReactNode;
+}
+
+const BaseSettingsPanel: React.FC<BaseSettingsPanelProps> = ({
+  title,
+  loading,
+  error,
+  children,
+  extra,
+}) => {
+  return (
+    <StyledCard 
+      title={title}
+      extra={extra}
+    >
+      {error && (
+        <Alert
+          message="Error"
+          description={error.message}
+          type="error"
+          showIcon
+          style={{ marginBottom: '1rem' }}
+        />
+      )}
+      
+      <Spin spinning={loading}>
+        {children}
+      </Spin>
+    </StyledCard>
+  );
+};
+
+export default BaseSettingsPanel;