Delete CollectionAttributes and CollectionCreate "page" components

src/components/Layout.tsx

@@ -3,6 +3,8 @@ import { SessionInfoBar } from "./SessionInfoBar";
 import { HomePage } from "@src/components/HomePage";
 import { Sidebar } from "@src/components/Sidebar";
 import { BucketPermissions } from "@src/components/bucket/BucketPermissions";
+import { CollectionAttributes } from "@src/components/collection/CollectionAttributes";
+import { CollectionCreate } from "@src/components/collection/CollectionCreate";
 import { CollectionPermissions } from "@src/components/collection/CollectionPermissions";
 import { GroupPermissions } from "@src/components/group/GroupPermissions";
 import { RecordPermissions } from "@src/components/record/RecordPermissions";
@@ -12,8 +14,6 @@ import BucketCollectionsPage from "@src/containers/bucket/BucketCollectionsPage"
 import BucketCreatePage from "@src/containers/bucket/BucketCreatePage";
 import BucketGroupsPage from "@src/containers/bucket/BucketGroupsPage";
 import BucketHistoryPage from "@src/containers/bucket/BucketHistoryPage";
-import CollectionAttributesPage from "@src/containers/collection/CollectionAttributesPage";
-import CollectionCreatePage from "@src/containers/collection/CollectionCreatePage";
 import CollectionHistoryPage from "@src/containers/collection/CollectionHistoryPage";
 import CollectionRecordsPage from "@src/containers/collection/CollectionRecordsPage";
 import GroupAttributesPage from "@src/containers/group/GroupAttributesPage";
@@ -164,7 +164,7 @@ export function Layout() {
                                 exact
                                 title="create"
                                 path="/buckets/:bid/collections/create"
-                                component={CollectionCreatePage}
+                                component={CollectionCreate}
                               />
                               <Redirect
                                 exact
@@ -180,7 +180,7 @@ export function Layout() {
                                     exact
                                     title="attributes"
                                     path="/buckets/:bid/collections/:cid/attributes"
-                                    component={CollectionAttributesPage}
+                                    component={CollectionAttributes}
                                   />
                                   <CreateRoute
                                     exact

src/components/collection/CollectionAttributes.tsx

@@ -1,66 +1,32 @@
 import CollectionForm from "./CollectionForm";
 import CollectionTabs from "./CollectionTabs";
-import * as BucketActions from "@src/actions/bucket";
+import { deleteCollection, updateCollection } from "@src/actions/bucket";
 import Spinner from "@src/components/Spinner";
-import type {
-  BucketState,
-  Capabilities,
-  CollectionData,
-  CollectionRouteMatch,
-  CollectionState,
-  SessionState,
-} from "@src/types";
+import { useAppDispatch, useAppSelector } from "@src/hooks/app";
+import type { CollectionData, RouteParams } from "@src/types";
 import React from "react";
+import { useParams } from "react-router";
 
-export type OwnProps = {
-  match: CollectionRouteMatch;
-};
+export function CollectionAttributes() {
+  const dispatch = useAppDispatch();
+  const { bucket, session, collection } = useAppSelector(state => state);
+  const capabilities = session.serverInfo.capabilities;
+  const { bid, cid } = useParams<RouteParams>();
 
-export type StateProps = {
-  session: SessionState;
-  bucket: BucketState;
-  collection: CollectionState;
-  capabilities: Capabilities;
-};
-
-export type Props = OwnProps &
-  StateProps & {
-    updateCollection: typeof BucketActions.updateCollection;
-    deleteCollection: typeof BucketActions.deleteCollection;
-  };
-
-export default function CollectionAttributes({
-  match,
-  session,
-  bucket,
-  collection,
-  capabilities,
-  updateCollection,
-  deleteCollection,
-}: Props) {
   const onSubmit = (formData: CollectionData) => {
-    const {
-      params: { bid, cid },
-    } = match;
-    updateCollection(bid, cid, { data: formData });
+    dispatch(updateCollection(bid, cid, { data: formData }));
   };
 
   const handleDeleteCollection = (cid: string) => {
-    const {
-      params: { bid },
-    } = match;
     const message = [
       "This will delete the collection and all the records it contains.",
       "Are you sure?",
     ].join(" ");
     if (confirm(message)) {
-      deleteCollection(bid, cid);
+      dispatch(deleteCollection(bid, cid));
     }
   };
 
-  const {
-    params: { bid, cid },
-  } = match;
   const { busy, data: formData } = collection;
 
   return (
@@ -82,7 +48,6 @@ export default function CollectionAttributes({
           <Spinner />
         ) : (
           <CollectionForm
-            bid={bid}
             cid={cid}
             session={session}
             bucket={bucket}

src/components/collection/CollectionCreate.tsx

@@ -1,40 +1,16 @@
 import CollectionForm from "./CollectionForm";
-import * as BucketActions from "@src/actions/bucket";
+import { createCollection } from "@src/actions/bucket";
 import Spinner from "@src/components/Spinner";
-import type {
-  BucketRouteMatch,
-  BucketState,
-  CollectionState,
-  SessionState,
-} from "@src/types";
+import { useAppDispatch, useAppSelector } from "@src/hooks/app";
+import type { RouteParams } from "@src/types";
 import React from "react";
+import { useParams } from "react-router";
 
-export type OwnProps = {
-  match: BucketRouteMatch;
-};
-
-export type StateProps = {
-  session: SessionState;
-  bucket: BucketState;
-  collection: CollectionState;
-};
-
-export type Props = OwnProps &
-  StateProps & {
-    createCollection: typeof BucketActions.createCollection;
-  };
-
-export default function CollectionCreate({
-  match,
-  session,
-  bucket,
-  collection,
-  createCollection,
-}: Props) {
-  const {
-    params: { bid },
-  } = match;
-  const { busy } = session;
+export function CollectionCreate() {
+  const dispatch = useAppDispatch();
+  const { session, bucket, collection } = useAppSelector(state => state);
+  const busy = session.busy;
+  const { bid } = useParams<RouteParams>();
 
   if (busy) {
     return <Spinner />;
@@ -51,7 +27,7 @@ export default function CollectionCreate({
             session={session}
             bucket={bucket}
             collection={collection}
-            onSubmit={formData => createCollection(bid, formData)}
+            onSubmit={formData => dispatch(createCollection(bid, formData))}
           />
         </div>
       </div>