minor ux improvement by saving filter list in options flow

src/lib/components/AnalystInsight.svelte

@@ -87,7 +87,7 @@
         id={"analystInsightInfo"}
       />
     </div>
-
+{#if data?.user?.tier === 'Pro'}
       {#if isLoaded}
         {#if Object?.keys(rawData)?.length !== 0}
           <div class="w-full flex flex-col items-start">
@@ -136,23 +136,12 @@
           </div>
         </div>
       {/if}
+       {:else}
+        <div class="shadow-lg shadow-bg-[#000] bg-[#111112] sm:bg-opacity-[0.5] text-sm sm:text-[1rem] rounded-md w-full p-4 min-h-24 mt-4 text-white m-auto flex justify-center items-center text-center font-semibold">
+            <svg class="mr-1.5 w-5 h-5 inline-block"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#A3A3A3" d="M17 9V7c0-2.8-2.2-5-5-5S7 4.2 7 7v2c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h10c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3M9 7c0-1.7 1.3-3 3-3s3 1.3 3 3v2H9z"/></svg>
+            Unlock content with <a class="inline-block ml-2 text-blue-400 hover:sm:text-white" href="/pricing">Pro Subscription</a>
+          </div>
+        {/if}
 
   </main>
 </section>
-
-<style>
-  .app {
-    height: 300px;
-    max-width: 100%; /* Ensure chart width doesn't exceed the container */
-  }
-
-  @media (max-width: 640px) {
-    .app {
-      height: 210px;
-    }
-  }
-
-  .chart {
-    width: 100%;
-  }
-</style>

src/routes/api/options-flow-filter-cookie/+server.ts

@@ -0,0 +1,19 @@
+import type { RequestHandler } from "./$types";
+
+export const POST: RequestHandler = async ({ request, cookies }) => {
+  const data = await request.json();
+  const ruleOfList = data?.ruleOfList;
+
+  try {
+    cookies.set("options-flow-filter-cookie", JSON.stringify(ruleOfList), {
+      httpOnly: true,
+      sameSite: "lax",
+      secure: true,
+      path: "/",
+      maxAge: 60 * 60 * 24 * 365, // 1 Year
+    });
+  } catch (e) {
+    console.error(e);
+  }
+  return new Response(JSON.stringify("done"));
+};

src/routes/options-flow/+page.server.ts

@@ -1,4 +1,4 @@
-export const load = async ({ locals }) => {
+export const load = async ({ locals, cookies }) => {
   const { apiURL, apiKey } = locals;
 
   const getOptionsFlowFeed = async () => {
@@ -15,8 +15,23 @@ export const load = async ({ locals }) => {
     return output;
   };
 
+  const getPredefinedCookieRuleOfList = async () => {
+    // make the POST request to the endpoint
+    const ruleOfList = cookies.get("options-flow-filter-cookie") ?? [];
+    const output =
+      ruleOfList?.length !== 0
+        ? JSON.parse(ruleOfList)
+        : [
+            { name: "cost_basis", value: "any" },
+            { name: "date_expiration", value: "any" },
+          ];
+
+    return output;
+  };
+
   // Make sure to return a promise
   return {
     getOptionsFlowFeed: await getOptionsFlowFeed(),
+    getPredefinedCookieRuleOfList: await getPredefinedCookieRuleOfList(),
   };
 };

src/routes/options-flow/+page.svelte

@@ -21,16 +21,7 @@
 
   export let data;
   
-  let ruleOfList = [
+  let ruleOfList = data?.getPredefinedCookieRuleOfList || [];
-  {
-    "name": "cost_basis",
-    "value": "any"
-  },
-  {
-    "name": "date_expiration",
-    "value": "any"
-  },
-];
 
   let displayRules = [];
   let filterQuery = '';
@@ -79,6 +70,11 @@ Object.keys(allRules).forEach(ruleName => {
   valueMappings[ruleName] = allRules[ruleName].defaultValue;
 });
 
+// Update ruleCondition and valueMappings based on existing rules
+ruleOfList.forEach(rule => {
+ruleCondition[rule.name] = rule.condition || allRules[rule.name].defaultCondition;
+valueMappings[rule.name] = rule.value || allRules[rule.name].defaultValue;
+});
 
 
 
@@ -118,6 +114,8 @@ async function handleResetAll() {
   });
   displayRules = allRows?.filter(row => ruleOfList.some(rule => rule.name === row.rule));
   displayedData = rawData;
+  await saveCookieRuleOfList()
+
 }
 
 function changeRule(state: string)  
@@ -212,7 +210,7 @@ function changeRuleCondition(name: string, state: string) {
   ruleCondition[ruleName] = state;
 }
 
-let checkedItems = new Set();
+let checkedItems = new Set(ruleOfList.flatMap(rule => rule.value));
 
 function isChecked(item) {
     return checkedItems.has(item);
@@ -261,6 +259,7 @@ async function handleChangeValue(value) {
     }
 
     shouldLoadWorker.set(true);
+    await saveCookieRuleOfList()
 
 
 }
@@ -285,7 +284,16 @@ const nyseDate = new Date(data?.getOptionsFlowFeed?.at(0)?.date ?? null)?.toLoca
     timeZone: 'Europe/Berlin' 
 });
 
-  let rawData = [];
+let rawData = data?.getOptionsFlowFeed?.filter(item => 
+  Object?.values(item)?.every(value => 
+    value !== null && value !== undefined && 
+    (typeof value !== 'object' || Object?.values(value)?.every(subValue => subValue !== null && subValue !== undefined))
+  )
+);
+  rawData?.forEach((item) => {
+        item.dte = daysLeft(item?.date_expiration);
+    });
+  
   let displayedData =[];
 
   let flowSentiment;
@@ -450,6 +458,19 @@ function daysLeft(targetDate) {
   return daysLeft;
 }
     
+async function saveCookieRuleOfList() {
+    const postData = {
+      'ruleOfList' : ruleOfList
+    }
+
+    const response = await fetch('/api/options-flow-filter-cookie', {
+      method: 'POST',
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(postData),
+      }); // make a POST request to the server with the FormData object
+}
 
   onMount(async () => {
 
@@ -457,10 +478,6 @@ function daysLeft(targetDate) {
 
 
     audio = new Audio(notifySound);
-    rawData = data?.getOptionsFlowFeed;
-    rawData?.forEach((item) => {
-        item.dte = daysLeft(item?.date_expiration);
-      });
     displayedData = rawData;
     calculateStats(rawData);
 
@@ -479,6 +496,11 @@ function daysLeft(targetDate) {
     }
   });
 
+    if(ruleOfList?.length !== 0) {
+      shouldLoadWorker.set(true);
+      console.log('initial filter') 
+    }    
+
     isLoaded = true;
     /*
     if ($isOpen) {
@@ -502,6 +524,7 @@ onDestroy(async() => {
       audio?.pause();
       audio = null;
     }
+
   
   })
   
@@ -716,7 +739,7 @@ $: {
   
 $: {
   if (ruleOfList) {
-    const ruleToUpdate = ruleOfList?.find(rule => rule.name === ruleName);
+    const ruleToUpdate = ruleOfList?.find(rule => rule?.name === ruleName);
     if (ruleToUpdate) {
       ruleToUpdate.value = valueMappings[ruleToUpdate.name];
       ruleToUpdate.condition = ruleCondition[ruleToUpdate.name];
@@ -1369,7 +1392,7 @@ $: {
               <tr on:click={() => changeRule(row?.rule)} class="sm:hover:bg-[#333333] cursor-pointer">
                 <td class="border-b border-[#262626]">{index+1}</td>
                 <td class="text-start border-b border-[#262626]">
-                  {#if ruleOfList.find((rule) => rule?.name === row?.rule)}
+                  {#if ruleOfList?.find((rule) => rule?.name === row?.rule)}
                   <svg class="flex-shrink-0 w-5 h-5 sm:w-6 sm:h-6 text-green-400 inline-block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
                   {/if}
                 </td>