fix: Move "public document sharing" to "Permissions" (#2496)

* Convert to functional component * Move public sharing to permissions * Add collections.permission_changed event * Account for null * Update server/events.js Co-authored-by: Tom Moor <tom.moor@gmail.com> * Add collections.permission_changed event * Remove name Co-authored-by: Tom Moor <tom.moor@gmail.com>
2021-08-30 11:43:42 +05:30
parent 08a8fea69a
commit 4929fbaccb
6 changed files with 161 additions and 127 deletions
--- a/app/scenes/CollectionEdit.js
+++ b/app/scenes/CollectionEdit.js
@@ -1,10 +1,8 @@
 // @flow
-import { observable } from "mobx";
-import { inject, observer } from "mobx-react";
+import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, Trans, type TFunction } from "react-i18next";
-import AuthStore from "stores/AuthStore";
-import ToastsStore from "stores/ToastsStore";
+import { useState } from "react";
+import { Trans, useTranslation } from "react-i18next";
 import Collection from "models/Collection";
 import Button from "components/Button";
 import Flex from "components/Flex";
@@ -12,141 +10,104 @@ import HelpText from "components/HelpText";
 import IconPicker from "components/IconPicker";
 import Input from "components/Input";
 import InputSelect from "components/InputSelect";
-import Switch from "components/Switch";
+import useToasts from "hooks/useToasts";

 type Props = {
  collection: Collection,
-  toasts: ToastsStore,
-  auth: AuthStore,
  onSubmit: () => void,
-  t: TFunction,
 };

-@observer
-class CollectionEdit extends React.Component<Props> {
-  @observable name: string = this.props.collection.name;
-  @observable sharing: boolean = this.props.collection.sharing;
-  @observable icon: string = this.props.collection.icon;
-  @observable color: string = this.props.collection.color || "#4E5C6E";
-  @observable sort: { field: string, direction: "asc" | "desc" } = this.props
-    .collection.sort;
-  @observable isSaving: boolean;
+const CollectionEdit = ({ collection, onSubmit }: Props) => {
+  const [name, setName] = useState(collection.name);
+  const [icon, setIcon] = useState(collection.icon);
+  const [color, setColor] = useState(collection.color || "#4E5C6E");
+  const [sort, setSort] = useState<{
+    field: string,
+    direction: "asc" | "desc",
+  }>(collection.sort);
+  const [isSaving, setIsSaving] = useState();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();

-  handleSubmit = async (ev: SyntheticEvent<*>) => {
-    ev.preventDefault();
-    this.isSaving = true;
-    const { t } = this.props;
+  const handleSubmit = React.useCallback(
+    async (ev: SyntheticEvent<*>) => {
+      ev.preventDefault();
+      setIsSaving(true);

-    try {
-      await this.props.collection.save({
-        name: this.name,
-        icon: this.icon,
-        color: this.color,
-        sharing: this.sharing,
-        sort: this.sort,
-      });
-      this.props.onSubmit();
-      this.props.toasts.showToast(t("The collection was updated"), {
-        type: "success",
-      });
-    } catch (err) {
-      this.props.toasts.showToast(err.message, { type: "error" });
-    } finally {
-      this.isSaving = false;
-    }
-  };
+      try {
+        await collection.save({
+          name,
+          icon,
+          color,
+          sort,
+        });
+        onSubmit();
+        showToast(t("The collection was updated"), {
+          type: "success",
+        });
+      } catch (err) {
+        showToast(err.message, { type: "error" });
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [collection, color, icon, name, onSubmit, showToast, sort, t]
+  );

-  handleSortChange = (ev: SyntheticInputEvent<HTMLSelectElement>) => {
+  const handleSortChange = (ev: SyntheticInputEvent<HTMLSelectElement>) => {
    const [field, direction] = ev.target.value.split(".");

    if (direction === "asc" || direction === "desc") {
-      this.sort = { field, direction };
+      setSort({ field, direction });
    }
  };

-  handleNameChange = (ev: SyntheticInputEvent<*>) => {
-    this.name = ev.target.value;
+  const handleNameChange = (ev: SyntheticInputEvent<*>) => {
+    setName(ev.target.value.trim());
  };

-  handleChange = (color: string, icon: string) => {
-    this.color = color;
-    this.icon = icon;
+  const handleChange = (color: string, icon: string) => {
+    setColor(color);
+    setIcon(icon);
  };

-  handleSharingChange = (ev: SyntheticInputEvent<*>) => {
-    this.sharing = ev.target.checked;
-  };
-
-  render() {
-    const { auth, t } = this.props;
-    const teamSharingEnabled = !!auth.team && auth.team.sharing;
-
-    return (
-      <Flex column>
-        <form onSubmit={this.handleSubmit}>
-          <HelpText>
-            <Trans>
-              You can edit the name and other details at any time, however doing
-              so often might confuse your team mates.
-            </Trans>
-          </HelpText>
-          <Flex>
-            <Input
-              type="text"
-              label={t("Name")}
-              onChange={this.handleNameChange}
-              value={this.name}
-              required
-              autoFocus
-              flex
-            />
-            &nbsp;
-            <IconPicker
-              onChange={this.handleChange}
-              color={this.color}
-              icon={this.icon}
-            />
-          </Flex>
-          <InputSelect
-            label={t("Sort in sidebar")}
-            options={[
-              { label: t("Alphabetical"), value: "title.asc" },
-              { label: t("Manual sort"), value: "index.asc" },
-            ]}
-            value={`${this.sort.field}.${this.sort.direction}`}
-            onChange={this.handleSortChange}
+  return (
+    <Flex column>
+      <form onSubmit={handleSubmit}>
+        <HelpText>
+          <Trans>
+            You can edit the name and other details at any time, however doing
+            so often might confuse your team mates.
+          </Trans>
+        </HelpText>
+        <Flex>
+          <Input
+            type="text"
+            label={t("Name")}
+            onChange={handleNameChange}
+            value={name}
+            required
+            autoFocus
+            flex
          />
-          <Switch
-            id="sharing"
-            label={t("Public document sharing")}
-            onChange={this.handleSharingChange}
-            checked={this.sharing && teamSharingEnabled}
-            disabled={!teamSharingEnabled}
-          />
-          <HelpText>
-            {teamSharingEnabled ? (
-              <Trans>
-                When enabled, documents can be shared publicly on the internet.
-              </Trans>
-            ) : (
-              <Trans>
-                Public sharing is currently disabled in the team security
-                settings.
-              </Trans>
-            )}
-          </HelpText>
-          <Button
-            type="submit"
-            disabled={this.isSaving || !this.props.collection.name}
-          >
-            {this.isSaving ? `${t("Saving")}…` : t("Save")}
-          </Button>
-        </form>
-      </Flex>
-    );
-  }
-}
+          &nbsp;
+          <IconPicker onChange={handleChange} color={color} icon={icon} />
+        </Flex>
+        <InputSelect
+          label={t("Sort in sidebar")}
+          options={[
+            { label: t("Alphabetical"), value: "title.asc" },
+            { label: t("Manual sort"), value: "index.asc" },
+          ]}
+          value={`${sort.field}.${sort.direction}`}
+          onChange={handleSortChange}
+        />
+        <Button type="submit" disabled={isSaving || !collection.name}>
+          {isSaving ? `${t("Saving")}…` : t("Save")}
+        </Button>
+      </form>
+    </Flex>
+  );
+};

-export default withTranslation()<CollectionEdit>(
-  inject("toasts", "auth")(CollectionEdit)
-);
+export default observer(CollectionEdit);
--- a/app/scenes/CollectionPermissions/index.js
+++ b/app/scenes/CollectionPermissions/index.js
@@ -13,6 +13,7 @@ import InputSelectPermission from "components/InputSelectPermission";
 import Labeled from "components/Labeled";
 import Modal from "components/Modal";
 import PaginatedList from "components/PaginatedList";
+import Switch from "components/Switch";
 import AddGroupsToCollection from "./AddGroupsToCollection";
 import AddPeopleToCollection from "./AddPeopleToCollection";
 import CollectionGroupMemberListItem from "./components/CollectionGroupMemberListItem";
@@ -34,6 +35,7 @@ function CollectionPermissions({ collection }: Props) {
    collectionGroupMemberships,
    users,
    groups,
+    auth,
  } = useStores();
  const { showToast } = useToasts();
  const [
@@ -153,10 +155,28 @@ function CollectionPermissions({ collection }: Props) {
    collection.id,
  ]);

+  const handleSharingChange = React.useCallback(
+    async (ev: SyntheticInputEvent<*>) => {
+      try {
+        await collection.save({ sharing: ev.target.checked });
+        showToast(t("Public document sharing permissions were updated"), {
+          type: "success",
+        });
+      } catch (err) {
+        showToast(t("Could not update public document sharing"), {
+          type: "error",
+        });
+      }
+    },
+    [collection, showToast, t]
+  );
+
  const collectionName = collection.name;
  const collectionGroups = groups.inCollection(collection.id);
  const collectionUsers = users.inCollection(collection.id);
  const isEmpty = !collectionGroups.length && !collectionUsers.length;
+  const sharing = collection.sharing;
+  const teamSharingEnabled = !!auth.team && auth.team.sharing;

  return (
    <Flex column>
@@ -189,6 +209,24 @@ function CollectionPermissions({ collection }: Props) {
          />
        )}
      </PermissionExplainer>
+      <Switch
+        id="sharing"
+        label={t("Public document sharing")}
+        onChange={handleSharingChange}
+        checked={sharing && teamSharingEnabled}
+        disabled={!teamSharingEnabled}
+      />
+      <HelpText>
+        {teamSharingEnabled ? (
+          <Trans>
+            When enabled, documents can be shared publicly on the internet.
+          </Trans>
+        ) : (
+          <Trans>
+            Public sharing is currently disabled in the team security settings.
+          </Trans>
+        )}
+      </HelpText>
      <Labeled label={t("Additional access")}>
        <Actions>
          <Button