alphaβiota
alphaβiota
Explore posts from servers
TTCTheo's Typesafe Cult
Created by alphaβiota on 6/9/2024 in #questions
Hi, First Post, Sharing a pattern I've found for RSC to ClientSide state
// src/components/ui/navigation/user-pfp-icon.tsx

"use client";

import { toggleUserMenu } from "@/src/store/slice/layout";
import store, { RootState } from "@/src/store/store";
import { useSelector } from "react-redux";
import { ClientFcStoreProvider } from "../../client-fc-store-wrap";
import { AvatarThumbnail } from "../profile/AvatarThumbnail";
import { twMerge } from "tailwind-merge";
import { X } from 'lucide-react';
import Button from "../button-alt";
import { useRouter } from "next/navigation";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

const UserPfpIcon_ = ({ $state }: any): JSX.Element =>
{
const layoutState = useSelector((state: RootState) => state.layout);
const authState = useSelector((state: RootState) => state.auth);

const router = useRouter();
const clientPathname = usePathname();

const [pathname, setPathname] = useState<string>($state.layout.pathname);
useEffect(() =>
{
setPathname(clientPathname)
}, [clientPathname]);

return (
<>
{pathname !== "/auth" &&
<Button
intent="translucent"
size="small"
extendClassName='w-[34px] h-[34px] font-bold p-0 m-0'
id="buttonNavUserMenu"
onClick={async () =>
{
if (authState.isLoggedIn) { store.dispatch(toggleUserMenu()) }
else router.push("/auth")
return true
}}
>
<div
className={twMerge("drop-shadow-[0px_2px_1px_#00000033] rounded-full", "bg-[var(--icon-bg)]")}>
{layoutState.userMenuOpen ? <X /> :
<AvatarThumbnail user={authState?.user || $state?.auth?.user} />}
</div>

</Button>
}
</>
)
};

export const UserPfpIcon = ({ $state }: any) => <ClientFcStoreProvider ><UserPfpIcon_ $state={$state} /></ClientFcStoreProvider>
// src/components/ui/navigation/user-pfp-icon.tsx

"use client";

import { toggleUserMenu } from "@/src/store/slice/layout";
import store, { RootState } from "@/src/store/store";
import { useSelector } from "react-redux";
import { ClientFcStoreProvider } from "../../client-fc-store-wrap";
import { AvatarThumbnail } from "../profile/AvatarThumbnail";
import { twMerge } from "tailwind-merge";
import { X } from 'lucide-react';
import Button from "../button-alt";
import { useRouter } from "next/navigation";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

const UserPfpIcon_ = ({ $state }: any): JSX.Element =>
{
const layoutState = useSelector((state: RootState) => state.layout);
const authState = useSelector((state: RootState) => state.auth);

const router = useRouter();
const clientPathname = usePathname();

const [pathname, setPathname] = useState<string>($state.layout.pathname);
useEffect(() =>
{
setPathname(clientPathname)
}, [clientPathname]);

return (
<>
{pathname !== "/auth" &&
<Button
intent="translucent"
size="small"
extendClassName='w-[34px] h-[34px] font-bold p-0 m-0'
id="buttonNavUserMenu"
onClick={async () =>
{
if (authState.isLoggedIn) { store.dispatch(toggleUserMenu()) }
else router.push("/auth")
return true
}}
>
<div
className={twMerge("drop-shadow-[0px_2px_1px_#00000033] rounded-full", "bg-[var(--icon-bg)]")}>
{layoutState.userMenuOpen ? <X /> :
<AvatarThumbnail user={authState?.user || $state?.auth?.user} />}
</div>

</Button>
}
</>
)
};

export const UserPfpIcon = ({ $state }: any) => <ClientFcStoreProvider ><UserPfpIcon_ $state={$state} /></ClientFcStoreProvider>
2 replies
CDCloudflare Developers
Created by alphaβiota on 11/7/2023 in #general-help
CF Images 30s Read Request Timeout. Status 408
Problem resolved with solution above 👆🏽✅ Thanks again! ✨
5 replies
CDCloudflare Developers
Created by alphaβiota on 11/7/2023 in #general-help
CF Images 30s Read Request Timeout. Status 408
Great, I will create an api endpoint for a worker to handle the upload via XHR, and then pass data on to CF Images. I'll try this solution first. Thanks! ✅
5 replies
CDCloudflare Developers
Created by alphaβiota on 11/7/2023 in #general-help
CF Images 30s Read Request Timeout. Status 408
@zegevlier says: There is no request duration limit for workers, only a CPU time limit or a run time limit https://developers.cloudflare.com/workers/platform/limits/#worker-limits
5 replies
CDCloudflare Developers
Created by alphaβiota on 11/7/2023 in #general-help
CF Images 30s Read Request Timeout. Status 408
@Chaika says: just proxy it through your own api/server if you have one
5 replies