Created
June 4, 2020 19:25
-
-
Save tamunoibi/5e9d9d96ddc263aa36c946889aa2a707 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useEffect, useState, useCallback } from "react"; | |
import MnassaInput from "../../../../components/MnassaInput"; | |
import { | |
getConnectionRequest, | |
clearGetConnectionResult, | |
} from "../../../../store/actions/getConnections"; | |
import { useDispatch, useSelector } from "react-redux"; | |
import { searchConnectionRequest } from "../../../../store/actions/getConnections/searchConnections"; | |
import loadingSpinner from "../../../../images/spinner-icon-gif-10.gif"; | |
const UserList = ({ | |
currentModal, | |
modalToOpen, | |
setIsOpen, | |
buttonText, | |
selectedUser, | |
setSelectedUser, | |
userId, | |
displayTab, | |
setDisplayTab, | |
}) => { | |
const dispatch = useDispatch(); | |
const connectionsStore = useSelector((s) => s.getUserConnections); | |
const searchStore = useSelector((s) => s.searchConnections); | |
const connectionsState = useSelector((s) => s.getUserConnections.data); | |
const searchConnectionState = useSelector((s) => s.searchConnections.data); | |
const [query, setQuery] = useState(""); | |
const [searched, setSearched] = useState(false); | |
useEffect(() => { | |
dispatch(getConnectionRequest(undefined, undefined, "accepted")); | |
}, [dispatch]); | |
useEffect(() => { | |
if (searched && !query) { | |
const args = displayTab.users | |
? [undefined, undefined, "accepted"] | |
: [undefined, undefined, undefined, "communities"]; | |
dispatch(getConnectionRequest(...args)); | |
} | |
}, [dispatch, searched, query, displayTab]); | |
const debounce = (func, waitFor = 500) => { | |
let timeout; | |
return (...args) => | |
new Promise((resolve) => { | |
if (timeout) { | |
clearTimeout(timeout); | |
} | |
timeout = setTimeout(() => resolve(func(...args)), waitFor); | |
}); | |
}; | |
const handleConnectionSearch = (term) => { | |
setQuery(term); | |
setSearched(true); | |
const type = displayTab.users ? "users" : "communities"; | |
if (term.length > 2) { | |
dispatch(clearGetConnectionResult()); | |
dispatch( | |
searchConnectionRequest(term, undefined, undefined, undefined, type) | |
); | |
} | |
}; | |
const debounceCall = useCallback(debounce(handleConnectionSearch), [ | |
displayTab, | |
]); | |
const handleTabItemClick = (e, itemToShow) => { | |
e.stopPropagation(); | |
const clickedEle = e.target; | |
const tabItem = document.querySelectorAll(".tab-item"); | |
tabItem.forEach((item) => { | |
item.classList.remove("tab-item-active"); | |
}); | |
setDisplayTab({ [itemToShow]: true }); | |
clickedEle.classList.add("tab-item-active"); | |
if (itemToShow === "communities") { | |
setSelectedUser({ id: "", name: "" }); | |
dispatch( | |
getConnectionRequest(undefined, undefined, undefined, "communities") | |
); | |
} | |
if (itemToShow === "users") { | |
setSelectedUser({ id: "", name: "" }); | |
dispatch(getConnectionRequest(undefined, undefined, "accepted")); | |
} | |
}; | |
const UserListItem = (props) => { | |
const photo = displayTab.users ? props.item.photo : props.item.image[0]; | |
const name = displayTab.users ? props.item.display_name : props.item.name; | |
const idForUser = | |
userId === props.item.to_be_accepted_by | |
? props.item.requested_by | |
: props.item.to_be_accepted_by; | |
const id = displayTab.users ? idForUser : props.item.uuid; | |
return ( | |
<div | |
className="mt-4 pointer txt-left " | |
onClick={(e) => { | |
console.log("About to run"); | |
e.stopPropagation(); | |
}} | |
> | |
<label className="checkbox-container"> | |
<img | |
alt="user profile" | |
className="profile-img" | |
src={ | |
photo | |
? photo | |
: "https://res.cloudinary.com/fxola/image/upload/v1562711912/ezkc4mj7pktwzqhmrbpt.png" | |
} | |
/> | |
<span className="ml-10">{name}</span> | |
<input | |
type="checkbox" | |
checked={selectedUser.id && selectedUser.id === id} | |
onChange={() => { | |
console.log("About to run"); | |
props.setSelectedUser({ | |
id, | |
name: name, | |
}); | |
}} | |
/> | |
<span className="checkmark"></span> | |
</label> | |
</div> | |
); | |
}; | |
const renderContent = () => { | |
if (connectionsStore.isLoading || searchStore.isLoading) { | |
return ( | |
<img | |
src={loadingSpinner} | |
alt="Loading Spinner" | |
height={"auto"} | |
width={20} | |
/> | |
); | |
} | |
if ( | |
connectionsState && | |
connectionsState.data && | |
connectionsState.data.data.length > 0 | |
) { | |
return connectionsState.data.data.map((item, keyId) => ( | |
<UserListItem | |
key={keyId} | |
item={item} | |
setSelectedUser={setSelectedUser} | |
/> | |
)); | |
} | |
if (searchConnectionState && searchConnectionState.data) { | |
return searchConnectionState.data.data.map((item, keyId) => ( | |
<UserListItem | |
key={keyId} | |
item={item} | |
id={selectedUser.id} | |
setSelectedUser={setSelectedUser} | |
/> | |
)); | |
} | |
if ( | |
displayTab.communities && | |
connectionsState && | |
connectionsState.data.data.length === 0 | |
) { | |
return <div>You have not joined any communities</div>; | |
} | |
}; | |
return ( | |
<div> | |
<form> | |
<MnassaInput | |
placeholder="Search through connections" | |
value={query} | |
onInputChange={debounceCall} | |
/> | |
</form> | |
<div className="tab-item-wrap txt-left"> | |
<span | |
className="tab-item mr-11 tab-item-active" | |
onClick={(e) => { | |
handleTabItemClick(e, "users"); | |
}} | |
> | |
Connections | |
</span>{" "} | |
<span | |
className="tab-item mr-11" | |
onClick={(e) => { | |
handleTabItemClick(e, "communities"); | |
}} | |
> | |
{" "} | |
Communities | |
</span>{" "} | |
</div> | |
{renderContent()} | |
{!connectionsStore.isLoading && | |
selectedUser && | |
selectedUser.id && | |
connectionsState && | |
connectionsState.data.data.length > 0 && ( | |
<button | |
onClick={(e) => { | |
e.preventDefault(); | |
setIsOpen((prevState) => ({ | |
...prevState, | |
[currentModal]: false, | |
[modalToOpen]: true, | |
})); | |
}} | |
className="width-100 transaction_modal__button" | |
> | |
{buttonText || "Continue"} | |
</button> | |
)} | |
</div> | |
); | |
}; | |
export default UserList; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment