From d441391cdc7d313b826c5b4e2163d9cdba13d829 Mon Sep 17 00:00:00 2001
From: Tal Yaron <tal.yaron@gmail.com>
Date: Thu, 5 Sep 2024 10:19:42 +0300
Subject: [PATCH] linting and type check

---
 .../getMultiStageStatements.ts                |   4 +-
 src/model/statements/statementsSlice.ts       |   9 +-
 src/view/components/triangle/Triangle.tsx     |   8 +-
 .../statement/components/SwitchScreens.tsx    |   2 -
 .../settings/statementSettingsCont.ts         |   3 +-
 .../solutions/StatementSolutionsPage.tsx      | 331 +++++++++---------
 .../components/emptyScreen/EmptyScreen.tsx    | 108 +++---
 .../suggestionCards/SuggestionCards.tsx       | 110 +++---
 .../suggestionCard/SuggestionCard.tsx         | 316 ++++++++---------
 .../solutions/statementSolutionsCont.ts       |  48 +--
 .../solutions/statementSolutionsHooks.ts      |  38 --
 .../components/vote/StatementVote.tsx         |   2 +-
 12 files changed, 468 insertions(+), 511 deletions(-)
 delete mode 100644 src/view/pages/statement/components/solutions/statementSolutionsHooks.ts

diff --git a/src/controllers/db/multiStageQuestion/getMultiStageStatements.ts b/src/controllers/db/multiStageQuestion/getMultiStageStatements.ts
index 03c2c273a..51c606c4d 100644
--- a/src/controllers/db/multiStageQuestion/getMultiStageStatements.ts
+++ b/src/controllers/db/multiStageQuestion/getMultiStageStatements.ts
@@ -11,7 +11,7 @@ export async function getFirstEvaluationOptions(
 ): Promise<void> {
 
 	try {
-		console.log("getFirstEvaluationOptions")
+		
 		const dispatch = store.dispatch;
 		const urlBase = isProduction() ? "qeesi7aziq-uc.a.run.app" : "http://localhost:5001/synthesistalyaron/us-central1";
 
@@ -23,7 +23,7 @@ export async function getFirstEvaluationOptions(
 		const { randomStatements, error } = await response.json();
 		if (error) throw new Error(error);
 		z.array(StatementSchema).parse(randomStatements);
-		console.log(randomStatements)
+		
 
 		dispatch(setCurrentMultiStepOptions(randomStatements));
 
diff --git a/src/model/statements/statementsSlice.ts b/src/model/statements/statementsSlice.ts
index 15a14d4c6..4300da962 100644
--- a/src/model/statements/statementsSlice.ts
+++ b/src/model/statements/statementsSlice.ts
@@ -15,8 +15,6 @@ import {
 
 // Helpers
 import { updateArray } from "../../controllers/general/helpers";
-import { sortSubStatements } from "../../view/pages/statement/components/solutions/statementSolutionsCont";
-
 
 enum StatementScreen {
 	chat = "chat",
@@ -393,9 +391,7 @@ export const statementOptionsSelector =
 			.sort((a, b) => a.createdAt - b.createdAt)
 			.map((statement) => ({ ...statement }));
 
-		const sortedSubStatements = sortSubStatements(subStatements, state.statements.screen);
-
-		return sortedSubStatements;
+		return subStatements;
 	};
 
 export const questionsSelector = (statementId: string | undefined) => (state: RootState) => state.statements.statements.filter((statement) => statement.parentId === statementId && statement.statementType === StatementType.question).sort((a, b) => a.createdAt - b.createdAt);
@@ -467,7 +463,8 @@ export const subscriptionParentStatementSelector = (parentId: string) =>
 
 export const myStatementsByStatementIdSelector = (statementId: string) => {
 	const user = store.getState().user.user;
-	return createSelector(
+	
+return createSelector(
 		(state: RootState) => state.statements.statements,
 		(statements) =>
 			statements.filter((st) => st.parentId === statementId && st.creatorId === user?.uid)
diff --git a/src/view/components/triangle/Triangle.tsx b/src/view/components/triangle/Triangle.tsx
index 514214674..89e03c5c9 100644
--- a/src/view/components/triangle/Triangle.tsx
+++ b/src/view/components/triangle/Triangle.tsx
@@ -14,12 +14,12 @@ interface Props {
 
 const Triangle: FC<Props> = ({ statement }) => {
 	const {t} = useLanguage();
-	const subStatements = useSelector(
+	const subStatements:Statement[] = useSelector(
 		statementOptionsSelector(statement.statementId)
-	).filter((s) => s.evaluation?.sumCon !== undefined);
+	).filter((s:Statement) => s.evaluation?.sumCon !== undefined);
 
 	let maxEvaluators = 0;
-	subStatements.forEach((subStatement) => {
+	subStatements.forEach((subStatement:Statement) => {
 		if (subStatement.evaluation?.numberOfEvaluators !== undefined &&  subStatement.evaluation?.numberOfEvaluators > maxEvaluators) maxEvaluators = subStatement.evaluation.numberOfEvaluators;
 	});
 
@@ -29,7 +29,7 @@ const Triangle: FC<Props> = ({ statement }) => {
 				
 			</div>
 			<div className={`${styles.triangle} ${styles["triangle--invisible"]}`}>
-				{subStatements.map((subStatement) => {
+				{subStatements.map((subStatement:Statement) => {
 					return (
 						<Dot key={subStatement.statementId} subStatement={subStatement} maxEvaluators={maxEvaluators}/>
 					);
diff --git a/src/view/pages/statement/components/SwitchScreens.tsx b/src/view/pages/statement/components/SwitchScreens.tsx
index b34271f82..18e6a355c 100644
--- a/src/view/pages/statement/components/SwitchScreens.tsx
+++ b/src/view/pages/statement/components/SwitchScreens.tsx
@@ -53,7 +53,6 @@ export default function SwitchScreens({
 		return (
 			<StatementEvaluationPage
 				statement={statement}
-				subStatements={subStatements}
 				handleShowTalker={handleShowTalker}
 				toggleAskNotifications={toggleAskNotifications}
 			/>
@@ -83,7 +82,6 @@ export default function SwitchScreens({
 		return (
 			<StatementEvaluationPage
 				statement={statement}
-				subStatements={subStatements}
 				handleShowTalker={handleShowTalker}
 				questions={true}
 				toggleAskNotifications={toggleAskNotifications}
diff --git a/src/view/pages/statement/components/settings/statementSettingsCont.ts b/src/view/pages/statement/components/settings/statementSettingsCont.ts
index 9cc1e5ac9..8bb81c342 100644
--- a/src/view/pages/statement/components/settings/statementSettingsCont.ts
+++ b/src/view/pages/statement/components/settings/statementSettingsCont.ts
@@ -259,8 +259,7 @@ export async function createStatementFromModal({
 	description,
 	isOptionSelected,
 	toggleAskNotifications,
-	parentStatement,
-	isSendToStoreTemp,
+	parentStatement
 }: CreateStatementFromModalParams) {
 	try {
 		if (!title) throw new Error('title is undefined');
diff --git a/src/view/pages/statement/components/solutions/StatementSolutionsPage.tsx b/src/view/pages/statement/components/solutions/StatementSolutionsPage.tsx
index 39b3f9d03..cff91c7c9 100644
--- a/src/view/pages/statement/components/solutions/StatementSolutionsPage.tsx
+++ b/src/view/pages/statement/components/solutions/StatementSolutionsPage.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from "react";
 
 // Third party imports
 import { QuestionStage, QuestionType, Statement, User } from "delib-npm";
-import { useParams, useNavigate } from "react-router";
+import { useNavigate } from "react-router";
 
 // Custom Components
 
@@ -22,7 +22,6 @@ import SuggestionCards from "./components/suggestionCards/SuggestionCards";
 
 interface StatementEvaluationPageProps {
   statement: Statement;
-
   handleShowTalker: (talker: User | null) => void;
   showNav?: boolean;
   questions?: boolean;
@@ -31,178 +30,178 @@ interface StatementEvaluationPageProps {
 }
 
 const StatementEvaluationPage: FC<StatementEvaluationPageProps> = ({
-  statement,
-  handleShowTalker,
-  questions = false,
-  toggleAskNotifications,
-  currentPage = `suggestion`,
+	statement,
+	handleShowTalker,
+	questions = false,
+	toggleAskNotifications,
+	currentPage = `suggestion`,
 }) => {
-  try {
-    // Hooks
+	try {
+		// Hooks
 
-    const navigate = useNavigate();
-    const { t } = useLanguage();
-    const isMultiStage =
+		const navigate = useNavigate();
+		const { t } = useLanguage();
+		const isMultiStage =
       statement.questionSettings?.questionType === QuestionType.multipleSteps;
 
-    const currentStage = statement.questionSettings?.currentStage;
-    const stageInfo = getStagesInfo(currentStage);
-    const useSearchForSimilarStatements =
+		const currentStage = statement.questionSettings?.currentStage;
+		const stageInfo = getStagesInfo(currentStage);
+		const useSearchForSimilarStatements =
       statement.statementSettings?.enableSimilaritiesSearch || false;
 
-    // Use States
-    const [showModal, setShowModal] = useState(false);
-    const [showToast, setShowToast] = useState(false);
-    const [showExplanation, setShowExplanation] = useState(
-      currentStage === QuestionStage.explanation && isMultiStage && !questions
-    );
-
-    useEffect(() => {
-      if (questions) {
-        setShowToast(false);
-      }
-    }, [questions]);
-
-    useEffect(() => {
-      if (!showToast && !questions) {
-        setShowToast(true);
-      }
-      if (
-        currentStage === QuestionStage.explanation &&
+		// Use States
+		const [showModal, setShowModal] = useState(false);
+		const [showToast, setShowToast] = useState(false);
+		const [showExplanation, setShowExplanation] = useState(
+			currentStage === QuestionStage.explanation && isMultiStage && !questions
+		);
+
+		useEffect(() => {
+			if (questions) {
+				setShowToast(false);
+			}
+		}, [questions]);
+
+		useEffect(() => {
+			if (!showToast && !questions) {
+				setShowToast(true);
+			}
+			if (
+				currentStage === QuestionStage.explanation &&
         isMultiStage &&
         !questions
-      ) {
-        setShowExplanation(true);
-      }
-      if (currentStage === QuestionStage.voting && !questions) {
-        //redirect us react router dom to voting page
-        navigate(`/statement/${statement.statementId}/vote`);
-      }
-    }, [statement.questionSettings?.currentStage, questions]);
-
-    const message = stageInfo ? stageInfo.message : false;
-
-    return (
-      <>
-        <div className="page__main">
-          <div className={`wrapper ${styles.wrapper}`}>
-            {isMultiStage && message && (
-              <Toast
-                text={`${t(message)}${currentStage === QuestionStage.suggestion ? `: "${getTitle(statement)}` : ""}`}
-                type="message"
-                show={showToast}
-                setShow={setShowToast}
-              >
-                {getToastButtons(currentStage)}
-              </Toast>
-            )}
-            <SuggestionCards
-              statement={statement}
-              handleShowTalker={handleShowTalker}
-              questions={questions}
-              currentPage={currentPage}
-              setShowModal={setShowModal}
-            />
-          </div>
-        </div>
-        <div className="page__footer">
-          <StatementBottomNav
-            setShowModal={setShowModal}
-            statement={statement}
-          />
-        </div>
-        {showExplanation && (
-          <Modal>
-            <StatementInfo
-              statement={statement}
-              setShowInfo={setShowExplanation}
-            />
-          </Modal>
-        )}
-        {showModal && (
-          <CreateStatementModalSwitch
-            toggleAskNotifications={toggleAskNotifications}
-            parentStatement={statement}
-            isQuestion={questions}
-            isMultiStage={isMultiStage}
-            setShowModal={setShowModal}
-            useSimilarStatements={useSearchForSimilarStatements}
-          />
-        )}
-      </>
-    );
-
-    function getToastButtons(questionStage: QuestionStage | undefined) {
-      try {
-        switch (questionStage) {
-          case QuestionStage.voting:
-          case QuestionStage.firstEvaluation:
-          case QuestionStage.secondEvaluation:
-          case QuestionStage.finished:
-          case QuestionStage.explanation:
-            return (
-              <Button
-                text={t("Close")}
-                iconOnRight={false}
-                onClick={() => {
-                  setShowToast(false);
-                }}
-                icon={<X />}
-                color="white"
-                bckColor="var(--crimson)"
-              />
-            );
-          case QuestionStage.suggestion:
-            return (
-              <>
-                <Button
-                  text={t("Close")}
-                  iconOnRight={false}
-                  onClick={() => {
-                    setShowToast(false);
-                  }}
-                  icon={<X />}
-                  color="white"
-                  bckColor="var(--crimson)"
-                />
-                <Button
-                  text={t("Add a solution")}
-                  iconOnRight={true}
-                  onClick={() => {
-                    setShowToast(false);
-                    setShowModal(true);
-                  }}
-                  icon={<LightBulbIcon />}
-                  color="white"
-                  bckColor="var(--green)"
-                />
-              </>
-            );
-          default:
-            return (
-              <Button
-                text={t("Close")}
-                iconOnRight={false}
-                onClick={() => {
-                  setShowToast(false);
-                }}
-                icon={<X />}
-                color="white"
-                bckColor="var(--crimson)"
-              />
-            );
-        }
-      } catch (error) {
-        console.error(error);
-
-        return null;
-      }
-    }
-  } catch (error) {
-    console.error(error);
-
-    return null;
-  }
+			) {
+				setShowExplanation(true);
+			}
+			if (currentStage === QuestionStage.voting && !questions) {
+				//redirect us react router dom to voting page
+				navigate(`/statement/${statement.statementId}/vote`);
+			}
+		}, [statement.questionSettings?.currentStage, questions]);
+
+		const message = stageInfo ? stageInfo.message : false;
+
+		return (
+			<>
+				<div className="page__main">
+					<div className={`wrapper ${styles.wrapper}`}>
+						{isMultiStage && message && (
+							<Toast
+								text={`${t(message)}${currentStage === QuestionStage.suggestion ? `: "${getTitle(statement)}` : ""}`}
+								type="message"
+								show={showToast}
+								setShow={setShowToast}
+							>
+								{getToastButtons(currentStage)}
+							</Toast>
+						)}
+						<SuggestionCards
+							statement={statement}
+							handleShowTalker={handleShowTalker}
+							questions={questions}
+							currentPage={currentPage}
+							setShowModal={setShowModal}
+						/>
+					</div>
+				</div>
+				<div className="page__footer">
+					<StatementBottomNav
+						setShowModal={setShowModal}
+						statement={statement}
+					/>
+				</div>
+				{showExplanation && (
+					<Modal>
+						<StatementInfo
+							statement={statement}
+							setShowInfo={setShowExplanation}
+						/>
+					</Modal>
+				)}
+				{showModal && (
+					<CreateStatementModalSwitch
+						toggleAskNotifications={toggleAskNotifications}
+						parentStatement={statement}
+						isQuestion={questions}
+						isMultiStage={isMultiStage}
+						setShowModal={setShowModal}
+						useSimilarStatements={useSearchForSimilarStatements}
+					/>
+				)}
+			</>
+		);
+
+		function getToastButtons(questionStage: QuestionStage | undefined) {
+			try {
+				switch (questionStage) {
+				case QuestionStage.voting:
+				case QuestionStage.firstEvaluation:
+				case QuestionStage.secondEvaluation:
+				case QuestionStage.finished:
+				case QuestionStage.explanation:
+					return (
+						<Button
+							text={t("Close")}
+							iconOnRight={false}
+							onClick={() => {
+								setShowToast(false);
+							}}
+							icon={<X />}
+							color="white"
+							bckColor="var(--crimson)"
+						/>
+					);
+				case QuestionStage.suggestion:
+					return (
+						<>
+							<Button
+								text={t("Close")}
+								iconOnRight={false}
+								onClick={() => {
+									setShowToast(false);
+								}}
+								icon={<X />}
+								color="white"
+								bckColor="var(--crimson)"
+							/>
+							<Button
+								text={t("Add a solution")}
+								iconOnRight={true}
+								onClick={() => {
+									setShowToast(false);
+									setShowModal(true);
+								}}
+								icon={<LightBulbIcon />}
+								color="white"
+								bckColor="var(--green)"
+							/>
+						</>
+					);
+				default:
+					return (
+						<Button
+							text={t("Close")}
+							iconOnRight={false}
+							onClick={() => {
+								setShowToast(false);
+							}}
+							icon={<X />}
+							color="white"
+							bckColor="var(--crimson)"
+						/>
+					);
+				}
+			} catch (error) {
+				console.error(error);
+
+				return null;
+			}
+		}
+	} catch (error) {
+		console.error(error);
+
+		return null;
+	}
 };
 
 export default StatementEvaluationPage;
diff --git a/src/view/pages/statement/components/solutions/components/emptyScreen/EmptyScreen.tsx b/src/view/pages/statement/components/solutions/components/emptyScreen/EmptyScreen.tsx
index ab95ee8d6..f061006f5 100644
--- a/src/view/pages/statement/components/solutions/components/emptyScreen/EmptyScreen.tsx
+++ b/src/view/pages/statement/components/solutions/components/emptyScreen/EmptyScreen.tsx
@@ -14,63 +14,63 @@ interface Props {
 }
 
 const EmptyScreen: FC<Props> = ({ currentPage, setShowModal }) => {
-    const {t} = useLanguage();
-  const { width } = useWindowDimensions();
-  const smallScreen = width < 1024;
+	const {t} = useLanguage();
+	const { width } = useWindowDimensions();
+	const smallScreen = width < 1024;
 
-  const handlePlusIconClick = () => {
-    setShowModal(true);
-  };
+	const handlePlusIconClick = () => {
+		setShowModal(true);
+	};
 
-  return (
-    <>
-      <div
-        className={styles.addingStatementWrapper}
-        style={{ paddingTop: "2rem" }}
-      >
-        <div className={styles.header}>
-          <div className={styles.title}>
-            <h1 className={styles.h1}>
-              {smallScreen ? (
-                <>
-                  {t(`Click on`)}{" "}
-                  <span className={styles.titleSpan}>{t(`”+”`)}</span>{" "}
-                  {t(`to add your ${currentPage}`)}
-                </>
-              ) : (
-                <>
-                  <h1>
-                    {`Click on `}
-                    <span className={styles.titleSpan}>
-                      {`” ${t(`Add ${currentPage} button`)} ”`}
-                    </span>
-                    <br />
-                    {` to add your ${t(`${currentPage}`)}`}
-                  </h1>
-                </>
-              )}
-            </h1>
-          </div>
-          <div
-            className={styles.plusButton}
-            onClick={handlePlusIconClick}
-            style={smallScreen ? { width: "4rem", height: "4rem" } : {}}
-          >
-            {smallScreen ? (
-              <WhitePlusIcon />
-            ) : (
-              <p>
-                {" "}
-                {t(`Add ${currentPage}`)} <WhitePlusIcon />{" "}
-              </p>
-            )}
-          </div>
-        </div>
-        <img src={ideaImage} alt="" className={styles.ideaImage} />
-      </div>
+	return (
+		<>
+			<div
+				className={styles.addingStatementWrapper}
+				style={{ paddingTop: "2rem" }}
+			>
+				<div className={styles.header}>
+					<div className={styles.title}>
+						<h1 className={styles.h1}>
+							{smallScreen ? (
+								<>
+									{t(`Click on`)}{" "}
+									<span className={styles.titleSpan}>{t(`”+”`)}</span>{" "}
+									{t(`to add your ${currentPage}`)}
+								</>
+							) : (
+								<>
+									<h1>
+										{`Click on `}
+										<span className={styles.titleSpan}>
+											{`” ${t(`Add ${currentPage} button`)} ”`}
+										</span>
+										<br />
+										{` to add your ${t(`${currentPage}`)}`}
+									</h1>
+								</>
+							)}
+						</h1>
+					</div>
+					<div
+						className={styles.plusButton}
+						onClick={handlePlusIconClick}
+						style={smallScreen ? { width: "4rem", height: "4rem" } : {}}
+					>
+						{smallScreen ? (
+							<WhitePlusIcon />
+						) : (
+							<p>
+								{" "}
+								{t(`Add ${currentPage}`)} <WhitePlusIcon />{" "}
+							</p>
+						)}
+					</div>
+				</div>
+				<img src={ideaImage} alt="" className={styles.ideaImage} />
+			</div>
       
-    </>
-  );
+		</>
+	);
 };
 
 export default EmptyScreen;
diff --git a/src/view/pages/statement/components/solutions/components/suggestionCards/SuggestionCards.tsx b/src/view/pages/statement/components/solutions/components/suggestionCards/SuggestionCards.tsx
index 853cbd3b7..802a9a7d3 100644
--- a/src/view/pages/statement/components/solutions/components/suggestionCards/SuggestionCards.tsx
+++ b/src/view/pages/statement/components/solutions/components/suggestionCards/SuggestionCards.tsx
@@ -5,9 +5,9 @@ import styles from "./SuggestionCards.module.scss";
 import { useNavigate, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
 import {
-  myStatementsByStatementIdSelector,
-  statementsOfMultiStepSelectorByStatementId,
-  statementSubsSelector,
+	myStatementsByStatementIdSelector,
+	statementsOfMultiStepSelectorByStatementId,
+	statementSubsSelector,
 } from "@/model/statements/statementsSlice";
 import EmptyScreen from "../emptyScreen/EmptyScreen";
 import { sortSubStatements } from "../../statementSolutionsCont";
@@ -22,68 +22,68 @@ interface Props {
 }
 
 const SuggestionCards: FC<Props> = ({
-  statement,
-  handleShowTalker,
-  currentPage = `suggestion`,
-  setShowModal,
+	statement,
+	handleShowTalker,
+	currentPage = `suggestion`,
+	setShowModal,
 }) => {
-  const { sort } = useParams();
-  const navigate = useNavigate();
+	const { sort } = useParams();
+	const navigate = useNavigate();
 
-  const [totalHeight, setTotalHeight] = useState(0);
+	const [totalHeight, setTotalHeight] = useState(0);
 
-  const {questionType ,currentStage} = statement.questionSettings || {questionType: QuestionType.singleStep, currentStage: QuestionStage.suggestion};
-  const subStatements = switchSubStatements() ;
+	const {questionType ,currentStage} = statement.questionSettings || {questionType: QuestionType.singleStep, currentStage: QuestionStage.suggestion};
+	const subStatements = switchSubStatements() ;
 
-  //change the source of options from the store based on the question type
-  function switchSubStatements(){
-    if(questionType === QuestionType.singleStep) return useSelector(
-      statementSubsSelector(statement.statementId)
-    )
-    else if(questionType === QuestionType.multipleSteps && currentStage !== QuestionStage.suggestion) return useSelector(statementsOfMultiStepSelectorByStatementId(statement.statementId));
-    else if(questionType === QuestionType.multipleSteps && currentStage === QuestionStage.suggestion) return useSelector(myStatementsByStatementIdSelector(statement.statementId));
-    else return [];
-  }
+	//change the source of options from the store based on the question type
+	function switchSubStatements(){
+		if(questionType === QuestionType.singleStep) return useSelector(
+			statementSubsSelector(statement.statementId)
+		)
+		else if(questionType === QuestionType.multipleSteps && currentStage !== QuestionStage.suggestion) return useSelector(statementsOfMultiStepSelectorByStatementId(statement.statementId));
+		else if(questionType === QuestionType.multipleSteps && currentStage === QuestionStage.suggestion) return useSelector(myStatementsByStatementIdSelector(statement.statementId));
+		else return [];
+	}
   
-  useEffect(() => { 
-   const {totalHeight:_totalHeight} = sortSubStatements(subStatements, sort, 30);
-    setTotalHeight(_totalHeight);
-  },[sort]);
-  useEffect(() => {
-    if(questionType == QuestionType.multipleSteps){
-      if(currentStage === QuestionStage.firstEvaluation)
-        getFirstEvaluationOptions(statement);
-      else if(currentStage === QuestionStage.secondEvaluation)
-        getSecondEvaluationOptions(statement);
-      else if(currentStage === QuestionStage.voting) navigate(`statement/${statement.statementId}/vote`);
-      else if(currentStage === QuestionStage.finished)  getSecondEvaluationOptions(statement);
+	useEffect(() => { 
+		const {totalHeight:_totalHeight} = sortSubStatements(subStatements, sort, 30);
+		setTotalHeight(_totalHeight);
+	},[sort]);
+	useEffect(() => {
+		if(questionType == QuestionType.multipleSteps){
+			if(currentStage === QuestionStage.firstEvaluation)
+				getFirstEvaluationOptions(statement);
+			else if(currentStage === QuestionStage.secondEvaluation)
+				getSecondEvaluationOptions(statement);
+			else if(currentStage === QuestionStage.voting) navigate(`statement/${statement.statementId}/vote`);
+			else if(currentStage === QuestionStage.finished)  getSecondEvaluationOptions(statement);
    
-    }
-  }, [currentStage, questionType]);
+		}
+	}, [currentStage, questionType]);
 
 
-  if (!subStatements) {
-    return (
-      <EmptyScreen currentPage={currentPage} setShowModal={setShowModal} />
-    );
-  }
+	if (!subStatements) {
+		return (
+			<EmptyScreen currentPage={currentPage} setShowModal={setShowModal} />
+		);
+	}
 
-  return (
-    <div className={styles["suggestions-wrapper"]} style={{height: `${totalHeight+100}px`}}>
-      {subStatements?.map((statementSub: Statement) => {
-        return (
-          <SuggestionCard
-            key={statementSub.statementId}
-            parentStatement={statement} 
-            siblingStatements={subStatements}
-            statement={statementSub}
-            showImage={handleShowTalker}
-          />
-        );
-      })}
+	return (
+		<div className={styles["suggestions-wrapper"]} style={{height: `${totalHeight+100}px`}}>
+			{subStatements?.map((statementSub: Statement) => {
+				return (
+					<SuggestionCard
+						key={statementSub.statementId}
+						parentStatement={statement} 
+						siblingStatements={subStatements}
+						statement={statementSub}
+						showImage={handleShowTalker}
+					/>
+				);
+			})}
   
-    </div>
-  );
+		</div>
+	);
 };
 
 export default SuggestionCards;
diff --git a/src/view/pages/statement/components/solutions/components/suggestionCards/suggestionCard/SuggestionCard.tsx b/src/view/pages/statement/components/solutions/components/suggestionCards/suggestionCard/SuggestionCard.tsx
index 8c9a02cc4..cf64cbcd8 100644
--- a/src/view/pages/statement/components/solutions/components/suggestionCards/suggestionCard/SuggestionCard.tsx
+++ b/src/view/pages/statement/components/solutions/components/suggestionCards/suggestionCard/SuggestionCard.tsx
@@ -6,8 +6,8 @@ import { Screen, Statement, StatementType, User } from "delib-npm";
 // Redux Store
 import { useAppDispatch, useAppSelector } from "@/controllers/hooks/reduxHooks";
 import {
-  setStatementElementHight,
-  statementSubscriptionSelector,
+	setStatementElementHight,
+	statementSubscriptionSelector,
 } from "@/model/statements/statementsSlice";
 
 // Helpers
@@ -15,7 +15,7 @@ import { isAuthorized, linkToChildren } from "@/controllers/general/helpers";
 
 // Hooks
 import useStatementColor, {
-  StyleProps,
+	StyleProps,
 } from "@/controllers/hooks/useStatementColor";
 
 // Custom Components
@@ -42,168 +42,168 @@ interface Props {
 }
 
 const SuggestionCard: FC<Props> = ({
-  parentStatement,
-  siblingStatements,
-  statement,
+	parentStatement,
+	siblingStatements,
+	statement,
 }) => {
-  // Hooks
+	// Hooks
 
-  const { t, dir } = useLanguage();
-  const { sort } = useParams();
+	const { t, dir } = useLanguage();
+	const { sort } = useParams();
 
-  // Redux Store
-  const dispatch = useAppDispatch();
-  const statementColor: StyleProps = useStatementColor(
-    statement.statementType || StatementType.statement
-  );
-  const statementSubscription = useAppSelector(
-    statementSubscriptionSelector(statement.statementId)
-  );
+	// Redux Store
+	const dispatch = useAppDispatch();
+	const statementColor: StyleProps = useStatementColor(
+		statement.statementType || StatementType.statement
+	);
+	const statementSubscription = useAppSelector(
+		statementSubscriptionSelector(statement.statementId)
+	);
 
-  // Use Refs
-  const elementRef = useRef<HTMLDivElement>(null);
+	// Use Refs
+	const elementRef = useRef<HTMLDivElement>(null);
 
-  // Use States
+	// Use States
 
-  const [isEdit, setIsEdit] = useState(false);
-  const [shouldShowAddSubQuestionModal, setShouldShowAddSubQuestionModal] =
+	const [isEdit, setIsEdit] = useState(false);
+	const [shouldShowAddSubQuestionModal, setShouldShowAddSubQuestionModal] =
     useState(false);
-  const [isCardMenuOpen, setIsCardMenuOpen] = useState(false);
-
-  const _isAuthorized = isAuthorized(
-    statement,
-    statementSubscription,
-    parentStatement.creatorId
-  );
-
-  useEffect(() => {
-    const element = elementRef.current;
-    if (element) {
-      setTimeout(() => {
-        dispatch(
-          setStatementElementHight({
-            statementId: statement.statementId,
-            height: elementRef.current?.clientHeight,
-          })
-        );
-      }, 0);
-    }
-  }, [elementRef.current?.clientHeight]);
-
-  useEffect(() => {
-    if (sort !== Screen.OPTIONS_RANDOM && sort !== Screen.QUESTIONS_RANDOM) {
-      sortSubStatements(siblingStatements, sort, 30);
-    }
-  }, [statement.consensus]);
-
-  useEffect(() => {
-    sortSubStatements(siblingStatements, sort, 30);
-  }, [statement.elementHight]);
-
-  function handleSetOption() {
-    try {
-      if (statement.statementType === "option") {
-        const cancelOption = window.confirm(
-          "Are you sure you want to cancel this option?"
-        );
-        if (cancelOption) {
-          setStatementIsOption(statement);
-        }
-      } else {
-        setStatementIsOption(statement);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  }
-
-  const shouldLinkToChildStatements = linkToChildren(
-    statement,
-    parentStatement
-  );
-
-  const statementAge = new Date().getTime() - statement.createdAt;
-
-  return (
-    <div
-      className={
-        statementAge < 10000
-          ? "statement-evaluation-card statement-evaluation-card--new"
-          : "statement-evaluation-card"
-      }
-      style={{
-        top: `${statement.top || 0}px`,
-        borderLeft: `8px solid ${statementColor.backgroundColor || "wheat"}`,
-        color: statementColor.color,
-        flexDirection: dir === "ltr" ? "row" : "row-reverse",
-      }}
-      ref={elementRef}
-    >
-      <div
-        className="selected-option"
-        style={{
-          backgroundColor: statement.selected
-            ? statementColor.backgroundColor
-            : "",
-        }}
-      >
-        <div
-          style={{
-            color: statementColor.color,
-            display: statement.selected ? "block" : "none",
-          }}
-        >
-          {t("Selected")}
-        </div>
-      </div>
-      <div className="main">
-        <div className="info">
-          <div className="text">
-            <EditTitle
-              statement={statement}
-              isEdit={isEdit}
-              setEdit={setIsEdit}
-              isTextArea={true}
-            />
-          </div>
-          <div className="more">
-            <SolutionMenu
-              statement={statement}
-              isAuthorized={_isAuthorized}
-              isCardMenuOpen={isCardMenuOpen}
-              setIsCardMenuOpen={setIsCardMenuOpen}
-              isEdit={isEdit}
-              setIsEdit={setIsEdit}
-              handleSetOption={handleSetOption}
-            />
-          </div>
-        </div>
-        {shouldLinkToChildStatements && (
-          <div className="chat">
-            <StatementChatMore statement={statement} />
-          </div>
-        )}
-        <div className="actions">
-          <Evaluation parentStatement={parentStatement} statement={statement} />
-          {parentStatement.hasChildren && (
-            <IconButton
-              className="add-sub-question-button"
-              onClick={() => setShouldShowAddSubQuestionModal(true)}
-            >
-              <AddQuestionIcon />
-            </IconButton>
-          )}
-        </div>
-        {shouldShowAddSubQuestionModal && (
-          <CreateStatementModal
-            parentStatement={statement}
-            isOption={false}
-            setShowModal={setShouldShowAddSubQuestionModal}
-          />
-        )}
-      </div>
-    </div>
-  );
+	const [isCardMenuOpen, setIsCardMenuOpen] = useState(false);
+
+	const _isAuthorized = isAuthorized(
+		statement,
+		statementSubscription,
+		parentStatement.creatorId
+	);
+
+	useEffect(() => {
+		const element = elementRef.current;
+		if (element) {
+			setTimeout(() => {
+				dispatch(
+					setStatementElementHight({
+						statementId: statement.statementId,
+						height: elementRef.current?.clientHeight,
+					})
+				);
+			}, 0);
+		}
+	}, [elementRef.current?.clientHeight]);
+
+	useEffect(() => {
+		if (sort !== Screen.OPTIONS_RANDOM && sort !== Screen.QUESTIONS_RANDOM) {
+			sortSubStatements(siblingStatements, sort, 30);
+		}
+	}, [statement.consensus]);
+
+	useEffect(() => {
+		sortSubStatements(siblingStatements, sort, 30);
+	}, [statement.elementHight]);
+
+	function handleSetOption() {
+		try {
+			if (statement.statementType === "option") {
+				const cancelOption = window.confirm(
+					"Are you sure you want to cancel this option?"
+				);
+				if (cancelOption) {
+					setStatementIsOption(statement);
+				}
+			} else {
+				setStatementIsOption(statement);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	const shouldLinkToChildStatements = linkToChildren(
+		statement,
+		parentStatement
+	);
+
+	const statementAge = new Date().getTime() - statement.createdAt;
+
+	return (
+		<div
+			className={
+				statementAge < 10000
+					? "statement-evaluation-card statement-evaluation-card--new"
+					: "statement-evaluation-card"
+			}
+			style={{
+				top: `${statement.top || 0}px`,
+				borderLeft: `8px solid ${statementColor.backgroundColor || "wheat"}`,
+				color: statementColor.color,
+				flexDirection: dir === "ltr" ? "row" : "row-reverse",
+			}}
+			ref={elementRef}
+		>
+			<div
+				className="selected-option"
+				style={{
+					backgroundColor: statement.selected
+						? statementColor.backgroundColor
+						: "",
+				}}
+			>
+				<div
+					style={{
+						color: statementColor.color,
+						display: statement.selected ? "block" : "none",
+					}}
+				>
+					{t("Selected")}
+				</div>
+			</div>
+			<div className="main">
+				<div className="info">
+					<div className="text">
+						<EditTitle
+							statement={statement}
+							isEdit={isEdit}
+							setEdit={setIsEdit}
+							isTextArea={true}
+						/>
+					</div>
+					<div className="more">
+						<SolutionMenu
+							statement={statement}
+							isAuthorized={_isAuthorized}
+							isCardMenuOpen={isCardMenuOpen}
+							setIsCardMenuOpen={setIsCardMenuOpen}
+							isEdit={isEdit}
+							setIsEdit={setIsEdit}
+							handleSetOption={handleSetOption}
+						/>
+					</div>
+				</div>
+				{shouldLinkToChildStatements && (
+					<div className="chat">
+						<StatementChatMore statement={statement} />
+					</div>
+				)}
+				<div className="actions">
+					<Evaluation parentStatement={parentStatement} statement={statement} />
+					{parentStatement.hasChildren && (
+						<IconButton
+							className="add-sub-question-button"
+							onClick={() => setShouldShowAddSubQuestionModal(true)}
+						>
+							<AddQuestionIcon />
+						</IconButton>
+					)}
+				</div>
+				{shouldShowAddSubQuestionModal && (
+					<CreateStatementModal
+						parentStatement={statement}
+						isOption={false}
+						setShowModal={setShouldShowAddSubQuestionModal}
+					/>
+				)}
+			</div>
+		</div>
+	);
 };
 
 export default SuggestionCard;
diff --git a/src/view/pages/statement/components/solutions/statementSolutionsCont.ts b/src/view/pages/statement/components/solutions/statementSolutionsCont.ts
index b02d606fb..71e7226dc 100644
--- a/src/view/pages/statement/components/solutions/statementSolutionsCont.ts
+++ b/src/view/pages/statement/components/solutions/statementSolutionsCont.ts
@@ -12,34 +12,34 @@ import { updateStatementTop } from "@/model/statements/statementsSlice";
 export function sortSubStatements(
 	subStatements: Statement[],
 	sort: string | undefined,
-	gap:number = 30
+	gap = 30
 ): {totalHeight:number} {
 	try {
 		const dispatch = store.dispatch;
 		let _subStatements = [...subStatements];
 		switch (sort) {
-			case Screen.OPTIONS_CONSENSUS:
-			case Screen.QUESTIONS_CONSENSUS:
-				_subStatements = subStatements.sort(
-					(a: Statement, b: Statement) => b.consensus - a.consensus,
-				);
-				break;
-			case Screen.OPTIONS_NEW:
-			case Screen.QUESTIONS_NEW:
-				_subStatements = subStatements.sort(
-					(a: Statement, b: Statement) => b.createdAt - a.createdAt,
-				);
-				break;
-			case Screen.OPTIONS_RANDOM:
-			case Screen.QUESTIONS_RANDOM:
-				_subStatements = subStatements.sort(() => Math.random() - 0.5);
-				break;
-			case Screen.OPTIONS_UPDATED:
-			case Screen.QUESTIONS_UPDATED:
-				_subStatements = subStatements.sort(
-					(a: Statement, b: Statement) => b.lastUpdate - a.lastUpdate,
-				);
-				break;
+		case Screen.OPTIONS_CONSENSUS:
+		case Screen.QUESTIONS_CONSENSUS:
+			_subStatements = subStatements.sort(
+				(a: Statement, b: Statement) => b.consensus - a.consensus,
+			);
+			break;
+		case Screen.OPTIONS_NEW:
+		case Screen.QUESTIONS_NEW:
+			_subStatements = subStatements.sort(
+				(a: Statement, b: Statement) => b.createdAt - a.createdAt,
+			);
+			break;
+		case Screen.OPTIONS_RANDOM:
+		case Screen.QUESTIONS_RANDOM:
+			_subStatements = subStatements.sort(() => Math.random() - 0.5);
+			break;
+		case Screen.OPTIONS_UPDATED:
+		case Screen.QUESTIONS_UPDATED:
+			_subStatements = subStatements.sort(
+				(a: Statement, b: Statement) => b.lastUpdate - a.lastUpdate,
+			);
+			break;
 		}
 		
 		let totalHeight = gap;
@@ -50,6 +50,7 @@ export function sortSubStatements(
 					top: totalHeight,
 				};
 				totalHeight += (subStatement.elementHight || 0) + gap;
+				
 				return update;
 
 			} catch (error) {
@@ -61,6 +62,7 @@ export function sortSubStatements(
 		return {totalHeight}
 	} catch (error) {
 		console.error(error);
+		
 		return {totalHeight:0};
 
 	}
diff --git a/src/view/pages/statement/components/solutions/statementSolutionsHooks.ts b/src/view/pages/statement/components/solutions/statementSolutionsHooks.ts
deleted file mode 100644
index 941ad3c74..000000000
--- a/src/view/pages/statement/components/solutions/statementSolutionsHooks.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { useState, useEffect } from "react";
-import { Statement, QuestionStage, QuestionType } from "delib-npm";
-import { useSelector } from "react-redux";
-import { myStatementsByStatementIdSelector } from "@/model/statements/statementsSlice";
-import { getFirstEvaluationOptions, getSecondEvaluationOptions } from "@/controllers/db/multiStageQuestion/getMultiStageStatements";
-import { set } from "node_modules/cypress/types/lodash";
-
-
-interface Props {
-    statement: Statement;
-}
-interface Output {
-    subStatements: Statement[];
-    isLoading: boolean;
-}
-export function useMultiStage({ statement }: Props): Output {
-    try {
-        const [isLoading, setIsLoading] = useState(false);
-        const [subStatements, setSubStatements] = useState<Statement[]>([]);
-        const isMultiStage = statement.questionSettings?.questionType === QuestionType.multipleSteps;
-        const questionStage = statement.questionSettings?.currentStage || QuestionStage.finished;
-        const questionType = statement.questionSettings?.questionType;
-
-        if (questionType !== QuestionType.multipleSteps) {
-            return { subStatements: [], isLoading: false };
-        }
-
-        const myStatements = useSelector(myStatementsByStatementIdSelector(statement.statementId));
-
-        // useEffect(, [questionStage]);
-
-        return { subStatements, isLoading };
-    } catch (error) {
-        console.log(error);
-        return { subStatements: [], isLoading: false };
-    }
-
-}
\ No newline at end of file
diff --git a/src/view/pages/statement/components/vote/StatementVote.tsx b/src/view/pages/statement/components/vote/StatementVote.tsx
index c55903f96..593bebd13 100644
--- a/src/view/pages/statement/components/vote/StatementVote.tsx
+++ b/src/view/pages/statement/components/vote/StatementVote.tsx
@@ -110,7 +110,7 @@ const StatementVote: FC<Props> = ({
 
 				{isCreateStatementModalOpen && (
 					<CreateStatementModalSwitch
-						isMuliStage={isMuliStage}
+						isMultiStage={isMuliStage}
 						useSimilarStatements={useSearchForSimilarStatements}
 						parentStatement={statement}
 						isQuestion={false}