lyndsiWilliams commented on a change in pull request #18593:
URL: https://github.com/apache/superset/pull/18593#discussion_r806459799
##########
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:
Are you referring to setting the state on lines 218-220? You might be
able to use the
[useCallback](https://reactjs.org/docs/hooks-reference.html#usecallback) hook
for this.
--
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-unsubscr...@superset.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: notifications-unsubscr...@superset.apache.org
For additional commands, e-mail: notifications-h...@superset.apache.org
