[GitHub] [superset] EugeneTorap commented on a change in pull request #18593: refactor: converted ResultSet to functional component

[GitBox <gi...@apache.org>]

EugeneTorap commented on a change in pull request #18593:
URL: https://github.com/apache/superset/pull/18593#discussion_r800188734



##########
File path: superset-frontend/src/SqlLab/components/ResultSet/index.tsx
##########
@@ -173,106 +160,93 @@ const updateDataset = async (
   return data.json.result;
 };
 
-export default class ResultSet extends React.PureComponent<
-  ResultSetProps,
-  ResultSetState
-> {
-  static defaultProps = {
-    cache: false,
-    csv: true,
-    database: {},
-    search: true,
-    showSql: false,
-    visualize: true,
+const ResultSet = ({
+  actions,
+  cache = false,
+  csv = true,
+  database = {},
+  displayLimit,
+  height,
+  query,
+  search = true,
+  showSql = false,
+  visualize = true,
+  user,
+  defaultQueryLimit,
+}: ResultSetProps) => {
+  const [searchText, setSearchText] = useState('');
+  const [cachedData, setCachedData] = useState<Record<string, unknown>[]>([]);
+  const [showSaveDatasetModal, setShowSaveDatasetModal] = useState(false);
+  const [saveDatasetRadioBtnState, setSaveDatasetRadioBtnState] = useState(
+    DatasetRadioState.SAVE_NEW,
+  );
+  const [shouldOverwriteDataSet, setShouldOverwriteDataSet] = useState(false);
+  const [datasetToOverwrite, setDatasetToOverwrite] = useState<
+    Record<string, any>
+  >({});
+  const [userDatasetOptions, setUserDatasetOptions] = useState<
+    DatasetOptionAutocomplete[]
+  >([]);
+  const [alertIsOpen, setAlertIsOpen] = useState(false);
+
+  const reRunQueryIfSessionTimeoutErrorOnMount = () => {
+    if (
+      query.errorMessage &&
+      query.errorMessage.indexOf('session timed out') > 0
+    ) {
+      actions.reRunQuery(query);
+    }
   };
 
-  constructor(props: ResultSetProps) {
-    super(props);
-    this.state = {
-      searchText: '',
-      showExploreResultsButton: false,
-      data: [],
-      showSaveDatasetModal: false,
-      newSaveDatasetName: this.getDefaultDatasetName(),
-      saveDatasetRadioBtnState: DatasetRadioState.SAVE_NEW,
-      shouldOverwriteDataSet: false,
-      datasetToOverwrite: {},
-      saveModalAutocompleteValue: '',
-      userDatasetOptions: [],
-      alertIsOpen: false,
-    };
-    this.changeSearch = this.changeSearch.bind(this);
-    this.fetchResults = this.fetchResults.bind(this);
-    this.popSelectStar = this.popSelectStar.bind(this);
-    this.reFetchQueryResults = this.reFetchQueryResults.bind(this);
-    this.toggleExploreResultsButton =
-      this.toggleExploreResultsButton.bind(this);
-    this.handleSaveInDataset = this.handleSaveInDataset.bind(this);
-    this.handleHideSaveModal = this.handleHideSaveModal.bind(this);
-    this.handleDatasetNameChange = this.handleDatasetNameChange.bind(this);
-    this.handleSaveDatasetRadioBtnState =
-      this.handleSaveDatasetRadioBtnState.bind(this);
-    this.handleOverwriteCancel = this.handleOverwriteCancel.bind(this);
-    this.handleOverwriteDataset = this.handleOverwriteDataset.bind(this);
-    this.handleOverwriteDatasetOption =
-      this.handleOverwriteDatasetOption.bind(this);
-    this.handleSaveDatasetModalSearch = debounce(
-      this.handleSaveDatasetModalSearch.bind(this),
-      1000,
-    );
-    this.handleFilterAutocompleteOption =
-      this.handleFilterAutocompleteOption.bind(this);
-    this.handleOnChangeAutoComplete =
-      this.handleOnChangeAutoComplete.bind(this);
-    this.handleExploreBtnClick = this.handleExploreBtnClick.bind(this);
-  }
-
-  async componentDidMount() {
+  useEffect(() => {
     // only do this the first time the component is rendered/mounted
-    this.reRunQueryIfSessionTimeoutErrorOnMount();
-    const userDatasetsOwned = await this.getUserDatasets();
-    this.setState({ userDatasetOptions: userDatasetsOwned });
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: ResultSetProps) {
-    // when new results comes in, save them locally and clear in store
+    reRunQueryIfSessionTimeoutErrorOnMount();
+    (async () => {
+      const userDatasetsOwned = await getUserDatasets();
+      setUserDatasetOptions(userDatasetsOwned);
+    })();
+  }, []);
+
+  const prevQuery = usePrevious(query);
+  useEffect(() => {
     if (
-      this.props.cache &&
-      !nextProps.query.cached &&
-      nextProps.query.results &&
-      nextProps.query.results.data &&
-      nextProps.query.results.data.length > 0
+      cache &&
+      !prevQuery?.cached &&
+      prevQuery?.results?.data &&
+      prevQuery.results.data.length > 0
     ) {
-      this.setState({ data: nextProps.query.results.data }, () =>
-        this.clearQueryResults(nextProps.query),
-      );
+      // this.setState({ data: prevQuery.results.data }, () =>
+      //   clearQueryResults(prevQuery),
+      // );
+      setCachedData(prevQuery.results.data);
+      actions.clearQueryResults(prevQuery);

Review comment:
       @lyndsiWilliams Do we have `useStateWithCallback` for it?




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org



---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscribe@superset.apache.org
For additional commands, e-mail: notifications-help@superset.apache.org