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 798581cd..094b34b5 100644 --- a/src/components/home/index.js +++ b/src/components/home/index.js @@ -7,18 +7,44 @@ 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 { searchMemberContext } from '@store/search-members/searchMembers-context'; +import { searchMembers } from '@helper-functions/search-members'; +import { useState, useEffect } from 'react'; +import { Waypoint } from 'react-waypoint'; + import { BRAND_NAME, MEMBERS_TITLE, NEW_MEMBERS_TITLE, + NEW_MEMBERS_TO_SHOW, } from '@constants/AppConstants'; const Home = () => { const { showMemberRoleUpdateModal, isSuperUserMode } = userContext(); + const { + state: { newMembers: newMembersList }, + } = membersContext(); + const { searchTerm } = searchMemberContext(); + const filterMembersList = searchMembers(newMembersList, searchTerm); + const { query } = useRouter() || { query: { dev: false } }; const { dev } = query; const [isOptionKey, setIsOptionKey] = useState(false); + const [newMembers, setNewMembers] = useState([]); + const [scrollCount, setScrollCount] = useState(0); + + const fetchNewMembers = () => { + const newMemberArr = searchTerm ? filterMembersList : newMembersList; + const noOfMembersToShow = scrollCount * NEW_MEMBERS_TO_SHOW; + const slicedNewMembersList = newMemberArr.slice(0, noOfMembersToShow); + setNewMembers(slicedNewMembersList); + setScrollCount(scrollCount + 1); + }; + + useEffect(() => { + fetchNewMembers(); + }, [newMembersList]); return (
{ )}

{NEW_MEMBERS_TITLE}

- + + {newMembers && }
); }; diff --git a/src/components/new-members/index.js b/src/components/new-members/index.js index b2feed9b..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'; @@ -40,16 +37,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 (
- {filterMembers.map((newMember) => ( + {newMembers.map((newMember) => ( {renderNewUser(newMember, isOptionKey)} 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; 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"