chore: create cell component for each field type

frontend/appflowy_tauri/src/appflowy_app/components/_shared/database-hooks/useCell.ts

@@ -2,31 +2,18 @@ import { CellIdentifier } from '../../../stores/effects/database/cell/cell_bd_sv
 import { CellCache } from '../../../stores/effects/database/cell/cell_cache';
 import { FieldController } from '../../../stores/effects/database/field/field_controller';
 import { CellControllerBuilder } from '../../../stores/effects/database/cell/controller_builder';
-import { DateCellDataPB, FieldType, SelectOptionCellDataPB } from '../../../../services/backend';
+import { DateCellDataPB, SelectOptionCellDataPB, URLCellDataPB } from '../../../../services/backend';
 import { useState } from 'react';
 
 export const useCell = (cellIdentifier: CellIdentifier, cellCache: CellCache, fieldController: FieldController) => {
-  const [data, setData] = useState<string[]>([]);
+  const [data, setData] = useState<DateCellDataPB | URLCellDataPB | SelectOptionCellDataPB | string | undefined>();
 
   const loadCell = async () => {
     const builder = new CellControllerBuilder(cellIdentifier, cellCache, fieldController);
     const cellController = builder.build();
     cellController.subscribeChanged({
       onCellChanged: (value) => {
-        if (
+        setData(value.unwrap());
-          cellIdentifier.fieldType === FieldType.Checklist ||
-          cellIdentifier.fieldType === FieldType.MultiSelect ||
-          cellIdentifier.fieldType === FieldType.SingleSelect
-        ) {
-          const v = value.unwrap() as SelectOptionCellDataPB;
-          setData(v.select_options.map((option) => option.id));
-        } else if (cellIdentifier.fieldType === FieldType.DateTime) {
-          const v = value.unwrap() as DateCellDataPB;
-          setData([v.date]);
-        } else {
-          const v = value.unwrap() as string;
-          setData([v]);
-        }
       },
     });
 

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardCell.tsx

@@ -2,7 +2,11 @@ import { useCell } from '../_shared/database-hooks/useCell';
 import { CellIdentifier } from '../../stores/effects/database/cell/cell_bd_svc';
 import { CellCache } from '../../stores/effects/database/cell/cell_cache';
 import { FieldController } from '../../stores/effects/database/field/field_controller';
-import {useEffect} from "react";
+import { useEffect } from 'react';
+import { DateCellDataPB, FieldType, SelectOptionCellDataPB } from '../../../services/backend';
+import { BoardOptionsCell } from './BoardOptionsCell';
+import { BoardDateCell } from './BoardDateCell';
+import { BoardTextCell } from './BoardTextCell';
 
 export const BoardCell = ({
   cellIdentifier,
@@ -16,8 +20,21 @@ export const BoardCell = ({
   const { loadCell, data } = useCell(cellIdentifier, cellCache, fieldController);
   useEffect(() => {
     void (async () => {
-      await loadCell()
+      await loadCell();
     })();
-  }, [])
+  }, []);
-  return <div>{data}</div>;
+
+  return (
+    <>
+      {cellIdentifier.fieldType === FieldType.SingleSelect ||
+      cellIdentifier.fieldType === FieldType.MultiSelect ||
+      cellIdentifier.fieldType === FieldType.Checklist ? (
+        <BoardOptionsCell value={data as SelectOptionCellDataPB | undefined}></BoardOptionsCell>
+      ) : cellIdentifier.fieldType === FieldType.DateTime ? (
+        <BoardDateCell value={data as DateCellDataPB | undefined}></BoardDateCell>
+      ) : (
+        <BoardTextCell value={data as string | undefined}></BoardTextCell>
+      )}
+    </>
+  );
 };

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardDateCell.tsx

@@ -0,0 +1,5 @@
+import { DateCellDataPB } from '../../../services/backend';
+
+export const BoardDateCell = ({ value }: { value: DateCellDataPB | undefined }) => {
+  return <div>{value?.date || ''}</div>;
+};

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardOptionsCell.tsx

@@ -0,0 +1,5 @@
+import { SelectOptionCellDataPB, SelectOptionColorPB } from '../../../services/backend';
+
+export const BoardOptionsCell = ({ value }: { value: SelectOptionCellDataPB | undefined }) => {
+  return <>{value?.select_options?.map((option, index) => <div key={index}>{option?.name || ''}</div>) || ''}</>;
+};

frontend/appflowy_tauri/src/appflowy_app/components/board/BoardTextCell.tsx

@@ -0,0 +1,3 @@
+export const BoardTextCell = ({ value }: { value: string | undefined }) => {
+  return <div>{value || ''}</div>;
+};