From 5321a3b054fc7c1c884962887394527927b50c79 Mon Sep 17 00:00:00 2001 From: Shiba <44804845+DeepDoge@users.noreply.github.com> Date: Sat, 16 Nov 2024 21:02:03 +0000 Subject: [PATCH] idk, didnt wanna do this, i thought i wouldnt need it but it seems i do --- project/app/src/app/layout/Main.ts | 94 ++++++++++++------- .../src/features/feed/components/FeedForm.ts | 1 - project/app/src/features/post/Post.ts | 3 +- project/app/src/shared/utils/match.ts | 28 ++++++ 4 files changed, 88 insertions(+), 38 deletions(-) create mode 100644 project/app/src/shared/utils/match.ts diff --git a/project/app/src/app/layout/Main.ts b/project/app/src/app/layout/Main.ts index 4118da9..f867313 100644 --- a/project/app/src/app/layout/Main.ts +++ b/project/app/src/app/layout/Main.ts @@ -1,4 +1,4 @@ -import { awaited, computed, tags } from "@purifyjs/core"; +import { computed, ref, tags } from "@purifyjs/core"; import { menuSearchParam } from "~/app/layout/routes"; import { router } from "~/app/router"; import { layoutBrakpoint } from "~/app/styles"; @@ -9,54 +9,78 @@ import { config } from "~/shared/config"; import { BackSvg } from "~/shared/svgs/BackSvg"; import { CloseSvg } from "~/shared/svgs/CloseSvg"; import { css, useScope } from "~/shared/utils/css"; +import { match } from "~/shared/utils/match"; // TODO: seperate route and post section into two different files later. const { section, main, header, a, strong } = tags; export function Main() { - return main() - .effect(useScope(MainCss)) - .children( - router.route.derive((route) => { - if (!route) return null; - return section({ class: "route" }) - .ariaLabel(route.title) + const host = main(); + + const post = ref(null); + host.effect(() => { + const postPromise = computed(() => ({ + searchParam: postSearchParam.val, + config: config.val, + })).derive(({ searchParam, config }) => { + if (!searchParam) return null; + return Post.loadWithSearchParam(searchParam, config); + }); + + return postPromise.follow((promise) => { + if (!promise) { + post.val = null; + return; + } + + promise.then((resultPost) => { + if (promise !== postPromise.val) return; + post.val = resultPost; + }); + }, true); + }); + + return host.effect(useScope(MainCss)).children( + match(router.route) + .if((route) => route !== null) + .then((route) => + section({ class: "route" }) + .ariaLabel(route.derive((route) => route.title)) .children( header().children( a({ class: "icon back" }) .ariaHidden("true") .href(menuSearchParam.toHref("open")) .children(BackSvg()), - strong().textContent(route.title), - route.renderHeaderEnd(), + route.derive((route) => [ + strong().textContent(route.title), + route.renderHeaderEnd(), + ]), ), - route.render(), - ); - }), - computed(() => ({ searchParam: postSearchParam.val, config: config.val })).derive( - ({ searchParam, config }) => - awaited( - Post.loadWithSearchParam(searchParam, config).then((post) => { - if (!post) return null; - - return section({ class: "post" }) - .role("complementary") - .ariaLabel("Post") - .children( - header().children( - a({ class: "icon close" }) - .ariaHidden("true") - .href(postSearchParam.toHref(null)) - .children(CloseSvg()), - strong().textContent("Post"), - ), - PostThread(post), - ); - }), + route.derive((route) => route.render()), ), - ), - ); + ) + .else(() => null), + match(post) + .if((post) => post !== null) + .then((post) => { + return section({ class: "post" }) + .role("complementary") + .ariaLabel("Post") + .children( + header().children( + a({ class: "icon close" }) + .ariaHidden("true") + .href(postSearchParam.toHref(null)) + .children(CloseSvg()), + strong().textContent("Post"), + ), + post.derive(PostThread), + ); + }) + .else(() => null), + ); } export const MainCss = css` diff --git a/project/app/src/features/feed/components/FeedForm.ts b/project/app/src/features/feed/components/FeedForm.ts index d9f4336..051c91c 100644 --- a/project/app/src/features/feed/components/FeedForm.ts +++ b/project/app/src/features/feed/components/FeedForm.ts @@ -166,7 +166,6 @@ const PostFormCss = css` grid-auto-flow: column; justify-content: space-between; align-items: center; - font-size: 0.75em; } label { diff --git a/project/app/src/features/post/Post.ts b/project/app/src/features/post/Post.ts index 14ac581..3ed6cee 100644 --- a/project/app/src/features/post/Post.ts +++ b/project/app/src/features/post/Post.ts @@ -41,8 +41,7 @@ export class Post { return `${chainId.toString(16)}-${indexerAddress.slice(2)}-${feedId.slice(2)}-${index.toString(16)}` as const; } - public static async loadWithSearchParam(value: string | null, config: Config) { - if (!value) return null; + public static async loadWithSearchParam(value: string, config: Config) { const [ chainIdHex0xOmitted, indexerAddressHex0xOmitted, diff --git a/project/app/src/shared/utils/match.ts b/project/app/src/shared/utils/match.ts new file mode 100644 index 0000000..0085887 --- /dev/null +++ b/project/app/src/shared/utils/match.ts @@ -0,0 +1,28 @@ +import { ref, Signal } from "@purifyjs/core"; + +export function match(signal: Signal) { + return { + if(condition: (value: T) => value is U) { + return { + then(thenDerive: (signal: Signal>) => Then) { + return { + else( + elseDerive: (signal: Signal>) => Else, + ): Signal { + return ref(null!, (set) => + signal.derive(condition).follow((isThen) => { + console.log(isThen); + if (isThen) { + return set(thenDerive(signal as never)); + } else { + return set(elseDerive(signal as never)); + } + }, true), + ); + }, + }; + }, + }; + }, + }; +}