Skip to content

Commit 46f4473

Browse files
ccwukongccwukong
committed
code split for admin settings page
1 parent 05a12c1 commit 46f4473

File tree

10 files changed

+1141
-1165
lines changed

10 files changed

+1141
-1165
lines changed

‎app/entry.client.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
*/
66

77
import { RemixBrowser } from '@remix-run/react'
8-
import { startTransition, StrictMode } from 'react'
9-
import { hydrateRoot } from 'react-dom/client'
10-
import i18n from './i18n'
118
import i18next from 'i18next'
12-
import { I18nextProvider, initReactI18next } from 'react-i18next'
139
import LanguageDetector from 'i18next-browser-languagedetector'
1410
import Backend from 'i18next-http-backend'
11+
import { startTransition, StrictMode } from 'react'
12+
import { hydrateRoot } from 'react-dom/client'
13+
import { I18nextProvider, initReactI18next } from 'react-i18next'
1514
import { getInitialNamespaces } from 'remix-i18next/client'
15+
import i18n from './i18n'
1616

1717
async function hydrate() {
1818
await i18next

‎app/themes/default/components/ui/admin/AccountForm.tsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import { useFetcher } from '@remix-run/react'
2+
import { useContext, useState } from 'react'
3+
import { useTranslation } from 'react-i18next'
4+
import AdminContext from '~/contexts/adminContext'
5+
import { Button } from '~/themes/default/components/ui/button'
6+
import { Input } from '~/themes/default/components/ui/input'
7+
import { Label } from '~/themes/default/components/ui/label'
8+
import { Spinner } from '~/themes/default/components/ui/spinner'
9+
10+
const AccountForm = () => {
11+
const { t } = useTranslation()
12+
const fetcher = useFetcher()
13+
const { account } = useContext(AdminContext)
14+
const [form, setForm] = useState({
15+
account: account!,
16+
})
17+
18+
return (
19+
<fetcher.Form method="POST">
20+
<div className="space-y-4 w-[480px]">
21+
<div className="space-y-2">
22+
<Label htmlFor="email">{t('system.email')}</Label>
23+
<Input
24+
type="text"
25+
id="email"
26+
name="email"
27+
value={form.account.email}
28+
disabled
29+
/>
30+
</div>
31+
<div className="space-y-2">
32+
<Label htmlFor="firstname">{t('system.firstname')}</Label>
33+
<Input
34+
type="text"
35+
id="firstname"
36+
name="firstname"
37+
value={form.account.firstName}
38+
onChange={(e) => {
39+
setForm({
40+
...form,
41+
account: {
42+
...form.account,
43+
firstName: e.target.value,
44+
},
45+
})
46+
}}
47+
/>
48+
</div>
49+
<div className="space-y-2">
50+
<Label htmlFor="lastname">{t('system.lastname')}</Label>
51+
<Input
52+
type="text"
53+
id="lastname"
54+
name="lastname"
55+
value={form.account.lastName}
56+
onChange={(e) => {
57+
setForm({
58+
...form,
59+
account: {
60+
...form.account,
61+
lastName: e.target.value,
62+
},
63+
})
64+
}}
65+
/>
66+
</div>
67+
68+
<div className="space-y-2">
69+
<Label htmlFor="phone">{t('system.phone')}</Label>
70+
<Input
71+
type="text"
72+
id="phone"
73+
name="phone"
74+
value={form.account.phone}
75+
onChange={(e) => {
76+
setForm({
77+
...form,
78+
account: {
79+
...form.account,
80+
phone: e.target.value,
81+
},
82+
})
83+
}}
84+
/>
85+
</div>
86+
<Button type="submit" name="intent" value="account-info">
87+
{fetcher.state !== 'idle' &&
88+
fetcher.formData?.get('intent') === 'account-info' ? (
89+
<Spinner size="small" className="text-white" />
90+
) : (
91+
t('system.save')
92+
)}
93+
</Button>
94+
</div>
95+
</fetcher.Form>
96+
)
97+
}
98+
99+
export default AccountForm

‎app/themes/default/components/ui/admin/ChangePasswordForm.tsx

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { useFetcher } from '@remix-run/react'
2+
import { AlertCircle } from 'lucide-react'
3+
import { useContext, useState } from 'react'
4+
import { useTranslation } from 'react-i18next'
5+
import AdminContext from '~/contexts/adminContext'
6+
import { Button } from '~/themes/default/components/ui/button'
7+
import { Input } from '~/themes/default/components/ui/input'
8+
import { Label } from '~/themes/default/components/ui/label'
9+
import { Spinner } from '~/themes/default/components/ui/spinner'
10+
import { Alert, AlertDescription, AlertTitle } from '../alert'
11+
12+
const ChangePasswordForm = () => {
13+
const { t } = useTranslation()
14+
const fetcher = useFetcher()
15+
const { account } = useContext(AdminContext)
16+
const [form, setForm] = useState({
17+
account: account!,
18+
})
19+
20+
return (
21+
<fetcher.Form method="POST">
22+
<div className="space-y-4 w-[480px]">
23+
<div className="space-y-2">
24+
<Label htmlFor="old-password">{t('system.old_password')}</Label>
25+
<Input type="password" id="old-password" name="old-password" />
26+
</div>
27+
<div className="space-y-2">
28+
<Label htmlFor="new-password">{t('system.new_password')}</Label>
29+
<Input type="password" id="new-password" name="new-password" />
30+
</div>
31+
<Button type="submit" name="intent" value="change-password">
32+
{fetcher.state !== 'idle' &&
33+
fetcher.formData?.get('intent') === 'change-password' ? (
34+
<Spinner size="small" className="text-white" />
35+
) : (
36+
t('system.save')
37+
)}
38+
</Button>
39+
{fetcher.state === 'idle' && fetcher.data?.error ? (
40+
<Alert variant="destructive" className="mt-3">
41+
<AlertCircle className="h-4 w-4" />
42+
<AlertTitle>{t('system.error')}</AlertTitle>
43+
<AlertDescription>
44+
{t('system.unmatched_password')}
45+
</AlertDescription>
46+
</Alert>
47+
) : null}
48+
</div>
49+
</fetcher.Form>
50+
)
51+
}
52+
53+
export default ChangePasswordForm

‎app/themes/default/components/ui/admin/ProductCategoryList.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { useContext } from 'react'
2+
import { useTranslation } from 'react-i18next'
3+
import AdminContext from '~/contexts/adminContext'
4+
5+
const ProductCategoryList = () => {
6+
const { t } = useTranslation()
7+
const { storeSettings } = useContext(AdminContext)
8+
9+
return <></>
10+
}
11+
12+
export default ProductCategoryList

‎app/themes/default/components/ui/admin/ProductVariantList.tsx

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { useContext } from 'react'
2+
import { useTranslation } from 'react-i18next'
3+
import AdminContext from '~/contexts/adminContext'
4+
5+
const ProductVariantList = () => {
6+
const { t } = useTranslation()
7+
const { storeSettings } = useContext(AdminContext)
8+
9+
return <></>
10+
}
11+
12+
export default ProductVariantList

‎app/themes/default/components/ui/admin/PublicPageList.tsx

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
import { Form } from '@remix-run/react'
2+
import { useContext, useState } from 'react'
3+
import { useTranslation } from 'react-i18next'
4+
import AdminContext from '~/contexts/adminContext'
5+
import Editor from '~/themes/default/components/ui/admin/Editor'
6+
import { Button } from '~/themes/default/components/ui/button'
7+
import {
8+
Dialog,
9+
DialogContent,
10+
DialogFooter,
11+
DialogHeader,
12+
DialogTitle,
13+
} from '~/themes/default/components/ui/dialog'
14+
import { Input } from '~/themes/default/components/ui/input'
15+
import { Label } from '~/themes/default/components/ui/label'
16+
import {
17+
Table,
18+
TableBody,
19+
TableCell,
20+
TableHead,
21+
TableHeader,
22+
TableRow,
23+
} from '~/themes/default/components/ui/table'
24+
25+
const PublicPageList = () => {
26+
const { t } = useTranslation()
27+
const [pageEditOpen, setPageEditOpen] = useState(false)
28+
const { storeSettings } = useContext(AdminContext)
29+
30+
return (
31+
<>
32+
<Table>
33+
<TableHeader>
34+
<TableRow>
35+
<TableHead>{t('system.title')}</TableHead>
36+
<TableHead>{t('system.url')}</TableHead>
37+
<TableHead>{t('system.order')}</TableHead>
38+
<TableHead>
39+
<span className="sr-only">{t('system.actions')}</span>
40+
</TableHead>
41+
</TableRow>
42+
</TableHeader>
43+
{storeSettings!.publicPages.length ? (
44+
<TableBody>
45+
{storeSettings!.publicPages.map((item) => (
46+
<TableRow key={item.name}>
47+
<TableCell className="font-medium">{item.name}</TableCell>
48+
<TableCell>/{item.slug}</TableCell>
49+
<TableCell className="hidden md:table-cell">
50+
{item.order}
51+
</TableCell>
52+
<TableCell>
53+
<Button
54+
type="button"
55+
variant="link"
56+
onClick={(e) => setPageEditOpen(true)}
57+
>
58+
{t('system.edit')}
59+
</Button>
60+
</TableCell>
61+
</TableRow>
62+
))}
63+
</TableBody>
64+
) : (
65+
<div className="text-center">{t('system.no_records_found')}</div>
66+
)}
67+
</Table>
68+
<Dialog
69+
open={pageEditOpen}
70+
onOpenChange={() => {
71+
setPageEditOpen(!pageEditOpen)
72+
}}
73+
>
74+
<DialogContent className="max-w-screen-md">
75+
<DialogHeader>
76+
<DialogTitle>{t('system.edit_page')}</DialogTitle>
77+
</DialogHeader>
78+
<Form method="POST" className="space-y-4">
79+
<div className="space-y-2">
80+
<Label className="text-right">{t('system.title')}</Label>
81+
<Input
82+
id="page-title"
83+
name="page-title"
84+
className="col-span-3"
85+
required
86+
value=""
87+
onChange={(e) => {}}
88+
/>
89+
</div>
90+
<div className="space-y-2">
91+
<Label className="text-right">{t('system.slug')}</Label>
92+
<Input
93+
id="page-slug"
94+
name="page-slug"
95+
className="col-span-3"
96+
required
97+
value=""
98+
onChange={(e) => {}}
99+
/>
100+
</div>
101+
<div className="space-y-2">
102+
<Label className="text-right">{t('system.description')}</Label>
103+
<Editor content={'Type content here...'} />
104+
</div>
105+
</Form>
106+
<DialogFooter>
107+
<Button type="submit">{t('system.save')}</Button>
108+
</DialogFooter>
109+
</DialogContent>
110+
</Dialog>
111+
</>
112+
)
113+
}
114+
115+
export default PublicPageList

0 commit comments

Comments
 (0)