Merge pull request #40 from Lemoncode/feature/add-new-scenes-for-edit-user

Refactor user editing functionality

Author: brauliodiez

src/modules/users/edit-reset-password/edit-reset-password.pod.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const EditResetPassword: React.FC = () => {
+  return <h3>Reset Password</h3>;
+};

src/modules/users/edit-reset-password/index.ts

@@ -0,0 +1 @@
+export * from './edit-reset-password.pod';

src/modules/users/edit-user-sheet/edit-user-sheet.pod.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+interface Props {
+  id: string;
+}
+
+export const EditUserSheet: React.FC<Props> = props => {
+  const { id } = props;
+  return <h3>User id: {id}</h3>;
+};

src/modules/users/edit-user-sheet/index.ts

@@ -0,0 +1 @@
+export * from './edit-user-sheet.pod';

src/modules/users/edit/index.ts

@@ -1,6 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router';
-import { UserEditPod } from '#modules/users/edit';
+import { UserScene } from './edit-user.scene';
 
 export const Route = createFileRoute('/_auth/edit-user/$id')({
-  component: UserEditPod,
+  component: UserScene,
 });

src/modules/users/edit/user-edit.pod.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useWithTheme } from '#core/theme/theme.hooks.ts';
-import * as innerClasses from './tabs.styles';
+import * as innerClasses from './tab-panel.styles';
 
 interface TabPanelProps {
   index: number;

src/modules/users/edit/user-edit.styles.ts

@@ -0,0 +1,6 @@
+import { css } from '@emotion/css';
+import { Theme } from '@mui/material';
+
+export const tabPanel = (theme: Theme) => css`
+  padding-block: ${theme.spacing(2)};
+`;

src/scenes/_auth/edit-user/$id.tsx

@@ -1,19 +1,18 @@
-import * as React from 'react';
-import { TabPanel } from './tab-panel.component';
+import React from 'react';
+import { useParams } from '@tanstack/react-router';
 import { Tabs as MUITabs, Tab, Paper } from '@mui/material/';
-
-import * as innerClasses from './tabs.styles';
+import { EditUserSheet } from '#modules/users/edit-user-sheet/edit-user-sheet.pod.tsx';
+import { EditResetPassword } from '#modules/users/edit-reset-password/edit-reset-password.pod.tsx';
+import { TabPanel } from './components/tab-panel.component';
+import * as innerClasses from './edit-user.styles';
 
 enum TabIndex {
   USER_SHEET,
   RESET_PASSWORD,
 }
 
-interface Props {
-  id: string;
-}
-
-export const Tabs: React.FC<Props> = ({ id }) => {
+export const UserScene: React.FC = () => {
+  const { id } = useParams({ from: '/_auth/edit-user/$id' });
   const [activeTab, setActiveTab] = React.useState<number>(0);
 
   const handleChange = (_event: React.SyntheticEvent, newValue: number) => setActiveTab(newValue);
@@ -28,10 +27,10 @@ export const Tabs: React.FC<Props> = ({ id }) => {
           </MUITabs>
         </div>
         <TabPanel value={activeTab} index={TabIndex.USER_SHEET}>
-          <h3>User id: {id}</h3>
+          <EditUserSheet id={id} />
         </TabPanel>
         <TabPanel value={activeTab} index={TabIndex.RESET_PASSWORD}>
-          <h3>Reset Password</h3>
+          <EditResetPassword />
         </TabPanel>
       </Paper>
     </div>

src/modules/users/edit/components/tab-panel.component.tsx renamed to src/scenes/_auth/edit-user/components/tab-panel.component.tsx

@@ -1,18 +1,13 @@
 import { css } from '@emotion/css';
-import { Theme } from '@mui/material';
 
 export const tabsComponent = css`
   display: 'flex';
-  flexdirection: 'column';
-  alignitems: 'center';
+  flex-direction: 'column';
+  align-items: 'center';
   width: 100%;
 `;
 
 export const tabsContainer = css`
   border-bottom: 1;
   border-color: 'divider';
 `;
-
-export const tabPanel = (theme: Theme) => css`
-  padding-block: ${theme.spacing(2)};
-`;

src/scenes/_auth/edit-user/components/tab-panel.styles.ts

@@ -12,6 +12,7 @@ export default defineConfig(({ mode }) => {
         routesDirectory: 'src/scenes',
         generatedRouteTree: 'src/core/router/route-tree.ts',
         autoCodeSplitting: true,
+        routeFileIgnorePattern: '.((scene|component|styles).(ts|tsx))',
       }),
       react(),
     ],