re-structure to monorepo.

packages/webapp/src/containers/Views/ViewFormPage.tsx

@@ -0,0 +1,130 @@
+// @ts-nocheck
+import React, { useEffect, useState, useCallback } from 'react';
+import { useAsync } from 'react-use';
+import { useParams } from 'react-router-dom';
+import { Intent, Alert } from '@blueprintjs/core';
+import {
+  If,
+  AppToaster,
+  DashboardInsider,
+  DashboardPageContent,
+  FormattedMessage as T,
+  FormattedHTMLMessage,
+} from '@/components';
+
+import ViewForm from '@/containers/Views/ViewForm';
+
+import { compose } from '@/utils';
+
+import withResourcesActions from '@/containers/Resources/withResourcesActions';
+import withViewsActions from '@/containers/Views/withViewsActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+
+// @flow
+function ViewFormPage({
+  // #withDashboardActions
+  changePageTitle,
+  changePageSubtitle,
+
+  requestFetchResourceFields,
+  requestFetchResourceColumns,
+  requestFetchViewResource,
+
+  requestFetchView,
+  requestDeleteView,
+}) {
+  const { resource_slug: resourceSlug, view_id: viewId } = useParams();
+  const [stateDeleteView, setStateDeleteView] = useState(null);
+
+  const fetchHook = useAsync(async () => {
+    return Promise.all([
+      ...(resourceSlug
+        ? [
+            requestFetchResourceColumns(resourceSlug),
+            requestFetchResourceFields(resourceSlug),
+          ]
+        : viewId
+        ? [requestFetchViewResource(viewId)]
+        : []),
+      ...(viewId ? [requestFetchView(viewId)] : []),
+    ]);
+  }, []);
+
+  useEffect(() => {
+    if (viewId) {
+      changePageTitle(intl.get('edit_custom_view'));
+    } else {
+      changePageTitle(intl.get('new_custom_view'));
+    }
+    return () => {
+      changePageTitle('');
+    };
+  }, [viewId, changePageTitle]);
+
+  // Handle delete view button click.
+  const handleDeleteView = useCallback((view) => {
+    setStateDeleteView(view);
+  }, []);
+
+  // Handle cancel delete button click.
+  const handleCancelDeleteView = useCallback(() => {
+    setStateDeleteView(null);
+  }, []);
+
+  // Handle confirm delete custom view.
+  const handleConfirmDeleteView = useCallback(() => {
+    requestDeleteView(stateDeleteView.id).then((response) => {
+      setStateDeleteView(null);
+      AppToaster.show({
+        message: intl.get('the_custom_view_has_been_deleted_successfully'),
+        intent: Intent.SUCCESS,
+      });
+    });
+  }, [requestDeleteView, stateDeleteView]);
+
+  return (
+    <DashboardInsider
+      name={'view-form'}
+      loading={fetchHook.loading}
+      mount={false}
+    >
+      <DashboardPageContent>
+        <If condition={fetchHook.value}>
+          <ViewForm
+            viewId={viewId}
+            resourceName={resourceSlug}
+            onDelete={handleDeleteView}
+          />
+
+          <Alert
+            cancelButtonText={<T id={'cancel'} />}
+            confirmButtonText={<T id={'delete'} />}
+            icon="trash"
+            intent={Intent.DANGER}
+            isOpen={stateDeleteView}
+            onCancel={handleCancelDeleteView}
+            onConfirm={handleConfirmDeleteView}
+          >
+            <p>
+              <FormattedHTMLMessage
+                id={'once_delete_these_views_you_will_not_able_restore_them'}
+              />
+            </p>
+          </Alert>
+        </If>
+
+        <If condition={fetchHook.error}>
+          <h4>
+            <T id={'something_wrong'} />
+          </h4>
+        </If>
+      </DashboardPageContent>
+    </DashboardInsider>
+  );
+}
+
+export default compose(
+  withDashboardActions,
+  withViewsActions,
+  withResourcesActions,
+)(ViewFormPage);