(feat): Ability to enable and disable a survey

src/features/surveys/managers/createSurveyManager.ts

@@ -43,6 +43,7 @@ export const useCreateSurveyManager = () => {
       const newSurvey = await addDoc(collection(db, 'surveys'), {
         title,
         pack,
+        isActive: true,
         creatorId: user?.uid,
         createDate: new Date(),
       });

src/features/surveys/managers/surveyAnswerManager.ts

@@ -13,6 +13,7 @@ export const useSurveyAnswerManager = () => {
   const [showEmojiError, setShowEmojiError] = useState(false);
   const { surveyId } = router.query as { surveyId: string };
 
+  const [isSurveyActive, setIsSurveyActive] = useState<boolean>(false);
   const [question, setQuestion] = useState('');
   const [answer, setAnswer] = useState('');
   const [icons, setIcons] = useState<string[]>([]);
@@ -32,8 +33,13 @@ export const useSurveyAnswerManager = () => {
       return;
     }
 
-    setQuestion(surveyData.data()?.title);
-    setIcons(surveyData.data()?.pack);
+    if (!surveyData.data()?.isActive) {
+      setIsSurveyActive(false);
+    } else {
+      setIsSurveyActive(true);
+      setQuestion(surveyData.data()?.title);
+      setIcons(surveyData.data()?.pack);
+    }
     setIsLoading(false);
   }, [router, surveyId]);
 
@@ -68,14 +74,22 @@ export const useSurveyAnswerManager = () => {
         toast.error('Survey ID not found');
         throw new Error('Survey ID not found');
       }
-      await addDoc(collection(db, 'surveys', surveyId, 'answers'), {
-        selectedIcon,
-        answer,
-        answerDate: new Date(),
-      });
-      setLocalStorageValue([...localStorageValue, surveyId]);
-      await router.replace('/');
-      toast.success('The reply has been sent');
+
+      const survey = await getDoc(doc(db, 'surveys', surveyId));
+
+      if (survey.data()?.isActive) {
+        await addDoc(collection(db, 'surveys', surveyId, 'answers'), {
+          selectedIcon,
+          answer,
+          answerDate: new Date(),
+        });
+        setLocalStorageValue([...localStorageValue, surveyId]);
+        await router.replace('/');
+        toast.success('The reply has been sent');
+      } else {
+        await router.replace('/');
+        toast.error('The survey is no longer active.');
+      }
     } catch (error) {
       toast.error('Error occured');
     } finally {
@@ -90,6 +104,7 @@ export const useSurveyAnswerManager = () => {
 
   return {
     isLoading,
+    isSurveyActive,
     question,
     icons,
     selectedIcon,

src/features/surveys/managers/surveyResultsManager.ts

@@ -7,6 +7,7 @@ import {
   orderBy,
   getDocs,
   Timestamp,
+  updateDoc,
 } from 'firebase/firestore';
 import { useRouter } from 'next/router';
 import toast from 'react-hot-toast';
@@ -29,6 +30,7 @@ export const useSurveyResultsManager = () => {
   const [createDate, setCreateDate] = useState<string>('');
   const [answersData, setAnswersData] = useState<AnswerData[]>([]);
   const [chartData, setChartData] = useState<BarChartData[]>([]);
+  const [isSurveyActive, setIsSurveyActive] = useState<boolean>(false);
   const [showOnlyWithExtraFeedback, setShowOnlyWithExtraFeedback] =
     useState(false);
 
@@ -59,11 +61,13 @@ export const useSurveyResultsManager = () => {
       const answersData = await getDocs(anserwsQuery);
       setVotes(answersData.docs.length);
 
+      setIsSurveyActive(surveyData.data()?.isActive);
       setCreateDate(
         formatFirebaseDateWithHours(surveyData.data()?.createDate as Timestamp)
       );
 
       setTitle(surveyData.data()?.title);
+
       const data = answersData.docs.map((doc) => ({
         ...doc.data(),
         id: doc.id,
@@ -90,6 +94,21 @@ export const useSurveyResultsManager = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const updateSurveyStatus = async (isActive: boolean) => {
+    try {
+      setIsSurveyActive(isActive);
+      await updateDoc(doc(db, 'surveys', surveyId), {
+        isActive,
+      });
+
+      toast.success(
+        `Survey status changed to ${isActive ? 'Active' : 'Inactive'}`
+      );
+    } catch (error) {
+      toast.error('Can not update survey status');
+    }
+  };
+
   const getDataToChart = useCallback((): BarChartData[] => {
     if (!answersData.length) {
       return [];
@@ -149,11 +168,13 @@ export const useSurveyResultsManager = () => {
     surveyId,
     getSurveyData,
     chartData,
+    isSurveyActive,
     votes,
     createDate,
     showOnlyWithExtraFeedback,
     filteredAnswersData,
     setShowOnlyWithExtraFeedback,
     navigateToSurveys,
+    updateSurveyStatus,
   };
 };

src/pages/survey/[surveyId]/index.tsx

@@ -7,9 +7,12 @@ import EmojiButton from 'features/surveys/components/EmojiButton/EmojiButton';
 import Header from 'shared/components/Header/Header';
 import Loader from 'shared/components/Loader/Loader';
 import { useSurveyAnswerManager } from 'features/surveys/managers/surveyAnswerManager';
+import Link from 'next/link';
+import ButtonLink from 'shared/components/ButtonLink/ButtonLink';
 
 function AnswerPage() {
   const {
+    isSurveyActive,
     isLoading,
     question,
     icons,
@@ -30,41 +33,61 @@ function AnswerPage() {
       </Head>
       <Loader isLoading={isLoading} />
       {!isLoading && (
-        <div className="container m-auto mb-6 px-4 text-center md:px-8">
-          <Header>{question}</Header>
+        <>
+          {isSurveyActive ? (
+            <div className="container m-auto mb-6 px-4 text-center md:px-8">
+              <Header>{question}</Header>
 
-          <div className="mx-auto  grid  max-w-[500px] grid-cols-2 gap-2 sm:grid-cols-4">
-            {icons.map((icon, idx) => (
-              <EmojiButton
-                icon={icon}
-                selected={selectedIcon === icon}
-                key={idx}
-                onClick={handleIconClick}
-              />
-            ))}
-          </div>
-          {showEmojiError && (
-            <div className="mt-2 text-red-500">Please select an emoji before sending.</div>)}
-          <div className="mt-8">
-            <textarea
-              className="h-56 w-[500px] max-w-[100%] resize-none rounded-lg p-4 shadow focus:outline-none"
-              placeholder="Tell Us More"
-              value={answer}
-              onChange={handleInputAnswer}
-            ></textarea>
-          </div>
-          <div className="flex justify-center">
-            <Button
-              onClick={handleSave}
-              className="mt-6 w-full sm:w-auto"
-              variant={ButtonVariant.PRIMARY}
-              sizeType={ButtonSize.MEDIUM}
-              isLoading={isAnswering}
-            >
-              Send
-            </Button>
-          </div>
-        </div>
+              <div className="mx-auto  grid  max-w-[500px] grid-cols-2 gap-2 sm:grid-cols-4">
+                {icons.map((icon, idx) => (
+                  <EmojiButton
+                    icon={icon}
+                    selected={selectedIcon === icon}
+                    key={idx}
+                    onClick={handleIconClick}
+                  />
+                ))}
+              </div>
+              {showEmojiError && (
+                <div className="mt-2 text-red-500">
+                  Please select an emoji before sending.
+                </div>
+              )}
+              <div className="mt-8">
+                <textarea
+                  className="h-56 w-[500px] max-w-[100%] resize-none rounded-lg p-4 shadow focus:outline-none"
+                  placeholder="Tell Us More"
+                  value={answer}
+                  onChange={handleInputAnswer}
+                ></textarea>
+              </div>
+              <div className="flex justify-center">
+                <Button
+                  onClick={handleSave}
+                  className="mt-6 w-full sm:w-auto"
+                  variant={ButtonVariant.PRIMARY}
+                  sizeType={ButtonSize.MEDIUM}
+                  isLoading={isAnswering}
+                >
+                  Send
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <div className="container m-auto mb-6 px-4 text-center md:px-8">
+              <h1 className="text-5xl">🙁</h1>
+              <h1 className="my-5 text-xl">Oops Survey is no longer active</h1>
+              <Link href={'/'}>
+                <ButtonLink
+                  variant={ButtonVariant.PRIMARY}
+                  className="w-full sm:w-auto"
+                >
+                  Go back to home
+                </ButtonLink>
+              </Link>
+            </div>
+          )}
+        </>
       )}
     </>
   );

src/pages/survey/answer/[surveyId]/index.tsx

@@ -21,12 +21,14 @@ function SurveyResultsPage() {
     surveyId,
     getSurveyData,
     chartData,
+    isSurveyActive,
     votes,
     createDate,
     showOnlyWithExtraFeedback,
     filteredAnswersData,
     setShowOnlyWithExtraFeedback,
     navigateToSurveys,
+    updateSurveyStatus,
   } = useSurveyResultsManager();
 
   const {
@@ -45,7 +47,7 @@ function SurveyResultsPage() {
       {!isLoading && (
         <div className="container mx-auto text-center">
           <Header>Answers for &quot;{title}&quot;</Header>
-          <div className="mb-6 flex flex-col justify-center sm:flex-row md:mb-10">
+          <div className="mb-6 flex flex-col justify-center sm:flex-row md:mb-6">
             <Button
               title="Copy link to clipboard"
               onClick={handleCopyLink(surveyId)}
@@ -73,6 +75,14 @@ function SurveyResultsPage() {
             />
           </div>
 
+          <div className="mb-6 mt-3 flex justify-center md:mb-10">
+            <Toggle
+              isEnabled={isSurveyActive}
+              onToggle={updateSurveyStatus}
+              label="Is survey active"
+            />
+          </div>
+
           <hr className=" md:hidden" />
           <AnswerHeader
             chartData={chartData}