refactor(doc-item): IDocItem-Typ durch Doc-Modell aus API ersetzen

src/client/dd-hub-react/src/api/document-service.ts

@@ -15,14 +15,14 @@ export type DocQuery = {
     name?: string | undefined
 }
 
-export function getDocuments({ id, name }: DocQuery): Promise<Doc[]> {
+export function getDocuments(query: DocQuery | undefined = undefined): Promise<Doc[]> {
     let documents = _documents;
 
-    if (id)
+    if (query?.id)
-        documents = documents.filter(d => d.id = id)
+        documents = documents.filter(d => d.id === query.id);
 
-    if (name)
+    if (query?.name)
-        documents = documents.filter(d => d.name = name)
+        documents = documents.filter(d => d.name === query.name);
 
     return Promise.resolve(documents);
 }

src/client/dd-hub-react/src/pages/doc-search.tsx

@@ -1,16 +1,27 @@
+import { useEffect, useState } from 'react';
+
 import { _posts } from 'src/_mock';
 import { CONFIG } from 'src/config-global';
+import { Doc, getDocuments } from 'src/api/document-service';
 
 import { DocSearchView } from 'src/sections/document/view';
 
 // ----------------------------------------------------------------------
 
 export default function Page() {
+  const [docs, setDocs] = useState<Doc[]>([]);
+
+  useEffect(() => {
+    getDocuments({}).then((res) => {
+      setDocs(res);
+    });
+  }, []);
+
   return (
     <>
       <title>{`Document Search - ${CONFIG.appName}`}</title>
 
-      <DocSearchView posts={_posts} />
+      <DocSearchView docs={docs} />
     </>
   );
 }

src/client/dd-hub-react/src/sections/document/doc-item.tsx

@@ -10,29 +10,14 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 
 import { fDate } from 'src/utils/format-time';
-import { fShortenNumber } from 'src/utils/format-number';
+
+import { Doc } from 'src/api/document-service';
 
 import { Iconify } from 'src/components/iconify';
 import { SvgColor } from 'src/components/svg-color';
 
 // ----------------------------------------------------------------------
 
-export type IDocItem = {
-  id: string;
-  title: string;
-  coverUrl: string;
-  totalViews: number;
-  description: string;
-  totalShares: number;
-  totalComments: number;
-  totalFavorites: number;
-  postedAt: string | number | null;
-  author: {
-    name: string;
-    avatarUrl: string;
-  };
-};
-
 export function DocItem({
     sx,
     doc,
@@ -40,14 +25,14 @@ export function DocItem({
     large,
     ...other
 }: CardProps & {
-  doc: IDocItem;
+    doc: Doc;
     long: boolean;
     large: boolean;
 }) {
     const renderAvatar = (
         <Avatar
-      alt={doc.author.name}
+            alt={doc.addedWho}
-      src={doc.author.avatarUrl}
+            src={doc.addedWho}
             sx={{
                 left: 24,
                 zIndex: 9,
@@ -77,7 +62,7 @@ export function DocItem({
                 }),
             }}
         >
-      {doc.title}
+            {doc.name}
         </Link>
     );
 
@@ -93,9 +78,9 @@ export function DocItem({
             }}
         >
             {[
-        { number: doc.totalComments, icon: 'solar:chat-round-dots-bold' },
+                { data: doc.addedWho, icon: 'solar:chat-round-dots-bold' },
-        { number: doc.totalViews, icon: 'solar:eye-bold' },
+                { data: doc.changedWho, icon: 'solar:eye-bold' },
-        { number: doc.totalShares, icon: 'solar:share-bold' },
+                { data: doc.changedWhen, icon: 'solar:share-bold' },
             ].map((info, _index) => (
                 <Box
                     key={_index}
@@ -108,7 +93,7 @@ export function DocItem({
                     }}
                 >
                     <Iconify width={16} icon={info.icon as IconifyName} sx={{ mr: 0.5 }} />
-          <Typography variant="caption">{fShortenNumber(info.number)}</Typography>
+                    <Typography variant="caption">{info.data?.toString()}</Typography>
                 </Box>
             ))}
         </Box>
@@ -117,8 +102,8 @@ export function DocItem({
     const renderCover = (
         <Box
             component="img"
-      alt={doc.title}
+            alt={doc.name}
-      src={doc.coverUrl}
+            src={doc.name}
             sx={{
                 top: 0,
                 width: 1,
@@ -142,7 +127,7 @@ export function DocItem({
                 }),
             }}
         >
-      {fDate(doc.postedAt)}
+            {fDate(doc.addedWhen)}
         </Typography>
     );
 

src/client/dd-hub-react/src/sections/document/doc-search.tsx

@@ -4,14 +4,14 @@ import TextField from '@mui/material/TextField';
 import InputAdornment from '@mui/material/InputAdornment';
 import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete';
 
-import { Iconify } from 'src/components/iconify';
+import { Doc } from 'src/api/document-service';
 
-import type { IDocItem } from './doc-item';
+import { Iconify } from 'src/components/iconify';
 
 // ----------------------------------------------------------------------
 
 type DocSearchProps = {
-  posts: IDocItem[];
+  posts: Doc[];
   sx?: SxProps<Theme>;
 };
 
@@ -33,7 +33,7 @@ export function DocSearch({ posts, sx }: DocSearchProps) {
         },
       }}
       options={posts}
-      getOptionLabel={(post) => post.title}
+      getOptionLabel={(post) => post.name}
       isOptionEqualToValue={(option, value) => option.id === value.id}
       renderInput={(params) => (
         <TextField

src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx

@@ -6,6 +6,7 @@ import Button from '@mui/material/Button';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 
+import { Doc } from 'src/api/document-service';
 import { DashboardContent } from 'src/layouts/dashboard';
 import { Filter, getAttributesAsync } from 'src/api/attribute-service';
 
@@ -17,15 +18,13 @@ import { TextFilter } from '../text-filter';
 import CreateFilterModal from './create-filter-modal';
 import { DecimalFilter, IntFilter } from '../num-filter';
 import { DateFilter, DateTimeFilter, TimeFilter } from '../date-filter';
-
-import type { IDocItem } from '../doc-item';
 // ----------------------------------------------------------------------
 
 type Props = {
-  posts: IDocItem[];
+  docs: Doc[];
 };
 
-export function DocSearchView({ posts }: Props) {
+export function DocSearchView({ docs }: Props) {
   const [sortBy, setSortBy] = useState('latest');
 
   const [filters, setFilters] = useState<Filter[]>([])
@@ -51,7 +50,7 @@ export function DocSearchView({ posts }: Props) {
   //     justifyContent: 'space-between',
   //   }}
   // >
-  //   <DocSearch posts={posts} />
+  //   <DocSearch docs={docs} />
   //   <DocSort
   //     sortBy={sortBy}
   //     onSort={handleSort}
@@ -145,20 +144,20 @@ export function DocSearchView({ posts }: Props) {
       </Grid>
 
       <Grid container spacing={3}>
-        {posts.map((post, index) => {
+        {docs.map((doc, index) => {
           const large = false;
           const long = false;
 
           return (
             <Grid
-              key={post.id}
+              key={doc.id}
               size={{
                 xs: 12,
                 sm: large ? 12 : 6,
                 md: large ? 6 : 3,
               }}
             >
-              <DocItem doc={post} long={long} large={large} />
+              <DocItem doc={doc} long={long} large={large} />
             </Grid>
           );
         })}