refactor: Membership list model for groups and landscapes (#1317)

package.json

@@ -48,7 +48,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#23fb61c",
+    "terraso-client-shared": "github:techmatters/terraso-client-shared#a416b76",
     "use-debounce": "^9.0.4",
     "uuid": "^9.0.1",
     "web-vitals": "^3.5.0",

src/account/components/AccountAvatar.js

@@ -16,11 +16,12 @@
  */
 import React from 'react';
 import _ from 'lodash/fp';
+import { useTranslation } from 'react-i18next';
 import { Avatar, Typography } from '@mui/material';
 
 const AccountAvatar = props => {
+  const { t } = useTranslation();
   const { user, showAlt, component } = props;
-  const name = `${user.firstName} ${user.lastName}`;
 
   const muiAvatarAllowedProps = [
     'alt',
@@ -36,9 +37,13 @@ const AccountAvatar = props => {
     'variant',
   ];
 
+  if (!user) {
+    return null;
+  }
+
   return (
     <Avatar
-      alt={name}
+      alt={t('user.full_name', { user })}
       src={user.profileImage}
       {...(!showAlt ? { imgProps: { alt: '' } } : {})}
       {..._.pick(muiAvatarAllowedProps, props)}

src/collaboration/collaborationConstants.js

@@ -16,3 +16,6 @@
  */
 export const MEMBERSHIP_STATUS_APPROVED = 'APPROVED';
 export const MEMBERSHIP_STATUS_PENDING = 'PENDING';
+
+export const MEMBERSHIP_TYPE_CLOSED = 'CLOSED';
+export const MEMBERSHIP_TYPE_OPEN = 'OPEN';

src/group/groupContext.js → src/collaboration/collaborationContext.js

@@ -1,5 +1,5 @@
 /*
- * Copyright © 2021-2023 Technology Matters
+ * Copyright © 2023 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
@@ -18,18 +18,14 @@ import React, { useContext, useMemo } from 'react';
 import _ from 'lodash/fp';
 import { useTranslation } from 'react-i18next';
 
-const GroupContext = React.createContext();
+const CollaborationContext = React.createContext();
 
-export const GroupContextProvider = props => {
+export const CollaborationContextProvider = props => {
   const { t } = useTranslation();
-
-  const entityType = useMemo(
-    () => (props?.owner?.defaultGroup ? 'landscape' : 'group'),
-    [props?.owner?.defaultGroup]
-  );
+  const { entityType } = props;
 
   const entityTypeLocalized = useMemo(
-    () => t('sharedData.entity_type', { context: entityType }),
+    () => t('collaboration.entity_type', { context: entityType }),
     [entityType, t]
   );
 
@@ -41,17 +37,20 @@ export const GroupContextProvider = props => {
         [
           'owner',
           'baseOwnerUrl',
-          'group',
-          'groupSlug',
-          'members',
+          'accountMembership',
+          'membershipsInfo',
+          'onMemberJoin',
           'onMemberRemove',
           'onMemberRoleChange',
+          'onMemberApprove',
           'MemberLeaveButton',
           'MemberRemoveButton',
           'MemberJoinButton',
           'MemberRequestJoinButton',
           'MemberRequestCancelButton',
           'updateOwner',
+          'acceptedRoles',
+          'allowedToManageMembers',
         ],
         props
       ),
@@ -60,13 +59,13 @@ export const GroupContextProvider = props => {
   );
 
   return (
-    <GroupContext.Provider value={providerValue}>
+    <CollaborationContext.Provider value={providerValue}>
       {props.children}
-    </GroupContext.Provider>
+    </CollaborationContext.Provider>
   );
 };
 
-export const useGroupContext = () => {
-  const context = useContext(GroupContext);
+export const useCollaborationContext = () => {
+  const context = useContext(CollaborationContext);
   return context;
 };

src/collaboration/components/MemberJoin.js

@@ -0,0 +1,45 @@
+/*
+ * Copyright © 2023 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 _ from 'lodash/fp';
+import { useTranslation } from 'react-i18next';
+import { LoadingButton } from '@mui/lab';
+
+import { useCollaborationContext } from 'collaboration/collaborationContext';
+
+const MemberJoin = props => {
+  const { t } = useTranslation();
+  const { owner } = useCollaborationContext();
+  const { ariaLabel, onJoin, buttonProps, loading } = props;
+
+  return (
+    <LoadingButton
+      variant="outlined"
+      aria-label={t(ariaLabel, {
+        name: _.get('name', owner),
+      })}
+      onClick={onJoin}
+      loading={loading}
+      sx={{ flexGrow: 1 }}
+      {...buttonProps}
+    >
+      {t(props.label)}
+    </LoadingButton>
+  );
+};
+
+export default MemberJoin;

src/collaboration/components/MemberName.js

@@ -20,7 +20,7 @@ import { Stack, Typography } from '@mui/material';
 
 import AccountAvatar from 'account/components/AccountAvatar';
 
-const MemberName = ({ member }) => {
+const MemberName = ({ membership }) => {
   const { t } = useTranslation();
   return (
     <Stack
@@ -29,14 +29,14 @@ const MemberName = ({ member }) => {
       alignItems="center"
       spacing={2}
     >
-      {!member.pendingEmail && (
+      {!membership.pendingEmail && (
         <AccountAvatar
           component="div"
           sx={{ width: 34, height: 34 }}
-          user={member}
+          user={membership.user}
         />
       )}
-      <Typography>{t('user.full_name', { user: member })}</Typography>
+      <Typography>{t('user.full_name', { user: membership.user })}</Typography>
     </Stack>
   );
 };