From a0e375417330ce5d7982239883a60f5cc0475eba Mon Sep 17 00:00:00 2001
From: AAfghahi <48933336+AAfghahi@users.noreply.github.com>
Date: Fri, 12 Mar 2021 14:03:56 -0500
Subject: [PATCH] feat: create hooks to redux component (#13487)

* created TypedSelector

* made changes

* made discussed changes
---
 .../CRUD/data/database/DatabaseModal.tsx      | 15 ++---------
 .../src/views/CRUD/data/database/state.ts     | 25 +++++++++++++++++
 superset-frontend/src/views/types.ts          | 27 +++++++++++++++++++
 3 files changed, 54 insertions(+), 13 deletions(-)
 create mode 100644 superset-frontend/src/views/CRUD/data/database/state.ts
 create mode 100644 superset-frontend/src/views/types.ts

diff --git a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
index 7853d57a9..c48afd5bf 100644
--- a/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
+++ b/superset-frontend/src/views/CRUD/data/database/DatabaseModal.tsx
@@ -17,7 +17,6 @@
  * under the License.
  */
 import React, { FunctionComponent, useState, useEffect } from 'react';
-import { useSelector } from 'react-redux';
 import { styled, t, SupersetClient } from '@superset-ui/core';
 import InfoTooltip from 'src/common/components/InfoTooltip';
 import { useSingleViewResource } from 'src/views/CRUD/hooks';
@@ -30,6 +29,7 @@ import Button from 'src/components/Button';
 import IndeterminateCheckbox from 'src/components/IndeterminateCheckbox';
 import { JsonEditor } from 'src/components/AsyncAceEditor';
 import { DatabaseObject } from './types';
+import { useCommonConf } from './state';
 
 interface DatabaseModalProps {
   addDangerToast: (msg: string) => void;
@@ -40,17 +40,6 @@ interface DatabaseModalProps {
   database?: DatabaseObject | null; // If included, will go into edit mode
 }
 
-// todo: define common type fully in types file
-interface RootState {
-  common: {
-    conf: {
-      SQLALCHEMY_DOCS_URL: string;
-      SQLALCHEMY_DISPLAY_TEXT: string;
-    };
-  };
-  messageToast: Array<Object>;
-}
-
 const DEFAULT_TAB_KEY = '1';
 const StyledIcon = styled(Icon)`
   margin: auto ${({ theme }) => theme.gridUnit * 2}px auto 0;
@@ -143,7 +132,7 @@ const DatabaseModal: FunctionComponent<DatabaseModalProps> = ({
   const [db, setDB] = useState<DatabaseObject | null>(null);
   const [isHidden, setIsHidden] = useState<boolean>(true);
   const [tabKey, setTabKey] = useState<string>(DEFAULT_TAB_KEY);
-  const conf = useSelector((state: RootState) => state.common.conf);
+  const conf = useCommonConf();
 
   const isEditMode = database !== null;
   const defaultExtra =
diff --git a/superset-frontend/src/views/CRUD/data/database/state.ts b/superset-frontend/src/views/CRUD/data/database/state.ts
new file mode 100644
index 000000000..777fdc87b
--- /dev/null
+++ b/superset-frontend/src/views/CRUD/data/database/state.ts
@@ -0,0 +1,25 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { useSelector } from 'react-redux';
+import { ViewState } from 'src/views/types';
+
+export function useCommonConf() {
+  return useSelector((state: ViewState) => state.common.conf);
+}
diff --git a/superset-frontend/src/views/types.ts b/superset-frontend/src/views/types.ts
new file mode 100644
index 000000000..26e0f099c
--- /dev/null
+++ b/superset-frontend/src/views/types.ts
@@ -0,0 +1,27 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+export interface ViewState {
+  common: {
+    conf: {
+      SQLALCHEMY_DOCS_URL: string;
+      SQLALCHEMY_DISPLAY_TEXT: string;
+    };
+  };
+  messageToast: Array<Object>;
+}