From 513f315704e19269ead48731f38fccc6f4c9da81 Mon Sep 17 00:00:00 2001 From: MuslemRahimi Date: Sat, 21 Sep 2024 22:25:24 +0200 Subject: [PATCH] minor ux improvement by saving filter list in options flow --- src/lib/components/AnalystInsight.svelte | 25 +++----- .../api/options-flow-filter-cookie/+server.ts | 19 ++++++ src/routes/options-flow/+page.server.ts | 17 +++++- src/routes/options-flow/+page.svelte | 59 +++++++++++++------ 4 files changed, 83 insertions(+), 37 deletions(-) create mode 100644 src/routes/api/options-flow-filter-cookie/+server.ts diff --git a/src/lib/components/AnalystInsight.svelte b/src/lib/components/AnalystInsight.svelte index 454d120d..5c76e798 100644 --- a/src/lib/components/AnalystInsight.svelte +++ b/src/lib/components/AnalystInsight.svelte @@ -87,7 +87,7 @@ id={"analystInsightInfo"} /> - +{#if data?.user?.tier === 'Pro'} {#if isLoaded} {#if Object?.keys(rawData)?.length !== 0}
@@ -136,23 +136,12 @@
{/if} + {:else} +
+ + Unlock content with Pro Subscription +
+ {/if} - - diff --git a/src/routes/api/options-flow-filter-cookie/+server.ts b/src/routes/api/options-flow-filter-cookie/+server.ts new file mode 100644 index 00000000..8203d746 --- /dev/null +++ b/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")); +}; diff --git a/src/routes/options-flow/+page.server.ts b/src/routes/options-flow/+page.server.ts index bc735220..ec53b3a7 100644 --- a/src/routes/options-flow/+page.server.ts +++ b/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(), }; }; diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte index 5214f2a3..9b030966 100644 --- a/src/routes/options-flow/+page.svelte +++ b/src/routes/options-flow/+page.svelte @@ -21,16 +21,7 @@ export let data; - let ruleOfList = [ - { - "name": "cost_basis", - "value": "any" - }, - { - "name": "date_expiration", - "value": "any" - }, -]; + let ruleOfList = data?.getPredefinedCookieRuleOfList || []; 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 @@ $: { changeRule(row?.rule)} class="sm:hover:bg-[#333333] cursor-pointer"> {index+1} - {#if ruleOfList.find((rule) => rule?.name === row?.rule)} + {#if ruleOfList?.find((rule) => rule?.name === row?.rule)} {/if}