From c9e2777f36ad294cd08802bf27294b49608641cf Mon Sep 17 00:00:00 2001
From: Ishikabaid <ibishikabaid@gmail.com>
Date: Mon, 1 Aug 2022 12:49:38 +0530
Subject: [PATCH 1/6] infinite scroll for new members

---
 src/components/home/index.js        | 33 +++++++++++++++++++++++++++--
 src/components/new-members/index.js | 11 +++-------
 2 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/src/components/home/index.js b/src/components/home/index.js
index 798581cd..842d324d 100644
--- a/src/components/home/index.js
+++ b/src/components/home/index.js
@@ -7,7 +7,8 @@ import Designers from '@components/designers';
 import SearchBox from '@components/UI/search-box/index';
 import styles from '@components/home/home.module.scss';
 import { userContext } from '@store/user/user-context';
-import { useState } from 'react';
+import { membersContext } from '@store/members/members-context';
+import { useState, useEffect } from 'react';
 import {
   BRAND_NAME,
   MEMBERS_TITLE,
@@ -16,9 +17,37 @@ import {
 
 const Home = () => {
   const { showMemberRoleUpdateModal, isSuperUserMode } = userContext();
+  const {
+    state: { newMembers: newMembersList },
+  } = membersContext();
+
   const { query } = useRouter() || { query: { dev: false } };
   const { dev } = query;
   const [isOptionKey, setIsOptionKey] = useState(false);
+  const [newMembers, setNewMembers] = useState([]);
+
+  let scrollCount = 1;
+  const membersToShow = 20;
+
+  const fetchNewMembers = () => {
+    const noOfMembersToShow = scrollCount * membersToShow;
+    const slicedNewMembersList = newMembersList.slice(0, noOfMembersToShow);
+    setNewMembers(slicedNewMembersList);
+  };
+
+  const handleScroll = () => {
+    const userScrollHeight = window.innerHeight + window.scrollY;
+    const windowBottomHeight = document.documentElement.offsetHeight;
+    if (userScrollHeight >= windowBottomHeight) {
+      scrollCount += 1;
+      fetchNewMembers();
+    }
+  };
+
+  useEffect(() => {
+    fetchNewMembers();
+    window.addEventListener('scroll', handleScroll);
+  }, [newMembersList]);
 
   return (
     <div
@@ -46,7 +75,7 @@ const Home = () => {
       )}
       <Members isOptionKey={isOptionKey} />
       <h1 className={styles.heading}>{NEW_MEMBERS_TITLE}</h1>
-      <NewMembers isOptionKey={isOptionKey} />
+      <NewMembers newMembers={newMembers} isOptionKey={isOptionKey} />
     </div>
   );
 };
diff --git a/src/components/new-members/index.js b/src/components/new-members/index.js
index b2feed9b..3a76280b 100644
--- a/src/components/new-members/index.js
+++ b/src/components/new-members/index.js
@@ -40,16 +40,11 @@ const renderNewUser = (newMember, isOptionKey) => {
   return renderNewUserCard(newMember, isOptionKey);
 };
 
-const NewMemberList = ({ isOptionKey }) => {
-  const {
-    state: { newMembers },
-  } = membersContext();
-  const { searchTerm } = searchMemberContext();
-  const filterMembers = searchMembers(newMembers, searchTerm);
-  if (newMembers) {
+const NewMemberList = ({ isOptionKey, newMembers }) => {
+  if (newMembers?.length) {
     return (
       <div className={styles.container}>
-        {filterMembers.map((newMember) => (
+        {newMembers.map((newMember) => (
           <React.Fragment key={newMember.id}>
             {renderNewUser(newMember, isOptionKey)}
           </React.Fragment>

From 52a9c63793aaf6075acd7acd5f1dc183815d84de Mon Sep 17 00:00:00 2001
From: Ishikabaid <ibishikabaid@gmail.com>
Date: Thu, 4 Aug 2022 20:05:37 +0530
Subject: [PATCH 2/6] fixed members images

---
 src/components/member-card/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/member-card/index.js b/src/components/member-card/index.js
index 55e77e49..cfb52f40 100644
--- a/src/components/member-card/index.js
+++ b/src/components/member-card/index.js
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import classNames from '@components/member-card/card.module.scss';
-import { motion } from 'framer-motion';
 import SocialMediaIcon from '@components/social-media-icon';
 import PropTypes from 'prop-types';
 import ShowSkills from '@components/member-card/show-skills';
@@ -46,7 +45,7 @@ const Card = ({ developerInfo, isOptionKey }) => {
       {dev && (
         <SuperUserOptions username={username} showSettings={showSettings} />
       )}
-      <motion.img
+      <img
         layoutId={username}
         src={isMember ? `${img_url}` : '/images/Avatar.png'}
         onError={brokenImageHandler}

From df87f164b2e0e308c7abfbd76753a5132fc282c8 Mon Sep 17 00:00:00 2001
From: Ishikabaid <ibishikabaid@gmail.com>
Date: Tue, 16 Aug 2022 15:39:11 +0530
Subject: [PATCH 3/6] added react-waypoint

---
 package.json                 |  1 +
 src/components/home/index.js | 28 ++++++++++++++++------------
 yarn.lock                    | 20 ++++++++++++++++++++
 3 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 1c5f0789..77c9b7cc 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-hook-form": "^6.15.5",
+    "react-waypoint": "^10.3.0",
     "sass": "^1.30.0",
     "validator": "^13.7.0"
   },
diff --git a/src/components/home/index.js b/src/components/home/index.js
index 842d324d..ec654108 100644
--- a/src/components/home/index.js
+++ b/src/components/home/index.js
@@ -9,6 +9,8 @@ import styles from '@components/home/home.module.scss';
 import { userContext } from '@store/user/user-context';
 import { membersContext } from '@store/members/members-context';
 import { useState, useEffect } from 'react';
+import { Waypoint } from 'react-waypoint';
+
 import {
   BRAND_NAME,
   MEMBERS_TITLE,
@@ -25,30 +27,27 @@ const Home = () => {
   const { dev } = query;
   const [isOptionKey, setIsOptionKey] = useState(false);
   const [newMembers, setNewMembers] = useState([]);
+  const [scrollCount, setScrollCount] = useState(0);
 
-  let scrollCount = 1;
-  const membersToShow = 20;
+  const membersToShow = 10;
 
   const fetchNewMembers = () => {
     const noOfMembersToShow = scrollCount * membersToShow;
     const slicedNewMembersList = newMembersList.slice(0, noOfMembersToShow);
     setNewMembers(slicedNewMembersList);
-  };
-
-  const handleScroll = () => {
-    const userScrollHeight = window.innerHeight + window.scrollY;
-    const windowBottomHeight = document.documentElement.offsetHeight;
-    if (userScrollHeight >= windowBottomHeight) {
-      scrollCount += 1;
-      fetchNewMembers();
-    }
+    setScrollCount(scrollCount + 1);
   };
 
   useEffect(() => {
     fetchNewMembers();
-    window.addEventListener('scroll', handleScroll);
   }, [newMembersList]);
 
+  const loadMoreData = () => {
+    if (scrollCount > 1) {
+      fetchNewMembers();
+    }
+  };
+
   return (
     <div
       className={styles.container}
@@ -76,6 +75,11 @@ const Home = () => {
       <Members isOptionKey={isOptionKey} />
       <h1 className={styles.heading}>{NEW_MEMBERS_TITLE}</h1>
       <NewMembers newMembers={newMembers} isOptionKey={isOptionKey} />
+      {newMembers && (
+        <Waypoint onEnter={loadMoreData}>
+          <h5>Loading...</h5>
+        </Waypoint>
+      )}
     </div>
   );
 };
diff --git a/yarn.lock b/yarn.lock
index c418c02a..4cf54113 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4780,6 +4780,11 @@ console-control-strings@^1.0.0, console-control-strings@^1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
 
+"consolidated-events@^1.1.0 || ^2.0.0":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/consolidated-events/-/consolidated-events-2.0.2.tgz#da8d8f8c2b232831413d9e190dc11669c79f4a91"
+  integrity sha512-2/uRVMdRypf5z/TW/ncD/66l75P5hH2vM/GR8Jf8HLc2xnfJtmina6F6du8+v4Z2vTrMo7jC+W1tmEEuuELgkQ==
+
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -10080,6 +10085,11 @@ react-is@^16.13.1, react-is@^16.7.0:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+"react-is@^17.0.1 || ^18.0.0":
+  version "18.2.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
 react-popper-tooltip@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-3.1.1.tgz#329569eb7b287008f04fcbddb6370452ad3f9eac"
@@ -10147,6 +10157,16 @@ react-textarea-autosize@^8.3.0:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
+react-waypoint@^10.3.0:
+  version "10.3.0"
+  resolved "https://registry.yarnpkg.com/react-waypoint/-/react-waypoint-10.3.0.tgz#fcc60e86c6c9ad2174fa58d066dc6ae54e3df71d"
+  integrity sha512-iF1y2c1BsoXuEGz08NoahaLFIGI9gTUAAOKip96HUmylRT6DUtpgoBPjk/Y8dfcFVmfVDvUzWjNXpZyKTOV0SQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    consolidated-events "^1.1.0 || ^2.0.0"
+    prop-types "^15.0.0"
+    react-is "^17.0.1 || ^18.0.0"
+
 react@17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"

From 471f3e83e28350892a971059e8e850cea7dbb8f9 Mon Sep 17 00:00:00 2001
From: Ishikabaid <ibishikabaid@gmail.com>
Date: Wed, 24 Aug 2022 22:23:21 +0530
Subject: [PATCH 4/6] fixed search new members

---
 src/components/home/index.js        | 17 ++++++++---------
 src/components/member-card/index.js |  3 ++-
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/home/index.js b/src/components/home/index.js
index ec654108..0a520778 100644
--- a/src/components/home/index.js
+++ b/src/components/home/index.js
@@ -8,6 +8,8 @@ import SearchBox from '@components/UI/search-box/index';
 import styles from '@components/home/home.module.scss';
 import { userContext } from '@store/user/user-context';
 import { membersContext } from '@store/members/members-context';
+import { searchMemberContext } from '@store/search-members/searchMembers-context';
+import { searchMembers } from '@helper-functions/search-members';
 import { useState, useEffect } from 'react';
 import { Waypoint } from 'react-waypoint';
 
@@ -22,6 +24,8 @@ const Home = () => {
   const {
     state: { newMembers: newMembersList },
   } = membersContext();
+  const { searchTerm } = searchMemberContext();
+  const filterMembersList = searchMembers(newMembersList, searchTerm);
 
   const { query } = useRouter() || { query: { dev: false } };
   const { dev } = query;
@@ -32,8 +36,9 @@ const Home = () => {
   const membersToShow = 10;
 
   const fetchNewMembers = () => {
+    const newMemberArr = searchTerm ? filterMembersList : newMembersList;
     const noOfMembersToShow = scrollCount * membersToShow;
-    const slicedNewMembersList = newMembersList.slice(0, noOfMembersToShow);
+    const slicedNewMembersList = newMemberArr.slice(0, noOfMembersToShow);
     setNewMembers(slicedNewMembersList);
     setScrollCount(scrollCount + 1);
   };
@@ -43,9 +48,7 @@ const Home = () => {
   }, [newMembersList]);
 
   const loadMoreData = () => {
-    if (scrollCount > 1) {
-      fetchNewMembers();
-    }
+    fetchNewMembers();
   };
 
   return (
@@ -75,11 +78,7 @@ const Home = () => {
       <Members isOptionKey={isOptionKey} />
       <h1 className={styles.heading}>{NEW_MEMBERS_TITLE}</h1>
       <NewMembers newMembers={newMembers} isOptionKey={isOptionKey} />
-      {newMembers && (
-        <Waypoint onEnter={loadMoreData}>
-          <h5>Loading...</h5>
-        </Waypoint>
-      )}
+      {newMembers && <Waypoint onEnter={loadMoreData} />}
     </div>
   );
 };
diff --git a/src/components/member-card/index.js b/src/components/member-card/index.js
index cfb52f40..55e77e49 100644
--- a/src/components/member-card/index.js
+++ b/src/components/member-card/index.js
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useRouter } from 'next/router';
 import classNames from '@components/member-card/card.module.scss';
+import { motion } from 'framer-motion';
 import SocialMediaIcon from '@components/social-media-icon';
 import PropTypes from 'prop-types';
 import ShowSkills from '@components/member-card/show-skills';
@@ -45,7 +46,7 @@ const Card = ({ developerInfo, isOptionKey }) => {
       {dev && (
         <SuperUserOptions username={username} showSettings={showSettings} />
       )}
-      <img
+      <motion.img
         layoutId={username}
         src={isMember ? `${img_url}` : '/images/Avatar.png'}
         onError={brokenImageHandler}

From 40e8430ba5a076653489c64d55da11ba83099da9 Mon Sep 17 00:00:00 2001
From: Ishikabaid <ibishikabaid@gmail.com>
Date: Fri, 2 Sep 2022 15:01:52 +0530
Subject: [PATCH 5/6] moved number to constants file

---
 src/components/home/index.js  | 11 +++--------
 src/constants/AppConstants.js |  1 +
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/components/home/index.js b/src/components/home/index.js
index 0a520778..094b34b5 100644
--- a/src/components/home/index.js
+++ b/src/components/home/index.js
@@ -17,6 +17,7 @@ import {
   BRAND_NAME,
   MEMBERS_TITLE,
   NEW_MEMBERS_TITLE,
+  NEW_MEMBERS_TO_SHOW,
 } from '@constants/AppConstants';
 
 const Home = () => {
@@ -33,11 +34,9 @@ const Home = () => {
   const [newMembers, setNewMembers] = useState([]);
   const [scrollCount, setScrollCount] = useState(0);
 
-  const membersToShow = 10;
-
   const fetchNewMembers = () => {
     const newMemberArr = searchTerm ? filterMembersList : newMembersList;
-    const noOfMembersToShow = scrollCount * membersToShow;
+    const noOfMembersToShow = scrollCount * NEW_MEMBERS_TO_SHOW;
     const slicedNewMembersList = newMemberArr.slice(0, noOfMembersToShow);
     setNewMembers(slicedNewMembersList);
     setScrollCount(scrollCount + 1);
@@ -47,10 +46,6 @@ const Home = () => {
     fetchNewMembers();
   }, [newMembersList]);
 
-  const loadMoreData = () => {
-    fetchNewMembers();
-  };
-
   return (
     <div
       className={styles.container}
@@ -78,7 +73,7 @@ const Home = () => {
       <Members isOptionKey={isOptionKey} />
       <h1 className={styles.heading}>{NEW_MEMBERS_TITLE}</h1>
       <NewMembers newMembers={newMembers} isOptionKey={isOptionKey} />
-      {newMembers && <Waypoint onEnter={loadMoreData} />}
+      {newMembers && <Waypoint onEnter={fetchNewMembers} />}
     </div>
   );
 };
diff --git a/src/constants/AppConstants.js b/src/constants/AppConstants.js
index 5f2b47cf..b36c7222 100644
--- a/src/constants/AppConstants.js
+++ b/src/constants/AppConstants.js
@@ -65,3 +65,4 @@ export const HOST_NAME = 'members.realdevsquad.com';
 export const TIMEOUT = 1000;
 export const KEY_TAB = 9;
 export const KEY_ESC = 27;
+export const NEW_MEMBERS_TO_SHOW = 10;

From fb0d052e5ea74a213d8cc73703808657bc4906ad Mon Sep 17 00:00:00 2001
From: Ishikabaid <ibishikabaid@gmail.com>
Date: Fri, 16 Sep 2022 12:15:19 +0530
Subject: [PATCH 6/6] resolved conflicts

---
 src/components/new-members/index.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/new-members/index.js b/src/components/new-members/index.js
index 3a76280b..7b7b9a6f 100644
--- a/src/components/new-members/index.js
+++ b/src/components/new-members/index.js
@@ -2,9 +2,6 @@ import React from 'react';
 import Card from '@components/member-card';
 import PropTypes from 'prop-types';
 import styles from '@components/new-members/new-members.module.scss';
-import { membersContext } from '@store/members/members-context';
-import { searchMemberContext } from '@store/search-members/searchMembers-context';
-import { searchMembers } from '@helper-functions/search-members';
 import Link from 'next/link';
 import { userContext } from '@store/user/user-context';