From e4cead0e3341225501ac3ce07b7cf0e1ad290743 Mon Sep 17 00:00:00 2001
From: Joshen Lim <joshenlimek@gmail.com>
Date: Tue, 14 Dec 2021 11:27:39 +0700
Subject: [PATCH] Ensure that removing content in table editor properly clears
 the spreadsheet import panel

---
 .../SpreadsheetImport.constants.ts            |  9 +++++++
 .../SpreadsheetImport/SpreadsheetImport.tsx   | 26 +++++++++++++------
 .../SpreadsheetImport.types.ts                |  8 ++++++
 3 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.types.ts

diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.constants.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.constants.ts
index 163ab7e04a9..df48b1dab40 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.constants.ts
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.constants.ts
@@ -1,5 +1,14 @@
+import { SpreadsheetData } from './SpreadsheetImport.types'
+
 export const UPLOAD_FILE_TYPES = [
   'text/csv',
   'text/tab-separated-values',
   'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
 ]
+
+export const EMPTY_SPREADSHEET_DATA: SpreadsheetData = {
+  headers: [],
+  rows: [],
+  rowCount: 0,
+  columnTypeMap: {},
+}
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx
index 124e9bd783f..a257113262d 100644
--- a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.tsx
@@ -1,14 +1,15 @@
-import { useCallback, useState, FC } from 'react'
+import { useCallback, useState, FC, useEffect } from 'react'
 import { debounce, includes } from 'lodash'
 import { SidePanel, Typography } from '@supabase/ui'
 
 import { useStore } from 'hooks'
 import Telemetry from 'lib/telemetry'
 import ActionBar from '../../ActionBar'
-import { parseSpreadsheet, parseSpreadsheetText } from './SpreadsheetImport.utils'
-import { UPLOAD_FILE_TYPES } from './SpreadsheetImport.constants'
 import SpreadSheetTextInput from './SpreadSheetTextInput'
 import SpreadSheetFileUpload from './SpreadSheetFileUpload'
+import { SpreadsheetData } from './SpreadsheetImport.types'
+import { parseSpreadsheet, parseSpreadsheetText } from './SpreadsheetImport.utils'
+import { UPLOAD_FILE_TYPES, EMPTY_SPREADSHEET_DATA } from './SpreadsheetImport.constants'
 
 interface Props {
   debounceDuration?: number
@@ -29,7 +30,16 @@ const SpreadsheetImport: FC<Props> = ({
 }) => {
   const { ui } = useStore()
 
-  const [spreadsheetData, setSpreadsheetData] = useState<any>({
+  useEffect(() => {
+    if (visible) {
+      if (headers.length === 0) {
+        setSpreadsheetData(EMPTY_SPREADSHEET_DATA)
+        setUploadedFile(null)
+      }
+    }
+  }, [visible])
+
+  const [spreadsheetData, setSpreadsheetData] = useState<SpreadsheetData>({
     headers: headers,
     rows: rows,
     rowCount: 0,
@@ -81,11 +91,11 @@ const SpreadsheetImport: FC<Props> = ({
   }
 
   const removeUploadedFile = () => {
-    setSpreadsheetData({ headers: [], rows: [], rowCount: 0, columnTypeMap: {} })
+    setSpreadsheetData(EMPTY_SPREADSHEET_DATA)
     setUploadedFile(null)
   }
 
-  const readInputSpreadsheet = async (text: string) => {
+  const readSpreadsheetText = async (text: string) => {
     if (text.length > 0) {
       const { headers, rows, errors } = await parseSpreadsheetText(text)
       if (errors.length <= 5) {
@@ -105,11 +115,11 @@ const SpreadsheetImport: FC<Props> = ({
       }
       setSpreadsheetData({ headers, rows, rowCount: rows.length, columnTypeMap: {} })
     } else {
-      setSpreadsheetData({ headers: [], rows: [], rowCount: 0, columnTypeMap: {} })
+      setSpreadsheetData(EMPTY_SPREADSHEET_DATA)
     }
   }
 
-  const handler = useCallback(debounce(readInputSpreadsheet, debounceDuration), [])
+  const handler = useCallback(debounce(readSpreadsheetText, debounceDuration), [])
   const onInputChange = (event: any) => {
     setInput(event.target.value)
     handler(event.target.value)
diff --git a/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.types.ts b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.types.ts
new file mode 100644
index 00000000000..4ce7e40a845
--- /dev/null
+++ b/studio/components/interfaces/TableGridEditor/SidePanelEditor/TableEditor/SpreadsheetImport/SpreadsheetImport.types.ts
@@ -0,0 +1,8 @@
+import { Dictionary } from '@supabase/grid'
+
+export interface SpreadsheetData {
+  headers: string[]
+  rows: any[]
+  rowCount: number
+  columnTypeMap: Dictionary<string>
+}