feat: Shareable file resource link (#1451)

techmatters · Feb 19, 2024 · b1fd3a3 · b1fd3a3
1 parent b25d85a
commit b1fd3a3
Show file tree

Hide file tree

Showing 28 changed files with 1,057 additions and 360 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,7 +49,7 @@
     "slate-hyperscript": "^0.100.0",
     "slate-react": "^0.101.0",
     "source-map-explorer": "^2.5.3",
-    "terraso-client-shared": "github:techmatters/terraso-client-shared#a416b76",
+    "terraso-client-shared": "github:techmatters/terraso-client-shared#1b54c54228a95025201c2b57ec458ba62c195769",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.1",
     "web-vitals": "^3.5.0",
@@ -107,6 +107,7 @@
     "flat": "^6.0.1",
     "i18next-conv": "^14.0.0",
     "jest-axe": "^8.0.0",
+    "jest-when": "^3.6.0",
     "plausible-tracker": "^0.3.8",
     "prettier": "^3.2.5",
     "react-scripts": "^5.0.1",

diff --git a/src/common/components/CopyLink.js b/src/common/components/CopyLink.js
@@ -0,0 +1,85 @@
+/*
+ * Copyright © 2024 Technology Matters
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see https://www.gnu.org/licenses/.
+ */
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Alert, Button, InputLabel, TextField } from '@mui/material';
+
+import { useCopy } from 'custom-hooks';
+
+const CopyLink = props => {
+  const { pageUrl, onShare } = props;
+  const { t } = useTranslation();
+
+  const { copied, copyToClipboard } = useCopy(pageUrl, () => {
+    onShare?.('link');
+  });
+
+  return (
+    <>
+      <InputLabel
+        htmlFor="share-link"
+        sx={{
+          marginTop: 4,
+          color: 'black',
+          fontSize: '1.3rem',
+        }}
+      >
+        {t('share.copy')}
+      </InputLabel>
+      <TextField
+        size="small"
+        variant="outlined"
+        value={pageUrl}
+        fullWidth
+        sx={{
+          '& .MuiInputBase-input': {
+            flexGrow: 1,
+            width: 'auto',
+          },
+        }}
+        InputProps={{
+          id: 'share-link',
+          sx: {
+            flexDirection: { xs: 'column', sm: 'row' },
+            paddingRight: 0,
+          },
+          readOnly: true,
+          endAdornment: (
+            <Button
+              variant="contained"
+              onClick={copyToClipboard}
+              sx={{
+                marginLeft: { xs: 0, sm: 2 },
+                minWidth: '100px',
+                width: { xs: '100%', sm: 'auto' },
+              }}
+            >
+              {t('share.copy_button')}
+            </Button>
+          ),
+        }}
+      />
+      {copied && (
+        <Alert severity="success" sx={{ mt: 1 }}>
+          {t('share.copy_button_done')}
+        </Alert>
+      )}
+    </>
+  );
+};
+
+export default CopyLink;
diff --git a/src/common/components/SocialShare.js b/src/common/components/SocialShare.js
@@ -34,8 +34,12 @@ import {
 } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
+import { useCopy } from 'custom-hooks';
+
 import { useAnalytics } from 'monitoring/analytics';
 
+import CopyLink from './CopyLink';
+
 import theme from 'theme';
 
 const SocialShareContext = createContext({});
@@ -62,20 +66,6 @@ export const SocialShareContextProvider = props => {
   );
 };
 
-const useCopy = (content, onCopy) => {
-  const [copied, setCopied] = useState(false);
-
-  useEffect(() => () => setCopied(false), []);
-
-  const copyToClipboard = () => {
-    navigator.clipboard.writeText(content);
-    setCopied(true);
-    onCopy?.();
-  };
-
-  return { copied, copyToClipboard };
-};
-
 const CopyEmbededCode = props => {
   const { onShare } = props;
   const isSmall = useMediaQuery(theme.breakpoints.down('sm'));
@@ -150,68 +140,6 @@ const CopyEmbededCode = props => {
   );
 };
 
-const CopyLink = props => {
-  const { pageUrl, onShare } = props;
-  const { t } = useTranslation();
-
-  const { copied, copyToClipboard } = useCopy(pageUrl, () => {
-    onShare('link');
-  });
-
-  return (
-    <>
-      <InputLabel
-        htmlFor="share-link"
-        sx={{
-          marginTop: 4,
-          color: 'black',
-          fontSize: '1.3rem',
-        }}
-      >
-        {t('share.copy')}
-      </InputLabel>
-      <TextField
-        size="small"
-        variant="outlined"
-        value={pageUrl}
-        fullWidth
-        sx={{
-          '& .MuiInputBase-input': {
-            flexGrow: 1,
-            width: 'auto',
-          },
-        }}
-        InputProps={{
-          id: 'share-link',
-          sx: {
-            flexDirection: { xs: 'column', sm: 'row' },
-            paddingRight: 0,
-          },
-          readOnly: true,
-          endAdornment: (
-            <Button
-              variant="outlined"
-              onClick={copyToClipboard}
-              sx={{
-                marginLeft: { xs: 0, sm: 2 },
-                minWidth: '100px',
-                width: { xs: '100%', sm: 'auto' },
-              }}
-            >
-              {t('share.copy_button')}
-            </Button>
-          ),
-        }}
-      />
-      {copied && (
-        <Alert severity="success" sx={{ mt: 1 }}>
-          {t('share.copy_button_done')}
-        </Alert>
-      )}
-    </>
-  );
-};
-
 const PostToService = props => {
   const { name, pageUrl, onShare } = props;
   const { t } = useTranslation();

diff --git a/src/custom-hooks.js b/src/custom-hooks.js
@@ -47,3 +47,17 @@ export const useIsMounted = () => {
 
   return isMounted;
 };
+
+export const useCopy = (content, onCopy) => {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => () => setCopied(false), []);
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(content);
+    setCopied(true);
+    onCopy?.();
+  };
+
+  return { copied, copyToClipboard };
+};
diff --git a/src/group/components/GroupForm.js b/src/group/components/GroupForm.js
@@ -219,7 +219,10 @@ const GroupForm = () => {
     dispatch(
       saveGroup({
         group: {
-          ..._.omit(['membershipsInfo.membershipType'], group),
+          ..._.omit(
+            ['membershipsInfo.membershipType', 'sharedResources'],
+            group
+          ),
           membershipType: group.membershipsInfo.membershipType,
         },
         user,