Merge branch 'wevote:develop' into develop

Author: fdiazq

src/js/components/SetUpAccount/SetUpAccountFriendRequests.jsx

@@ -1,14 +1,18 @@
 import withStyles from '@mui/styles/withStyles';
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from 'styled-components';
 import { renderLog } from '../../common/utils/logging';
-import VoterStore from '../../stores/VoterStore';
+import SuggestedFriendList from '../Friends/SuggestedFriendList';
+import FriendStore from '../../stores/FriendStore';
+import { SectionTitle } from '../Style/friendStyles';
 import {
   SetUpAccountIntroText,
   SetUpAccountTitle,
   SetUpAccountTop,
   StepCenteredWrapper,
 } from '../Style/SetUpAccountStyles';
+import sortFriendListByMutualFriends from '../../utils/friendFunctions';
 
 
 class SetUpAccountFriendRequests extends React.Component {
@@ -19,9 +23,13 @@ class SetUpAccountFriendRequests extends React.Component {
   }
 
   componentDidMount () {
-    window.scrollTo(0, 0);
-    this.onVoterStoreChange();
-    this.voterStoreListener = VoterStore.addListener(this.onVoterStoreChange.bind(this));
+    const suggestedFriendListUnsorted = FriendStore.suggestedFriendList();
+    const suggestedFriendList = sortFriendListByMutualFriends(suggestedFriendListUnsorted);
+    this.setState({
+      suggestedFriendList,
+    });
+
+    this.friendStoreListener = FriendStore.addListener(this.onFriendStoreChange.bind(this));
   }
 
   componentDidUpdate (prevProps) {
@@ -32,21 +40,37 @@ class SetUpAccountFriendRequests extends React.Component {
   }
 
   componentWillUnmount () {
-    this.voterStoreListener.remove();
+    this.friendStoreListener.remove();
   }
 
-  onVoterStoreChange () {
+  onFriendStoreChange () {
+    const suggestedFriendListUnsorted = FriendStore.suggestedFriendList();
+    const suggestedFriendList = sortFriendListByMutualFriends(suggestedFriendListUnsorted);
+    this.setState({
+      suggestedFriendList,
+    });
   }
 
   render () {
     renderLog('SetUpAccountFriendRequests');  // Set LOG_RENDER_EVENTS to log all renders
+    const { suggestedFriendList } = this.state;
 
     return (
       <StepCenteredWrapper>
         <SetUpAccountTop>
           <SetUpAccountTitle>Friends</SetUpAccountTitle>
           <SetUpAccountIntroText>&nbsp;</SetUpAccountIntroText>
         </SetUpAccountTop>
+        {/* Chip filters here */}
+        <SetUpAccountSubTitleWrapper>
+          <SectionTitle>
+            People you may know
+          </SectionTitle>
+        </SetUpAccountSubTitleWrapper>
+        <SuggestedFriendList
+          friendList={suggestedFriendList}
+          editMode
+        />
       </StepCenteredWrapper>
     );
   }
@@ -59,4 +83,9 @@ SetUpAccountFriendRequests.propTypes = {
 const styles = () => ({
 });
 
+const SetUpAccountSubTitleWrapper = styled('div')`
+  max-width: 538px;
+  width: 100%;
+`;
+
 export default withStyles(styles)(SetUpAccountFriendRequests);

src/js/components/Style/friendStyles.js

@@ -114,6 +114,13 @@ const FriendName = styled('h3', {
   ${inSideColumn ? FriendNameInSideColumn : FriendNameNotInSideColumn}
 `));
 
+const SectionTitle = styled('h2')`
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+  width: fit-content;
+`;
+
 const ToRightOfPhoto = styled('div')`
   align-items: flex-start;
   display: flex;
@@ -131,5 +138,6 @@ export {
   FriendDisplayDesktopButtonsWrapper,
   FriendDisplayOuterWrapper,
   FriendName,
+  SectionTitle,
   ToRightOfPhoto,
 };

src/js/pages/FriendIntro/FriendIntroLanding.jsx

@@ -24,10 +24,9 @@ import VoterStore from '../../stores/VoterStore';
 
 const FAQModal = React.lazy(() => import(/* webpackChunkName: 'FAQModal' */ '../../components/FriendIntro/FAQModal'));
 
-// const logoColorOnWhite = '../../../img/global/svg-icons/we-vote-icon-square-color-dark.svg';
 const logoGrey = '../../../img/global/svg-icons/we-vote-icon-square-color-grey.svg';
 const voteFlag = '../../../img/get-started/your-vote-counts-cropped-200x200.gif';
-const inDevelopmentMode = false;
+const inDevelopmentMode = true;
 
 class FriendIntroLanding extends Component {
   constructor (props) {

src/js/pages/Friends/SuggestedFriends.jsx

@@ -5,6 +5,7 @@ import { renderLog } from '../../common/utils/logging';
 import SuggestedFriendList from '../../components/Friends/SuggestedFriendList';
 import MessageCard from '../../components/Widgets/MessageCard';
 import FriendStore from '../../stores/FriendStore';
+import { SectionTitle } from '../../components/Style/friendStyles';
 import sortFriendListByMutualFriends from '../../utils/friendFunctions';
 
 export default class SuggestedFriends extends Component {
@@ -76,11 +77,5 @@ export default class SuggestedFriends extends Component {
   }
 }
 
-const SectionTitle = styled('h2')`
-  width: fit-content;  font-weight: bold;
-  font-size: 18px;
-  margin-bottom: 16px;
-`;
-
 const SuggestedFriendsWrapper = styled('div')`
 `;

src/js/pages/SetUpAccount/SetUpAccountRoot.jsx

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import React, { Suspense } from 'react';
 import styled from 'styled-components';
 import BallotActions from '../../actions/BallotActions';
+import FriendActions from '../../actions/FriendActions';
 import VoterActions from '../../actions/VoterActions';
 import apiCalming from '../../common/utils/apiCalming';
 import { isCordovaWide } from '../../common/utils/cordovaUtils';
@@ -22,16 +23,15 @@ import AppObservableStore from '../../stores/AppObservableStore';
 import VoterStore from '../../stores/VoterStore';
 import Reassurance from '../Startup/Reassurance';
 
-const logoColorOnWhite = '../../../img/global/svg-icons/we-vote-icon-square-color-dark.svg';
-
 const AddContactsFromGoogleButton = React.lazy(() => import(/* webpackChunkName: 'AddContactsFromGoogleButton' */ '../../components/SetUpAccount/AddContactsFromGoogleButton'));
 const SetUpAccountAddPhoto = React.lazy(() => import(/* webpackChunkName: 'SetUpAccountAddPhoto' */ '../../components/SetUpAccount/SetUpAccountAddPhoto'));
 const SetUpAccountEditName = React.lazy(() => import(/* webpackChunkName: 'SetUpAccountEditName' */ '../../components/SetUpAccount/SetUpAccountEditName'));
 const SetUpAccountFriendRequests = React.lazy(() => import(/* webpackChunkName: 'SetUpAccountFriendRequests' */ '../../components/SetUpAccount/SetUpAccountFriendRequests'));
 const SetUpAccountImportContacts = React.lazy(() => import(/* webpackChunkName: 'SetUpAccountImportContacts' */ '../../components/SetUpAccount/SetUpAccountImportContacts'));
 const SetUpAccountInviteContacts = React.lazy(() => import(/* webpackChunkName: 'SetUpAccountInviteContacts' */ '../../components/SetUpAccount/SetUpAccountInviteContacts'));
 
-const inDevelopmentMode = false;
+const inDevelopmentMode = true;
+const logoColorOnWhite = '../../../img/global/svg-icons/we-vote-icon-square-color-dark.svg';
 
 function NextButton (props) {
   return (
@@ -102,6 +102,9 @@ class SetUpAccountRoot extends React.Component {
     if (apiCalming('voterBallotItemsRetrieve', 10000)) {
       BallotActions.voterBallotItemsRetrieve();
     }
+    if (apiCalming('friendListsAll', 30000)) {
+      FriendActions.getAllFriendLists();
+    }
   }
 
   componentDidUpdate (prevProps, prevState) {