add custom icons for sidebar resources

and delete some boilerplate stuff

src/App.tsx

@@ -24,6 +24,8 @@ import {CityList, CityCreate, CityEdit} from './pages/city'
 import {CarrierList, CarrierCreate, CarrierEdit} from './pages/carrier'
 import {MediaList, MediaCreate, MediaEdit, MediaShow} from './pages/media'
 
+import {CountryIcon, CityIcon, CarrierIcon, MediaIcon} from './components/ui/Icons'
+
 function App() {
   return (
     <BrowserRouter>
@@ -34,32 +36,11 @@ function App() {
           <RefineSnackbarProvider>
             <DevtoolsProvider>
               <Refine
-                dataProvider={dataProvider('https://wn.krbl.ru')} // https://api.fake-rest.refine.dev
+                dataProvider={dataProvider('https://wn.krbl.ru')}
                 notificationProvider={useNotificationProvider}
                 routerProvider={routerBindings}
                 authProvider={authProvider}
                 resources={[
-                  // {
-                  //   name: 'blog_posts',
-                  //   list: '/blog-posts',
-                  //   create: '/blog-posts/create',
-                  //   edit: '/blog-posts/edit/:id',
-                  //   show: '/blog-posts/show/:id',
-                  //   meta: {
-                  //     canDelete: true,
-                  //   },
-                  // },
-                  // {
-                  //   name: 'categories',
-                  //   list: '/categories',
-                  //   create: '/categories/create',
-                  //   edit: '/categories/edit/:id',
-                  //   show: '/categories/show/:id',
-                  //   meta: {
-                  //     canDelete: true,
-                  //   },
-                  // },
-
                   {
                     name: 'country',
                     list: '/country',
@@ -67,6 +48,7 @@ function App() {
                     edit: '/country/edit/:id',
                     meta: {
                       canDelete: true,
+                      icon: <CountryIcon />,
                     },
                   },
                   {
@@ -76,6 +58,7 @@ function App() {
                     edit: '/city/edit/:id',
                     meta: {
                       canDelete: true,
+                      icon: <CityIcon />,
                     },
                   },
                   {
@@ -85,6 +68,7 @@ function App() {
                     edit: '/carrier/edit/:id',
                     meta: {
                       canDelete: true,
+                      icon: <CarrierIcon />,
                     },
                   },
                   {
@@ -95,6 +79,7 @@ function App() {
                     show: '/media/show/:id',
                     meta: {
                       canDelete: true,
+                      icon: <MediaIcon />,
                     },
                   },
                 ]}
@@ -116,18 +101,6 @@ function App() {
                     }
                   >
                     <Route index element={<NavigateToResource resource="country" />} />
-                    {/* <Route path="/blog-posts">
-                      <Route index element={<BlogPostList />} />
-                      <Route path="create" element={<BlogPostCreate />} />
-                      <Route path="edit/:id" element={<BlogPostEdit />} />
-                      <Route path="show/:id" element={<BlogPostShow />} />
-                    </Route>
-                    <Route path="/categories">
-                      <Route index element={<CategoryList />} />
-                      <Route path="create" element={<CategoryCreate />} />
-                      <Route path="edit/:id" element={<CategoryEdit />} />
-                      <Route path="show/:id" element={<CategoryShow />} />
-                    </Route> */}
 
                     <Route path="/country">
                       <Route index element={<CountryList />} />

src/components/ui/Icons.tsx

@@ -0,0 +1,6 @@
+import PublicIcon from '@mui/icons-material/Public'
+import LocationCityIcon from '@mui/icons-material/LocationCity'
+import LocalShippingIcon from '@mui/icons-material/LocalShipping'
+import PermMediaIcon from '@mui/icons-material/PermMedia'
+
+export {PublicIcon as CountryIcon, LocationCityIcon as CityIcon, LocalShippingIcon as CarrierIcon, PermMediaIcon as MediaIcon}

src/pages/blog-posts/create.tsx

@@ -1,96 +0,0 @@
-import {Autocomplete, Box, MenuItem, Select, TextField} from '@mui/material'
-import {Create, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import React from 'react'
-import {Controller} from 'react-hook-form'
-
-export const BlogPostCreate = () => {
-  const {
-    saveButtonProps,
-    refineCore: {formLoading},
-    register,
-    control,
-    formState: {errors},
-  } = useForm({})
-
-  const {autocompleteProps: categoryAutocompleteProps} = useAutocomplete({
-    resource: 'categories',
-  })
-
-  return (
-    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <TextField
-          {...register('title', {
-            required: 'This field is required',
-          })}
-          error={!!(errors as any)?.title}
-          helperText={(errors as any)?.title?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label={'Title'}
-          name="title"
-        />
-        <TextField
-          {...register('content', {
-            required: 'This field is required',
-          })}
-          error={!!(errors as any)?.content}
-          helperText={(errors as any)?.content?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          multiline
-          label={'Content'}
-          name="content"
-        />
-        <Controller
-          control={control}
-          name={'category.id'}
-          rules={{required: 'This field is required'}}
-          // eslint-disable-next-line
-          defaultValue={null as any}
-          render={({field}) => (
-            <Autocomplete
-              {...categoryAutocompleteProps}
-              {...field}
-              onChange={(_, value) => {
-                field.onChange(value.id)
-              }}
-              getOptionLabel={(item) => {
-                return (
-                  categoryAutocompleteProps?.options?.find((p) => {
-                    const itemId = typeof item === 'object' ? item?.id?.toString() : item?.toString()
-                    const pId = p?.id?.toString()
-                    return itemId === pId
-                  })?.title ?? ''
-                )
-              }}
-              isOptionEqualToValue={(option, value) => {
-                const optionId = option?.id?.toString()
-                const valueId = typeof value === 'object' ? value?.id?.toString() : value?.toString()
-                return value === undefined || optionId === valueId
-              }}
-              renderInput={(params) => <TextField {...params} label={'Category'} margin="normal" variant="outlined" error={!!(errors as any)?.category?.id} helperText={(errors as any)?.category?.id?.message} required />}
-            />
-          )}
-        />
-        <Controller
-          name="status"
-          control={control}
-          render={({field}) => {
-            return (
-              <Select {...field} value={field?.value || 'draft'} label={'Status'}>
-                <MenuItem value="draft">Draft</MenuItem>
-                <MenuItem value="published">Published</MenuItem>
-                <MenuItem value="rejected">Rejected</MenuItem>
-              </Select>
-            )
-          }}
-        />
-      </Box>
-    </Create>
-  )
-}

src/pages/blog-posts/edit.tsx

@@ -1,101 +0,0 @@
-import {Autocomplete, Box, Select, TextField} from '@mui/material'
-import MenuItem from '@mui/material/MenuItem'
-import {Edit, useAutocomplete} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-import React from 'react'
-import {Controller} from 'react-hook-form'
-
-export const BlogPostEdit = () => {
-  const {
-    saveButtonProps,
-    refineCore: {queryResult, formLoading},
-    register,
-    control,
-    formState: {errors},
-  } = useForm({})
-
-  const blogPostsData = queryResult?.data?.data
-
-  const {autocompleteProps: categoryAutocompleteProps} = useAutocomplete({
-    resource: 'categories',
-    defaultValue: blogPostsData?.category?.id,
-  })
-
-  return (
-    <Edit isLoading={formLoading} saveButtonProps={saveButtonProps}>
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <TextField
-          {...register('title', {
-            required: 'This field is required',
-          })}
-          error={!!(errors as any)?.title}
-          helperText={(errors as any)?.title?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label={'Title'}
-          name="title"
-        />
-        <TextField
-          {...register('content', {
-            required: 'This field is required',
-          })}
-          error={!!(errors as any)?.content}
-          helperText={(errors as any)?.content?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          multiline
-          label={'Content'}
-          name="content"
-          rows={4}
-        />
-        <Controller
-          control={control}
-          name={'category.id'}
-          rules={{required: 'This field is required'}}
-          // eslint-disable-next-line
-          defaultValue={null as any}
-          render={({field}) => (
-            <Autocomplete
-              {...categoryAutocompleteProps}
-              {...field}
-              onChange={(_, value) => {
-                field.onChange(value.id)
-              }}
-              getOptionLabel={(item) => {
-                return (
-                  categoryAutocompleteProps?.options?.find((p) => {
-                    const itemId = typeof item === 'object' ? item?.id?.toString() : item?.toString()
-                    const pId = p?.id?.toString()
-                    return itemId === pId
-                  })?.title ?? ''
-                )
-              }}
-              isOptionEqualToValue={(option, value) => {
-                const optionId = option?.id?.toString()
-                const valueId = typeof value === 'object' ? value?.id?.toString() : value?.toString()
-                return value === undefined || optionId === valueId
-              }}
-              renderInput={(params) => <TextField {...params} label={'Category'} margin="normal" variant="outlined" error={!!(errors as any)?.category?.id} helperText={(errors as any)?.category?.id?.message} required />}
-            />
-          )}
-        />
-        <Controller
-          name="status"
-          control={control}
-          render={({field}) => {
-            return (
-              <Select {...field} value={field?.value || 'draft'} label={'Status'}>
-                <MenuItem value="draft">Draft</MenuItem>
-                <MenuItem value="published">Published</MenuItem>
-                <MenuItem value="rejected">Rejected</MenuItem>
-              </Select>
-            )
-          }}
-        />
-      </Box>
-    </Edit>
-  )
-}

src/pages/blog-posts/index.ts

@@ -1,4 +0,0 @@
-export * from './create'
-export * from './edit'
-export * from './list'
-export * from './show'

src/pages/blog-posts/list.tsx

@@ -1,105 +0,0 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
-import {useMany} from '@refinedev/core'
-import {DateField, DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import {Typography} from '@mui/material'
-import React from 'react'
-
-export const BlogPostList = () => {
-  const {dataGridProps} = useDataGrid({})
-
-  const {data: categoryData, isLoading: categoryIsLoading} = useMany({
-    resource: 'categories',
-    ids: dataGridProps?.rows?.map((item: any) => item?.category?.id).filter(Boolean) ?? [],
-    queryOptions: {
-      enabled: !!dataGridProps?.rows,
-    },
-  })
-
-  const columns = React.useMemo<GridColDef[]>(
-    () => [
-      {
-        field: 'id',
-        headerName: 'ID',
-        type: 'number',
-        minWidth: 50,
-        display: 'flex',
-        align: 'left',
-        headerAlign: 'left',
-      },
-      {
-        field: 'title',
-        headerName: 'Title',
-        minWidth: 200,
-        display: 'flex',
-      },
-      {
-        field: 'content',
-        flex: 1,
-        headerName: 'Content',
-        minWidth: 250,
-        display: 'flex',
-        renderCell: function render({value}) {
-          if (!value) return '-'
-          return (
-            <Typography component="p" whiteSpace="pre" overflow="hidden" textOverflow="ellipsis">
-              {value}
-            </Typography>
-          )
-        },
-      },
-      {
-        field: 'category',
-        headerName: 'Category',
-        minWidth: 160,
-        display: 'flex',
-        valueGetter: (_, row) => {
-          const value = row?.category
-          return value
-        },
-        renderCell: function render({value}) {
-          return categoryIsLoading ? <>Loading...</> : categoryData?.data?.find((item) => item.id === value?.id)?.title
-        },
-      },
-      {
-        field: 'status',
-        headerName: 'Status',
-        minWidth: 80,
-        display: 'flex',
-      },
-      {
-        field: 'createdAt',
-        headerName: 'Created at',
-        minWidth: 120,
-        display: 'flex',
-        renderCell: function render({value}) {
-          return <DateField value={value} />
-        },
-      },
-      {
-        field: 'actions',
-        headerName: 'Actions',
-        align: 'right',
-        headerAlign: 'right',
-        minWidth: 120,
-        sortable: false,
-        display: 'flex',
-        renderCell: function render({row}) {
-          return (
-            <>
-              <EditButton hideText recordItemId={row.id} />
-              <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton hideText recordItemId={row.id} />
-            </>
-          )
-        },
-      },
-    ],
-    [categoryData, categoryIsLoading],
-  )
-
-  return (
-    <List>
-      <DataGrid {...dataGridProps} columns={columns} />
-    </List>
-  )
-}

src/pages/blog-posts/show.tsx

@@ -1,53 +0,0 @@
-import {Stack, Typography} from '@mui/material'
-import {useOne, useShow} from '@refinedev/core'
-import {DateField, MarkdownField, NumberField, Show, TextFieldComponent as TextField} from '@refinedev/mui'
-
-export const BlogPostShow = () => {
-  const {query} = useShow({})
-
-  const {data, isLoading} = query
-
-  const record = data?.data
-
-  const {data: categoryData, isLoading: categoryIsLoading} = useOne({
-    resource: 'categories',
-    id: record?.category?.id || '',
-    queryOptions: {
-      enabled: !!record,
-    },
-  })
-
-  return (
-    <Show isLoading={isLoading}>
-      <Stack gap={1}>
-        <Typography variant="body1" fontWeight="bold">
-          {'ID'}
-        </Typography>
-        <TextField value={record?.id} />
-
-        <Typography variant="body1" fontWeight="bold">
-          {'Title'}
-        </Typography>
-        <TextField value={record?.title} />
-
-        <Typography variant="body1" fontWeight="bold">
-          {'Content'}
-        </Typography>
-        <MarkdownField value={record?.content} />
-
-        <Typography variant="body1" fontWeight="bold">
-          {'Category'}
-        </Typography>
-        {categoryIsLoading ? <>Loading...</> : <>{categoryData?.data?.title}</>}
-        <Typography variant="body1" fontWeight="bold">
-          {'Status'}
-        </Typography>
-        <TextField value={record?.status} />
-        <Typography variant="body1" fontWeight="bold">
-          {'CreatedAt'}
-        </Typography>
-        <DateField value={record?.createdAt} />
-      </Stack>
-    </Show>
-  )
-}

src/pages/categories/create.tsx

@@ -1,32 +0,0 @@
-import {Box, TextField} from '@mui/material'
-import {Create} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-
-export const CategoryCreate = () => {
-  const {
-    saveButtonProps,
-    refineCore: {formLoading},
-    register,
-    formState: {errors},
-  } = useForm({})
-
-  return (
-    <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <TextField
-          {...register('title', {
-            required: 'This field is required',
-          })}
-          error={!!(errors as any)?.title}
-          helperText={(errors as any)?.title?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label={'Title'}
-          name="title"
-        />
-      </Box>
-    </Create>
-  )
-}

src/pages/categories/edit.tsx

@@ -1,31 +0,0 @@
-import {Box, TextField} from '@mui/material'
-import {Edit} from '@refinedev/mui'
-import {useForm} from '@refinedev/react-hook-form'
-
-export const CategoryEdit = () => {
-  const {
-    saveButtonProps,
-    register,
-    formState: {errors},
-  } = useForm({})
-
-  return (
-    <Edit saveButtonProps={saveButtonProps}>
-      <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
-        <TextField
-          {...register('title', {
-            required: 'This field is required',
-          })}
-          error={!!(errors as any)?.title}
-          helperText={(errors as any)?.title?.message}
-          margin="normal"
-          fullWidth
-          InputLabelProps={{shrink: true}}
-          type="text"
-          label={'Title'}
-          name="title"
-        />
-      </Box>
-    </Edit>
-  )
-}

src/pages/categories/index.ts

@@ -1,4 +0,0 @@
-export * from './create'
-export * from './edit'
-export * from './list'
-export * from './show'

src/pages/categories/list.tsx

@@ -1,53 +0,0 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
-import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
-
-export const CategoryList = () => {
-  const {dataGridProps} = useDataGrid({})
-
-  const columns = React.useMemo<GridColDef[]>(
-    () => [
-      {
-        field: 'id',
-        headerName: 'ID',
-        type: 'number',
-        minWidth: 50,
-        display: 'flex',
-        align: 'left',
-        headerAlign: 'left',
-      },
-      {
-        field: 'title',
-        flex: 1,
-        headerName: 'Title',
-        minWidth: 200,
-        display: 'flex',
-      },
-      {
-        field: 'actions',
-        headerName: 'Actions',
-        align: 'right',
-        headerAlign: 'right',
-        minWidth: 120,
-        sortable: false,
-        display: 'flex',
-        renderCell: function render({row}) {
-          return (
-            <>
-              <EditButton hideText recordItemId={row.id} />
-              <ShowButton hideText recordItemId={row.id} />
-              <DeleteButton hideText recordItemId={row.id} />
-            </>
-          )
-        },
-      },
-    ],
-    [],
-  )
-
-  return (
-    <List>
-      <DataGrid {...dataGridProps} columns={columns} />
-    </List>
-  )
-}

src/pages/categories/show.tsx

@@ -1,25 +0,0 @@
-import {Stack, Typography} from '@mui/material'
-import {useShow} from '@refinedev/core'
-import {NumberField, Show, TextFieldComponent as TextField} from '@refinedev/mui'
-
-export const CategoryShow = () => {
-  const {query} = useShow({})
-  const {data, isLoading} = query
-
-  const record = data?.data
-
-  return (
-    <Show isLoading={isLoading}>
-      <Stack gap={1}>
-        <Typography variant="body1" fontWeight="bold">
-          {'ID'}
-        </Typography>
-        <TextField value={record?.id} />
-        <Typography variant="body1" fontWeight="bold">
-          {'Title'}
-        </Typography>
-        <TextField value={record?.title} />
-      </Stack>
-    </Show>
-  )
-}