From be14678cd0f7435d45e018c315bfccbb52962a0b Mon Sep 17 00:00:00 2001
From: Johannes <72809645+jobenjada@users.noreply.github.com>
Date: Wed, 21 Feb 2024 16:25:19 +0100
Subject: [PATCH] fix: show real date and remember survey list orientation
 (#2108)

---
 packages/ui/SurveysList/components/SurveyCard.tsx |  4 ++--
 packages/ui/SurveysList/index.tsx                 | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/ui/SurveysList/components/SurveyCard.tsx b/packages/ui/SurveysList/components/SurveyCard.tsx
index 5afb9196f7..57222df136 100644
--- a/packages/ui/SurveysList/components/SurveyCard.tsx
+++ b/packages/ui/SurveysList/components/SurveyCard.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { useEffect, useMemo, useState } from "react";
 
 import { cn } from "@formbricks/lib/cn";
-import { timeSince } from "@formbricks/lib/time";
+import { convertDateString, timeSince } from "@formbricks/lib/time";
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurvey } from "@formbricks/types/surveys";
 
@@ -130,7 +130,7 @@ export default function SurveyCard({
 
         <div className="col-span-4 grid w-full grid-cols-5 place-items-center">
           <div className="col-span-2 overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
-            {timeSince(survey.createdAt.toString())}
+            {convertDateString(survey.createdAt.toString())}
           </div>
           <div className="col-span-2 overflow-hidden text-ellipsis whitespace-nowrap text-sm text-slate-600">
             {timeSince(survey.updatedAt.toString())}
diff --git a/packages/ui/SurveysList/index.tsx b/packages/ui/SurveysList/index.tsx
index 10e93c77f9..f8c864e791 100644
--- a/packages/ui/SurveysList/index.tsx
+++ b/packages/ui/SurveysList/index.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { PlusIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { TEnvironment } from "@formbricks/types/environment";
 import { TSurvey } from "@formbricks/types/surveys";
@@ -28,7 +28,14 @@ export default function SurveysList({
   userId,
 }: SurveysListProps) {
   const [filteredSurveys, setFilteredSurveys] = useState<TSurvey[]>(surveys);
-  const [orientation, setOrientation] = useState("grid");
+  // Initialize orientation state from localStorage or default to 'grid'
+  const [orientation, setOrientation] = useState(() => localStorage.getItem("surveyOrientation") || "grid");
+
+  // Save orientation to localStorage
+  useEffect(() => {
+    localStorage.setItem("surveyOrientation", orientation);
+  }, [orientation]);
+
   return (
     <div className="space-y-4">
       <div className="flex justify-between">