Add empty state (#129)

packages/DApp/src/components/votes/VotingCards.tsx

@@ -16,7 +16,7 @@ export function VotingCards() {
   const [sortedBy, setSortedBy] = useState(VotingSortingEnum.EndingSoonest)
   const [voteType, setVoteType] = useState('')
   const [filterKeyword, setFilterKeyword] = useState('')
-  const roomsToShow = useVotingCommunities(filterKeyword, voteType, sortedBy)
+  const { roomsToShow, empty } = useVotingCommunities(filterKeyword, voteType, sortedBy)
 
   return (
     <div>
@@ -53,7 +53,8 @@ export function VotingCards() {
           return <VotingCardSkeleton key={idx} />
         }
       })}
-      {roomsToShow.length === 0 && <VotingEmpty />}
+      {roomsToShow.length === 0 && empty && <VotingEmpty />}
+      {roomsToShow.length === 0 && !empty && <div>Community not found</div>}
     </div>
   )
 }

packages/DApp/src/hooks/useVotingCommunities.ts

@@ -10,10 +10,10 @@ export function useVotingCommunities(
   filterKeyword: string,
   voteType: string,
   sortedBy: VotingSortingEnum
-): DetailedVotingRoom[] {
+): { roomsToShow: DetailedVotingRoom[]; empty: boolean } {
   const [roomsWithCommunity, setRoomsWithCommunity] = useState<any[]>([])
   const [filteredRooms, setFilteredRooms] = useState<any[]>([])
-
+  const [empty, setEmpty] = useState(false)
   const { votingContract } = useContracts()
   const [roomList] = useContractCall({
     abi: votingContract.interface,
@@ -22,6 +22,15 @@ export function useVotingCommunities(
     args: [],
   }) ?? [[]]
 
+  useEffect(() => {
+    if (roomList.length === 0 && empty == false) {
+      setEmpty(true)
+    }
+    if (roomList.length > 0 && empty == true) {
+      setEmpty(false)
+    }
+  }, [JSON.stringify(roomList)])
+
   const contractCalls = roomList.map((el: any) => {
     return {
       abi: votingContract.interface,
@@ -57,5 +66,5 @@ export function useVotingCommunities(
     setFilteredRooms(filteredRooms.sort(sortVotingFunction(sortedBy)))
   }, [roomsWithCommunity, filterKeyword, voteType, sortedBy])
 
-  return filteredRooms
+  return { roomsToShow: filteredRooms, empty }
 }