Merge pull request #2568 from withspectrum/upgrade-community-notification-preferences

mxstbr · web-flow · commit 5225f48462a9 · 2018-03-13T16:34:02.000+01:00
Upgrade community notification preferences
diff --git a/src/components/listItems/style.js b/src/components/listItems/style.js
@@ -62,7 +62,7 @@ export const Row = styled(FlexRow)`
 
 export const Heading = styled(H3)`
   font-weight: 500;
-  font-size: 14px;
+  font-size: 16px;
   transition: ${Transition.hover.off};
   line-height: 1.2;
   display: flex;
@@ -96,8 +96,6 @@ export const ActionContainer = styled(FlexCol)`
 
 export const StyledCard = styled.div`
   flex-direction: column;
-  margin-top: 32px;
-  margin-left: 32px;
   display: ${props => (props.smallOnly ? 'none' : 'flex')};
 
   @media (max-width: 768px) {
diff --git a/src/components/profile/style.js b/src/components/profile/style.js
@@ -12,7 +12,6 @@ import {
 import { Button, OutlineButton, IconButton } from '../buttons';
 import { ReputationWrapper } from '../reputation/style';
 import Card from '../card';
-import { Heading } from '../listItems/style';
 
 export const ProfileHeader = styled(FlexRow)`
   padding: 16px;
@@ -78,11 +77,6 @@ export const FullProfile = styled.div`
   margin-top: -64px;
   background-color: ${props => props.theme.bg.default};
 
-  ${Heading} {
-    font-size: 16px;
-    color: ${props => props.theme.text.alt};
-  }
-
   @media (max-width: 768px) {
     margin-top: -48px;
   }
diff --git a/src/components/toggleChannelNotifications/index.js b/src/components/toggleChannelNotifications/index.js
@@ -0,0 +1,79 @@
+// @flow
+import * as React from 'react';
+import { connect } from 'react-redux';
+import compose from 'recompose/compose';
+import { addToastWithTimeout } from '../../actions/toasts';
+import type { GetChannelType } from 'shared/graphql/queries/channel/getChannel';
+import toggleChannelNotificationsMutation, {
+  type ToggleChannelNotificationsType,
+} from 'shared/graphql/mutations/channel/toggleChannelNotifications';
+
+type Props = {
+  channel: {
+    ...$Exact<GetChannelType>,
+  },
+  toggleChannelNotifications: Function,
+  dispatch: Function,
+  render: Function,
+};
+
+type State = { isLoading: boolean };
+
+class ToggleChannelNotifications extends React.Component<Props, State> {
+  state = { isLoading: false };
+
+  init = () => {
+    this.setState({
+      isLoading: true,
+    });
+
+    return this.toggleNotifications();
+  };
+
+  terminate = () => {
+    this.setState({
+      isLoading: false,
+    });
+  };
+
+  toggleNotifications = () => {
+    const { channel } = this.props;
+
+    this.setState({
+      isLoading: true,
+    });
+
+    this.props
+      .toggleChannelNotifications(channel.id)
+      .then(({ data }: ToggleChannelNotificationsType) => {
+        this.setState({
+          isLoading: false,
+        });
+
+        const { toggleChannelNotifications } = data;
+
+        const value =
+          toggleChannelNotifications.channelPermissions.receiveNotifications;
+        const type = value ? 'success' : 'neutral';
+        const str = value
+          ? 'Notifications activated!'
+          : 'Notifications turned off.';
+        this.props.dispatch(addToastWithTimeout(type, str));
+        return;
+      })
+      .catch(err => {
+        this.setState({
+          isLoading: false,
+        });
+        this.props.dispatch(addToastWithTimeout('error', err.message));
+      });
+  };
+
+  render() {
+    return <div onClick={this.init}>{this.props.render(this.state)}</div>;
+  }
+}
+
+export default compose(connect(), toggleChannelNotificationsMutation)(
+  ToggleChannelNotifications
+);
diff --git a/src/components/upsell/joinChannel.js b/src/components/upsell/joinChannel.js
@@ -6,10 +6,7 @@ import toggleChannelSubscriptionMutation from 'shared/graphql/mutations/channel/
 import type { ToggleChannelSubscriptionType } from 'shared/graphql/mutations/channel/toggleChannelSubscription';
 import { addToastWithTimeout } from '../../actions/toasts';
 import { track } from '../../helpers/events';
-import { NullState } from './index';
 import {
-  Title,
-  Subtitle,
   JoinChannelContainer,
   JoinChannelContent,
   JoinChannelTitle,
diff --git a/src/views/community/components/channelList.js b/src/views/community/components/channelList.js
@@ -5,19 +5,20 @@ import { connect } from 'react-redux';
 import compose from 'recompose/compose';
 import { ChannelListItem } from '../../../components/listItems';
 import { ChannelProfile } from '../../../components/profile';
-import { IconButton } from '../../../components/buttons';
+import { OutlineButton } from '../../../components/buttons';
 import Icon from '../../../components/icons';
 import { openModal } from '../../../actions/modals';
 import viewNetworkHandler from '../../../components/viewNetworkHandler';
-import { LoadingCard } from '../../../components/loading';
+import { LoadingCard, Loading } from '../../../components/loading';
 import getCommunityChannels from 'shared/graphql/queries/community/getCommunityChannelConnection';
 import type { GetCommunityChannelConnectionType } from 'shared/graphql/queries/community/getCommunityChannelConnection';
+import { StyledCard, ListContainer } from '../../../components/listItems/style';
 import {
-  StyledCard,
-  ListHeader,
-  ListHeading,
-  ListContainer,
-} from '../../../components/listItems/style';
+  ColumnHeading,
+  ChannelListItemRow,
+  ToggleNotificationsContainer,
+} from '../style';
+import ToggleChannelNotifications from 'src/components/toggleChannelNotifications';
 
 type Props = {
   data: {
@@ -80,18 +81,7 @@ class ChannelList extends React.Component<Props> {
 
       return (
         <StyledCard largeOnly>
-          <ListHeader>
-            <ListHeading>Channels</ListHeading>
-            {isOwner && (
-              <IconButton
-                glyph="plus"
-                color="text.placeholder"
-                onClick={() =>
-                  dispatch(openModal('CREATE_CHANNEL_MODAL', community))
-                }
-              />
-            )}
-          </ListHeader>
+          <ColumnHeading>Channels</ColumnHeading>
 
           {/*
             user isn't logged in, channel list is used for navigation
@@ -128,31 +118,57 @@ class ChannelList extends React.Component<Props> {
                 {sortedJoinedChannels.map(channel => {
                   if (!channel) return null;
                   return (
-                    <Link
-                      key={channel.id}
-                      to={`/${communitySlug}/${channel.slug}`}
-                    >
-                      <ChannelListItem
-                        clickable
-                        contents={channel}
-                        withDescription={false}
-                        channelIcon
+                    <ChannelListItemRow key={channel.id}>
+                      <Link
+                        to={`/${communitySlug}/${channel.slug}`}
+                        style={{
+                          display: 'flex',
+                          flex: 'auto',
+                        }}
                       >
-                        <Icon glyph="view-forward" />
-                      </ChannelListItem>
-                    </Link>
+                        <ChannelListItem
+                          clickable
+                          contents={channel}
+                          withDescription={false}
+                          channelIcon
+                        />
+                      </Link>
+                      <ToggleChannelNotifications
+                        channel={channel}
+                        render={state => (
+                          <ToggleNotificationsContainer
+                            tipLocation={'top-left'}
+                            tipText={
+                              channel.channelPermissions.receiveNotifications
+                                ? 'Turn notifications off'
+                                : 'Turn notifications on'
+                            }
+                          >
+                            {state.isLoading ? (
+                              <Loading />
+                            ) : (
+                              <Icon
+                                glyph={
+                                  channel.channelPermissions
+                                    .receiveNotifications
+                                    ? 'notification-fill'
+                                    : 'notification'
+                                }
+                              />
+                            )}
+                          </ToggleNotificationsContainer>
+                        )}
+                      />
+                    </ChannelListItemRow>
                   );
                 })}
               </ListContainer>
             )}
 
           {sortedNonJoinedChannels.length > 0 &&
             isMember && (
-              <span>
-                <ListHeader secondary>
-                  <ListHeading>New channels</ListHeading>
-                </ListHeader>
-
+              <React.Fragment>
+                <ColumnHeading>New channels</ColumnHeading>
                 <ListContainer>
                   <ul>
                     {sortedNonJoinedChannels.map(channel => {
@@ -167,8 +183,23 @@ class ChannelList extends React.Component<Props> {
                     })}
                   </ul>
                 </ListContainer>
-              </span>
+              </React.Fragment>
             )}
+
+          {isOwner && (
+            <OutlineButton
+              style={{
+                alignSelf: 'flex-end',
+                marginTop: '12px',
+              }}
+              glyph="plus"
+              onClick={() =>
+                dispatch(openModal('CREATE_CHANNEL_MODAL', community))
+              }
+            >
+              Create a channel
+            </OutlineButton>
+          )}
         </StyledCard>
       );
     }
diff --git a/src/views/community/components/memberGrid.js b/src/views/community/components/memberGrid.js
@@ -4,13 +4,12 @@ import compose from 'recompose/compose';
 import getCommunityMembersQuery, {
   type GetCommunityMembersType,
 } from 'shared/graphql/queries/community/getCommunityMembers';
-import { FlexCol } from '../../../components/globals';
-import { Card } from '../../../components/card';
-import { LoadingList } from '../../../components/loading';
-import { UserListItem } from '../../../components/listItems';
-import viewNetworkHandler from '../../../components/viewNetworkHandler';
-import ViewError from '../../../components/viewError';
-import { StyledButton } from '../style';
+import { FlexCol } from 'src/components/globals';
+import { Card } from 'src/components/card';
+import { LoadingList } from 'src/components/loading';
+import { UserListItem } from 'src/components/listItems';
+import viewNetworkHandler from 'src/components/viewNetworkHandler';
+import ViewError from 'src/components/viewError';
 
 type Props = {
   data: {
@@ -23,11 +22,7 @@ type Props = {
 
 class CommunityMemberGrid extends React.Component<Props> {
   render() {
-    const {
-      data: { community, fetchMore },
-      isLoading,
-      isFetchingMore,
-    } = this.props;
+    const { data: { community }, isLoading } = this.props;
 
     if (community) {
       const { edges: members } = community.members;
@@ -45,11 +40,6 @@ class CommunityMemberGrid extends React.Component<Props> {
             });
             return <UserListItem key={user.id} user={user} />;
           })}
-          {community.members.pageInfo.hasNextPage && (
-            <StyledButton loading={isFetchingMore} onClick={() => fetchMore()}>
-              View more...
-            </StyledButton>
-          )}
         </FlexCol>
       );
     }
diff --git a/src/views/community/index.js b/src/views/community/index.js
@@ -223,10 +223,6 @@ class CommunityView extends React.Component<Props, State> {
                     </LoginButton>
                   </Link>
                 )}
-              <ChannelList
-                id={community.id}
-                communitySlug={communitySlug.toLowerCase()}
-              />
             </Meta>
             <Content>
               <SegmentedControl style={{ margin: '16px 0 0 0' }}>
@@ -309,7 +305,17 @@ class CommunityView extends React.Component<Props, State> {
               selectedView === 'search' && <Search community={community} />}
             </Content>
             <Extras>
-              <ColumnHeading>Members</ColumnHeading>
+              <ChannelList
+                id={community.id}
+                communitySlug={communitySlug.toLowerCase()}
+              />
+
+              <ColumnHeading>
+                Top Members ({community.metaData &&
+                  community.metaData.members &&
+                  community.metaData.members.toLocaleString()}{' '}
+                total)
+              </ColumnHeading>
               <CommunityMemberGrid first={5} id={community.id} />
             </Extras>
           </Grid>
diff --git a/src/views/community/style.js b/src/views/community/style.js
@@ -7,6 +7,7 @@ import {
   Transition,
   zIndex,
   Gradient,
+  Tooltip,
 } from '../../components/globals';
 import {
   DesktopSegment,
@@ -222,3 +223,17 @@ export const ColumnHeading = styled.div`
   margin-top: 16px;
   border-bottom: 2px solid ${props => props.theme.bg.border};
 `;
+
+export const ChannelListItemRow = styled.div`
+  display: flex;
+`;
+
+export const ToggleNotificationsContainer = styled.div`
+  display: flex;
+  color: ${props => props.theme.text.alt};
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  cursor: pointer;
+  ${Tooltip};
+`;
diff --git a/src/views/status/style.js b/src/views/status/style.js
@@ -1,6 +1,5 @@
 // @flow
 import styled from 'styled-components';
-import { hexa } from 'src/components/globals';
 
 export const Bar = styled.div`
   display: grid;
diff --git a/src/views/thread/index.js b/src/views/thread/index.js
@@ -17,7 +17,7 @@ import {
   getThreadByMatch,
   getThreadByMatchQuery,
 } from 'shared/graphql/queries/thread/getThread';
-import { NullState, UpsellSignIn } from '../../components/upsell';
+import { NullState } from '../../components/upsell';
 import JoinChannel from '../../components/upsell/joinChannel';
 import { toState } from 'shared/draft-utils';
 import LoadingView from './components/loading';
