Non voters new

.firebasesrc

@@ -0,0 +1,9 @@
+{
+  "projects": {
+    "default": "delib-v3-dev",
+    "dev": "delib-v3-dev",
+    "prod": "synthesistalyaron"
+  },
+  "targets": {},
+  "etags": {}
+}

src/controllers/db/configKey.ts

@@ -1,6 +1,6 @@
 const mode = import.meta.env.VITE_APP_ENV as "development" | "production";
 
-
+console.log("mode", mode);
 const firebaseConfig = {
   development: {
     apiKey: import.meta.env.VITE_FIREBASE_API_KEY_DEV,
@@ -24,7 +24,6 @@ const firebaseConfig = {
   },
 };
 
-
 const vapidKeys = {
   development: import.meta.env.VITE_FIREBASE_VAPID_KEY_DEV,
   production: import.meta.env.VITE_FIREBASE_VAPID_KEY_PROD,

src/controllers/db/vote/getVotes.ts

@@ -1,10 +1,10 @@
 import {
-	collection,
-	doc,
-	getDoc,
-	getDocs,
-	query,
-	where,
+  collection,
+  doc,
+  getDoc,
+  getDocs,
+  query,
+  where,
 } from "firebase/firestore";
 import { Collections, Statement, StatementSchema, Vote } from "delib-npm";
 import { DB } from "../config";
@@ -14,56 +14,52 @@ import { store } from "@/model/store";
 
 // Why get user from firebase when we can pass it as a parameter?
 export async function getToVoteOnParent(
-	parentId: string,
-	updateStoreWithVoteCB: (statement: Statement) => void,
+  parentId: string,
+  updateStoreWithVoteCB: (statement: Statement) => void
 ): Promise<void> {
-	try {
-		const user = getUserFromFirebase();
-		if (!user) throw new Error("User not logged in");
-		if(!parentId) throw new Error("ParentId not provided");
-		const voteId = getVoteId(user.uid, parentId);
-		if (!voteId) throw new Error("VoteId not found");
+  try {
+    const user = getUserFromFirebase();
+    if (!user) throw new Error("User not logged in");
+    if (!parentId) throw new Error("ParentId not provided");
+    const voteId = getVoteId(user.uid, parentId);
+    if (!voteId) throw new Error("VoteId not found");
 
-		const parentVoteRef = doc(
-			DB,
-			Collections.votes,
-			voteId
-		);
+    const parentVoteRef = doc(DB, Collections.votes, voteId);
 
-		const voteDB = await getDoc(parentVoteRef);
+    const voteDB = await getDoc(parentVoteRef);
 
-		const vote = voteDB.data();
-		if (!vote) return; // the user has not voted on this statement
-		VoteSchema.parse(vote);
+    const vote = voteDB.data();
+    if (!vote) return;
+    VoteSchema.parse(vote);
 
-		//get statemtn to update to store
-		const statementRef = doc(DB, Collections.statements, vote.statementId);
-		const statementDB = await getDoc(statementRef);
+    //get statemtn to update to store
+    const statementRef = doc(DB, Collections.statements, vote.statementId);
+    const statementDB = await getDoc(statementRef);
 
-		const statement = statementDB.data() as Statement;
-		if (!statement) throw new Error("Parent not found");
-		StatementSchema.parse(statement);
+    const statement = statementDB.data() as Statement;
+    if (!statement) throw new Error("Parent not found");
+    StatementSchema.parse(statement);
 
-		updateStoreWithVoteCB(statement);
-	} catch (error) {
-		console.error(error);
-	}
+    updateStoreWithVoteCB(statement);
+  } catch (error) {
+    console.error(error);
+  }
 }
 
 export async function getVoters(parentId: string): Promise<Vote[]> {
-	try {
-		const user = store.getState().user.user;
-		if (!user) throw new Error("User not logged in");
-		const votesRef = collection(DB, Collections.votes);
-		const q = query(votesRef, where("parentId", "==", parentId));
+  try {
+    const user = store.getState().user.user;
+    if (!user) throw new Error("User not logged in");
+    const votesRef = collection(DB, Collections.votes);
+    const q = query(votesRef, where("parentId", "==", parentId));
 
-		const votersDB = await getDocs(q);
-		const voters = votersDB.docs.map((vote) => vote.data()) as Vote[];
+    const votersDB = await getDocs(q);
+    const voters = votersDB.docs.map((vote) => vote.data()) as Vote[];
 
-		return voters;
-	} catch (error) {
-		console.error(error);
+    return voters;
+  } catch (error) {
+    console.error(error);
 
-		return [] as Vote[];
-	}
+    return [] as Vote[];
+  }
 }

src/view/pages/statement/components/settings/components/GetVoters.tsx

@@ -1,28 +1,40 @@
+import { useLanguage } from "@/controllers/hooks/useLanguages";
 import { User, Vote } from "delib-npm";
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
 import { handleGetVoters } from "../statementSettingsCont";
-import { useLanguage } from "@/controllers/hooks/useLanguages";
 import MembersChipsList from "./membership/membersChipsList/MembersChipList";
 
 interface GetVotersProps {
-    statementId: string;
+	statementId: string;
+	joinedMembers: User[];
 }
 
-const GetVoters: FC<GetVotersProps> = ({ statementId }) => {
+const GetVoters: FC<GetVotersProps> = ({ statementId, joinedMembers }) => {
 	const { t } = useLanguage();
 
 	const [voters, setVoters] = React.useState<Vote[]>([]);
-	const [clicked, setClicked] = React.useState(false);
+	const [nonVoters, setNonVoters] = React.useState<User[]>([]);
+	const [clickedVoters, setClickedVoters] = React.useState(false);
+	const [clickedNonVoters, setClickedNonVoters] = React.useState(false);
 
 	const getVoters = () => {
-		if (!clicked) {
-			handleGetVoters(statementId, setVoters, setClicked);
+		if (!clickedVoters) {
+			handleGetVoters(statementId, setVoters, setClickedVoters);
 		} else {
-			setClicked(false);
+			setClickedVoters(false);
 		}
 	};
 
-	const members = voters.flatMap((voter) => voter.voter as User);
+	//filter out users who haven't vote/those with no voter information
+	useEffect(() => {
+		if (voters.length > 0) {
+			const voterIds = new Set(voters.map((voter) => voter.voter?.uid));
+			const nonVotersList = joinedMembers.filter(
+				(member) => !voterIds.has(member.uid)
+			);
+			setNonVoters(nonVotersList);
+		}
+	}, [voters, joinedMembers]);
 
 	return (
 		<>
@@ -35,17 +47,42 @@ const GetVoters: FC<GetVotersProps> = ({ statementId }) => {
 				{t("Get Voters")}
 			</button>
 
-			{clicked && (
+			{clickedVoters && (
 				<>
-					{members.length > 0 && (
+					{voters.length > 0 ? (
 						<>
 							<span>
 								{voters.length} {t("Voted")}
 							</span>
-							<MembersChipsList members={members} />
+							<MembersChipsList members={voters.map((v) => v.voter as User)} />
+						</>
+					) : (
+						<div>{t("No voters found")}</div>
+					)}
+				</>
+			)}
+
+			<button
+				type="button"
+				className="voters-button form-button"
+				onClick={() => setClickedNonVoters(!clickedNonVoters)}
+				tabIndex={0}
+			>
+				{t("Get Non Voters")}
+			</button>
+
+			{clickedNonVoters && (
+				<>
+					{nonVoters.length > 0 ? (
+						<>
+							<span>
+								{nonVoters.length} {t("Did Not Vote")}
+							</span>
+							<MembersChipsList members={nonVoters} />
 						</>
+					) : (
+						<div>{t("No non-voters found")}</div>
 					)}
-					{members.length === 0 && <div>{t("No voters found")}</div>}
 				</>
 			)}
 		</>

src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.tsx

@@ -2,7 +2,7 @@ import { Dispatch, FC } from 'react';
 
 // Third party imports
 import { useNavigate, useParams } from 'react-router-dom';
-import { Statement } from 'delib-npm';
+import { Role, Statement, StatementSubscription } from 'delib-npm';
 
 // Firestore functions
 
@@ -26,6 +26,9 @@ import './StatementSettingsForm.scss';
 // icons
 import SaveIcon from '@/assets/icons/save.svg?react';
 import QuestionSettings from '../QuestionSettings/QuestionSettings';
+import { useAppSelector } from '@/controllers/hooks/reduxHooks';
+import { createSelector } from '@reduxjs/toolkit';
+import { RootState } from '@/model/store';
 
 interface StatementSettingsFormProps {
 	setIsLoading: (isLoading: boolean) => void;
@@ -46,6 +49,24 @@ const StatementSettingsForm: FC<StatementSettingsFormProps> = ({
 		const { statementId } = useParams();
 		const { t } = useLanguage();
 
+		// Selector to get the statement memberships
+		const statementMembershipSelector = (statementId: string | undefined) =>
+			createSelector(
+				(state: RootState) => state.statements.statementMembership,
+				(memberships) =>
+					memberships.filter(
+						(membership: StatementSubscription) =>
+							membership.statementId === statementId
+					)
+			);
+
+		const members: StatementSubscription[] = useAppSelector(
+			statementMembershipSelector(statementId)
+		);
+
+		const joinedMembers = members.filter((member) => member.role !== Role.banned).map(m => m.user);
+
+
 		// * Functions * //
 		const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 			e.preventDefault();
@@ -77,7 +98,6 @@ const StatementSettingsForm: FC<StatementSettingsFormProps> = ({
 				<TitleAndDescription
 					statement={statement}
 					setStatementToEdit={setStatementToEdit}
-
 				/>
 				<SectionTitle title={t('General Settings')} />
 				<section className='switches-area'>
@@ -92,12 +112,12 @@ const StatementSettingsForm: FC<StatementSettingsFormProps> = ({
 						<UploadImage {...statementSettingsProps} />
 						<QuestionSettings {...statementSettingsProps} />
 						<SectionTitle title={t('Members')} />
-						<MembersSettings setStatementToEdit={setStatementToEdit} statement={statement}/>
+						<MembersSettings setStatementToEdit={setStatementToEdit} statement={statement} />
 						<section className='get-members-area'>
-							<GetVoters statementId={statementId} />
+							<GetVoters statementId={statementId!} joinedMembers={joinedMembers} />
 						</section>
 						<section className='get-members-area'>
-							<GetEvaluators statementId={statementId} />
+							<GetEvaluators statementId={statementId!} />
 						</section>
 					</>
 				)}