fix filter navigation bug, fix to prevent archived show in SubmissionCounter

apps/formbricks-com/pages/waitlist.tsx

@@ -57,7 +57,7 @@ const WaitlistPage = () => {
             formId={
               process.env.NODE_ENV === "production"
                 ? "cld37mt2i0000ld08p9q572bc"
-                : "cldufl8uh000019mzr7fdotyu"
+                : "cldonm4ra000019axa4oc440z"
             }
             onPageSubmit={({ page }) => plausible(`waitlistSubmitPage-${page.id}`)}
             onFinished={() => plausible("waitlistFinished")}

apps/web/src/components/forms/custom/CustomResults.tsx

@@ -17,6 +17,7 @@ export default function PMFResults() {
     router.query.formId?.toString()
   );
 
+  const [numTotalSubmissions, setNumTotalSubmissions] = useState(0);
   const [filteredSubmissions, setFilteredSubmissions] = useState([]);
 
   if (isLoadingSubmissions) {
@@ -38,9 +39,13 @@ export default function PMFResults() {
             <div>
               <SubmissionCounter
                 numFilteredSubmissions={filteredSubmissions.length}
-                numTotalSubmissions={submissions.length}
+                numTotalSubmissions={numTotalSubmissions}
+              />
+              <FilterNavigation
+                submissions={submissions}
+                setFilteredSubmissions={setFilteredSubmissions}
+                setNumTotalSubmissions={setNumTotalSubmissions}
               />
-              <FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />
             </div>
 
             {/* Submission grid */}

apps/web/src/components/forms/custom/OverviewResults.tsx

@@ -22,6 +22,7 @@ export default function OverviewResults() {
     router.query.organisationId?.toString(),
     router.query.formId?.toString()
   );
+  const [numTotalSubmissions, setNumTotalSubmissions] = useState(0);
   const [filteredSubmissions, setFilteredSubmissions] = useState([]);
 
   if (isLoadingSubmissions || isLoadingForm) {
@@ -44,9 +45,13 @@ export default function OverviewResults() {
             <div>
               <SubmissionCounter
                 numFilteredSubmissions={filteredSubmissions.length}
-                numTotalSubmissions={submissions.length}
+                numTotalSubmissions={numTotalSubmissions}
+              />
+              <FilterNavigation
+                submissions={submissions}
+                setFilteredSubmissions={setFilteredSubmissions}
+                setNumTotalSubmissions={setNumTotalSubmissions}
               />
-              <FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />
             </div>
 
             {/* Submission grid */}

apps/web/src/components/forms/pmf/OverviewResults.tsx

@@ -21,6 +21,7 @@ export default function OverviewResults() {
     router.query.organisationId?.toString(),
     router.query.formId?.toString()
   );
+  const [numTotalSubmissions, setNumTotalSubmissions] = useState(0);
   const [filteredSubmissions, setFilteredSubmissions] = useState([]);
 
   const labelMap = useMemo(() => {
@@ -66,7 +67,11 @@ export default function OverviewResults() {
                 numFilteredSubmissions={filteredSubmissions.length}
                 numTotalSubmissions={submissions.length}
               />
-              <FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />
+              <FilterNavigation
+                submissions={submissions}
+                setFilteredSubmissions={setFilteredSubmissions}
+                setNumTotalSubmissions={setNumTotalSubmissions}
+              />
             </div>
 
             {/* Submission grid */}

apps/web/src/components/forms/pmf/PMFResults.tsx

@@ -16,6 +16,7 @@ export default function PMFResults() {
     router.query.organisationId?.toString(),
     router.query.formId?.toString()
   );
+  const [numTotalSubmissions, setNumTotalSubmissions] = useState(0);
 
   const [filteredSubmissions, setFilteredSubmissions] = useState([]);
 
@@ -38,9 +39,13 @@ export default function PMFResults() {
             <div>
               <SubmissionCounter
                 numFilteredSubmissions={filteredSubmissions.length}
-                numTotalSubmissions={submissions.length}
+                numTotalSubmissions={numTotalSubmissions}
+              />
+              <FilterNavigation
+                submissions={submissions}
+                setFilteredSubmissions={setFilteredSubmissions}
+                setNumTotalSubmissions={setNumTotalSubmissions}
               />
-              <FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />
             </div>
 
             {/* Submission grid */}

apps/web/src/components/forms/shared/FilterNavigation.tsx

@@ -24,12 +24,14 @@ interface FilterNavigationProps {
   submissions: any[];
   setFilteredSubmissions: (submissions: any[]) => void;
   limitFields?: string[];
+  setNumTotalSubmissions?: (any) => void;
 }
 
 export default function FilterNavigation({
   submissions,
   setFilteredSubmissions,
   limitFields = null,
+  setNumTotalSubmissions = ([]) => {},
 }: FilterNavigationProps) {
   const router = useRouter();
   const { formId, organisationId } = router.query;
@@ -47,25 +49,23 @@ export default function FilterNavigation({
           const archivedSelected = filter.options.find((option) => option.value === "archived")?.active;
           if (archivedSelected) {
             newFilteredSubmissions = newFilteredSubmissions.filter((submission) => submission.archived);
+            setNumTotalSubmissions([...submissions].filter((s) => s.archived).length);
           } else {
             newFilteredSubmissions = newFilteredSubmissions.filter((submission) => !submission.archived);
+            setNumTotalSubmissions([...submissions].filter((s) => !s.archived).length);
           }
+
           continue;
         }
         const isAllActive = filter.options.find((option) => option.value === "all")?.active;
         // no filter is all is selected, if not keep on filtering
         if (!isAllActive) {
           // filter for all other types
-          let pinnedFilterSubmissions = [];
+          let listOfValidFilteredSubmissions = [];
           if (filter.type === "radio") {
             for (const option of filter.options) {
-              if (option.active) {
-                newFilteredSubmissions = newFilteredSubmissions.filter((submission) => {
-                  return submission.data[filter.name] === option.value;
-                });
-              }
-              if (option.pinned) {
-                pinnedFilterSubmissions = pinnedFilterSubmissions.concat(
+              if (option.active || option.pinned) {
+                listOfValidFilteredSubmissions.push(
                   [...newFilteredSubmissions].filter((submission) => {
                     return submission.data[filter.name] === option.value;
                   })
@@ -74,30 +74,21 @@ export default function FilterNavigation({
             }
           } else if (filter.type === "checkbox") {
             for (const option of filter.options) {
-              if (option.active) {
-                newFilteredSubmissions = newFilteredSubmissions.filter((submission) => {
-                  const value = submission.data[filter.name];
-                  if (value) {
-                    return value.includes(option.value);
-                  }
-                });
-              }
-              if (option.pinned) {
-                pinnedFilterSubmissions = pinnedFilterSubmissions.concat(
-                  [...newFilteredSubmissions].filter((submission) => {
-                    return submission.data[filter.name] === option.value;
+              if (option.active || option.pinned) {
+                listOfValidFilteredSubmissions.push(
+                  newFilteredSubmissions.filter((submission) => {
+                    const value = submission.data[filter.name];
+                    if (value) {
+                      return value.includes(option.value);
+                    }
                   })
                 );
               }
             }
           }
           // add pinned submissions to the top
-          newFilteredSubmissions = filterUniqueById(
-            pinnedFilterSubmissions.concat(newFilteredSubmissions).sort((a, b) => {
-              // sort by date descending
-              return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-            })
-          );
+          const flattenedListOfValidFilteredSubmissions = listOfValidFilteredSubmissions.flat();
+          newFilteredSubmissions = filterUniqueById(flattenedListOfValidFilteredSubmissions);
         }
       }
       setFilteredSubmissions(newFilteredSubmissions);

apps/web/src/components/forms/shared/SubmissionCounter.tsx

@@ -1,6 +1,6 @@
 export function SubmissionCounter({ numFilteredSubmissions, numTotalSubmissions }) {
   return (
-    <div className="mb-4 rounded bg-white p-3 shadow-md">
+    <div className="mb-4 rounded-lg bg-white p-3 shadow-md">
       <div className="inline-block text-base font-bold text-slate-600">
         {numFilteredSubmissions} responses
       </div>