Join and leave communities from mobile app

mobile/views/Community/JoinButton.js

@@ -0,0 +1,101 @@
+// @flow
+import * as React from 'react';
+import { Button } from '../../components/Button';
+import compose from 'recompose/compose';
+import addCommunityMember, {
+  type AddCommunityMemberProps,
+} from '../../../shared/graphql/mutations/communityMember/addCommunityMember';
+import removeCommunityMember, {
+  type RemoveCommunityMemberProps,
+} from '../../../shared/graphql/mutations/communityMember/removeCommunityMember';
+import { type GetCommunityType } from '../../../shared/graphql/queries/community/getCommunity';
+import { JoinButtonWrapper } from './style';
+
+type Props = {
+  ...$Exact<AddCommunityMemberProps>,
+  ...$Exact<RemoveCommunityMemberProps>,
+  community: GetCommunityType,
+};
+
+type State = {
+  joinedDuringSession: boolean,
+  isLoading: boolean,
+};
+
+class JoinButton extends React.Component<Props, State> {
+  state = {
+    isLoading: false,
+    joinedDuringSession: false,
+  };
+
+  toggleMembership = () => {
+    const { community, removeCommunityMember, addCommunityMember } = this.props;
+
+    if (!community || !community.id) return;
+
+    this.setState({
+      isLoading: true,
+    });
+
+    if (community.communityPermissions.isMember) {
+      removeCommunityMember({ input: { communityId: community.id } })
+        .then(() => {
+          this.setState({
+            isLoading: false,
+            joinedDuringSession: false,
+          });
+        })
+        .catch(err => {
+          this.setState({
+            isLoading: false,
+          });
+        });
+    } else {
+      addCommunityMember({ input: { communityId: community.id } })
+        .then(() => {
+          this.setState({
+            isLoading: false,
+            joinedDuringSession: true,
+          });
+        })
+        .catch(err => {
+          this.setState({
+            isLoading: false,
+          });
+        });
+    }
+  };
+
+  render() {
+    const { community } = this.props;
+    const { joinedDuringSession, isLoading } = this.state;
+
+    if (joinedDuringSession) {
+      return (
+        <JoinButtonWrapper>
+          <Button
+            onPress={this.toggleMembership}
+            state={isLoading ? 'loading' : null}
+            icon={'member-remove'}
+            title={'Leave'}
+          />
+        </JoinButtonWrapper>
+      );
+    }
+
+    if (community.communityPermissions.isMember) return null;
+
+    return (
+      <JoinButtonWrapper>
+        <Button
+          onPress={this.toggleMembership}
+          state={isLoading ? 'loading' : null}
+          icon={'member-add'}
+          title={'Join'}
+        />
+      </JoinButtonWrapper>
+    );
+  }
+}
+
+export default compose(addCommunityMember, removeCommunityMember)(JoinButton);

mobile/views/Community/index.js

@@ -13,6 +13,7 @@ import { ThreadListItem } from '../../components/Lists';
 import { getThreadById } from '../../../shared/graphql/queries/thread/getThread';
 import Loading from '../../components/Loading';
 import { track, events, transformations } from '../../utils/analytics';
+import JoinButton from './JoinButton';
 
 import {
   Wrapper,
@@ -132,6 +133,8 @@ class Community extends Component<Props> {
                 <ProfileDetailsContainer>
                   <Name>{community.name}</Name>
                   <Description>{community.description}</Description>
+
+                  <JoinButton community={community} />
                 </ProfileDetailsContainer>
 
                 <ThreadFeedDivider />

mobile/views/Community/style.js

@@ -77,3 +77,7 @@ export const ThreadFeedDivider = styled.View`
   border-bottom-color: ${props => props.theme.bg.border};
   border-bottom-width: 1px;
 `;
+
+export const JoinButtonWrapper = styled.View`
+  margin-top: 16px;
+`;

shared/graphql/mutations/communityMember/addCommunityMember.js

@@ -18,6 +18,12 @@ export type AddCommunityMemberType = {
   },
 };
 
+export type AddCommunityMemberProps = {
+  addCommunityMember: ({ input: { communityId: string } }) => Promise<
+    AddCommunityMemberType
+  >,
+};
+
 export const addCommunityMemberQuery = gql`
   mutation addCommunityMember($input: AddCommunityMemberInput!) {
     addCommunityMember(input: $input) {

shared/graphql/mutations/communityMember/removeCommunityMember.js

@@ -18,6 +18,12 @@ export type RemoveCommunityMemberType = {
   },
 };
 
+export type RemoveCommunityMemberProps = {
+  removeCommunityMember: ({ input: { communityId: string } }) => Promise<
+    RemoveCommunityMemberType
+  >,
+};
+
 export const removeCommunityMemberQuery = gql`
   mutation removeCommunityMember($input: RemoveCommunityMemberInput!) {
     removeCommunityMember(input: $input) {