From 764ec73e94c977c6cffad47b928ffe977dce06ac Mon Sep 17 00:00:00 2001
From: Mike Abebe <mikiastilahun@gmail.com>
Date: Wed, 5 Apr 2023 16:56:59 +0300
Subject: [PATCH] feat/integrate number to grid

---
 .../components/grid/GridCell/GridCell.tsx     |  9 ++++---
 .../grid/GridCell/GridNumberCell.tsx          | 25 +++++++++++++++++++
 .../components/grid/GridCell/GridTextCell.tsx |  1 -
 3 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridNumberCell.tsx

diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
index 4473b59de9..62e75e6d81 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridCell.tsx
@@ -10,6 +10,7 @@ import GridTextCell from './GridTextCell';
 import { GridCheckBox } from './GridCheckBox';
 import { GridDate } from './GridDate';
 import { GridUrl } from './GridUrl';
+import { GridNumberCell } from './GridNumberCell';
 
 export const GridCell = ({
   cellIdentifier,
@@ -22,9 +23,9 @@ export const GridCell = ({
 }) => {
   return (
     <>
-      {cellIdentifier.fieldType === FieldType.MultiSelect || cellIdentifier.fieldType === FieldType.Checklist ? (
-        <p> Select solutions</p>
-      ) : cellIdentifier.fieldType === FieldType.SingleSelect ? (
+      {cellIdentifier.fieldType === FieldType.MultiSelect ||
+      cellIdentifier.fieldType === FieldType.Checklist ||
+      cellIdentifier.fieldType === FieldType.SingleSelect ? (
         <GridSingleSelectOptions
           cellIdentifier={cellIdentifier}
           cellCache={cellCache}
@@ -36,6 +37,8 @@ export const GridCell = ({
         <GridDate cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController}></GridDate>
       ) : cellIdentifier.fieldType === FieldType.URL ? (
         <GridUrl cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController}></GridUrl>
+      ) : cellIdentifier.fieldType === FieldType.Number ? (
+        <GridNumberCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
       ) : (
         <GridTextCell cellIdentifier={cellIdentifier} cellCache={cellCache} fieldController={fieldController} />
       )}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridNumberCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridNumberCell.tsx
new file mode 100644
index 0000000000..0cae27e7d8
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridNumberCell.tsx
@@ -0,0 +1,25 @@
+import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
+import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
+import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
+import { useCell } from '../../_shared/database-hooks/useCell';
+import { EditCellNumber } from '../../_shared/EditRow/EditCellNumber';
+
+export const GridNumberCell = ({
+  cellIdentifier,
+  cellCache,
+  fieldController,
+}: {
+  cellIdentifier: CellIdentifier;
+  cellCache: CellCache;
+  fieldController: FieldController;
+}) => {
+  const { data, cellController } = useCell(cellIdentifier, cellCache, fieldController);
+
+  return (
+    <div className='w-full'>
+      {cellController && (
+        <EditCellNumber data={data as string | undefined} cellController={cellController}></EditCellNumber>
+      )}
+    </div>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx
index 66d8f019a2..5baa354d40 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/grid/GridCell/GridTextCell.tsx
@@ -1,7 +1,6 @@
 import { CellIdentifier } from '@/appflowy_app/stores/effects/database/cell/cell_bd_svc';
 import { CellCache } from '@/appflowy_app/stores/effects/database/cell/cell_cache';
 import { FieldController } from '@/appflowy_app/stores/effects/database/field/field_controller';
-import { useState, useEffect } from 'react';
 import { useCell } from '../../_shared/database-hooks/useCell';
 import { EditCellText } from '../../_shared/EditRow/EditCellText';