Roland
Roland
PostsComments
TTCTheo's Typesafe Cult
Created by Roland on 1/31/2025 in #questions
Prevent router.refresh() from remounting client components
Only fetching the url param on server component
10 replies
TTCTheo's Typesafe Cult
Created by Roland on 1/31/2025 in #questions
Prevent router.refresh() from remounting client components
I fixed it by moving the entire logic to the api
10 replies
TTCTheo's Typesafe Cult
Created by Roland on 1/31/2025 in #questions
Prevent router.refresh() from remounting client components
Yeah if I call the api from server component cookies won't work
10 replies
TTCTheo's Typesafe Cult
Created by Roland on 1/31/2025 in #questions
Prevent router.refresh() from remounting client components
I am rn taking a different approach, which is just fetching the data via api and not in layout, so i don't have to call router.refresh at all
10 replies
TTCTheo's Typesafe Cult
Created by Roland on 1/31/2025 in #questions
Prevent router.refresh() from remounting client components
Both
10 replies
TTCTheo's Typesafe Cult
Created by Roland on 1/10/2025 in #questions
t3chat development
I really hate how my nextjs app gets slow the moment i toggle 3g connection although 90% of the app could work offline if it was implemented
7 replies
TTCTheo's Typesafe Cult
Created by Roland on 1/10/2025 in #questions
t3chat development
Oh yeah same
7 replies
TTCTheo's Typesafe Cult
Created by Roland on 12/11/2024 in #questions
UploadThing: Image upload successful, but reaching neither onUploadError nor onUploadSuccess
                compressImages({
                    images: [image.file],
                    options: {
                        maxSizeMB: 2,
                    },
                }).then((blobs) => {
                    const blob = blobs.shift();
                    if (blob && image.file) {
                        const compressedImage = new File([blob], image.file.name, { type: blob.type });

                        return startUpload([compressedImage], {
                            recipeId: recipe.id,
                            clientImageId: image.id,
                        });
                    }
                }).then((data) => {
                    if (!data) {
                        handleError();
                    }
                }).catch(handleError);
            }
        }

        // Update image status
        setImages((prevState) => prevState.map((image) => ({
            ...image,
            status: image.status === RecipeImageStatus.VALIDATING && image.file
                ? RecipeImageStatus.UPLOADING
                : image.status,
        })));
    }, [recipe, images]);

    // Mark recipeImage as upload completed and assign fileKey
    const imageUploadCompleted = (id: string, fileKey: string) => {
        setImages((prevState) => prevState.map((image) => {
            if (image.id === id) {
                return {
                    ...image,
                    fileKey: fileKey,
                    status: RecipeImageStatus.COMPLETED,
                };
            }

            return image;
        }));
    };
                compressImages({
                    images: [image.file],
                    options: {
                        maxSizeMB: 2,
                    },
                }).then((blobs) => {
                    const blob = blobs.shift();
                    if (blob && image.file) {
                        const compressedImage = new File([blob], image.file.name, { type: blob.type });

                        return startUpload([compressedImage], {
                            recipeId: recipe.id,
                            clientImageId: image.id,
                        });
                    }
                }).then((data) => {
                    if (!data) {
                        handleError();
                    }
                }).catch(handleError);
            }
        }

        // Update image status
        setImages((prevState) => prevState.map((image) => ({
            ...image,
            status: image.status === RecipeImageStatus.VALIDATING && image.file
                ? RecipeImageStatus.UPLOADING
                : image.status,
        })));
    }, [recipe, images]);

    // Mark recipeImage as upload completed and assign fileKey
    const imageUploadCompleted = (id: string, fileKey: string) => {
        setImages((prevState) => prevState.map((image) => {
            if (image.id === id) {
                return {
                    ...image,
                    fileKey: fileKey,
                    status: RecipeImageStatus.COMPLETED,
                };
            }

            return image;
        }));
    };
5 replies
TTCTheo's Typesafe Cult
Created by Roland on 12/11/2024 in #questions
UploadThing: Image upload successful, but reaching neither onUploadError nor onUploadSuccess
    // Execute upload new images (if recipe is already available, otherwise procrastinate)
    useEffect(() => {
        if (!recipe) {
            return;
        }

        if (!images.filter((image) => image.status === RecipeImageStatus.VALIDATING).length) {
            return;
        }

        for (const image of images) {
            if (
                image.status === RecipeImageStatus.VALIDATING
                && image.file
            ) {
                const handleError = () => {
                    // This is onUploadError
                    notifications.show(t("Failed uploading image."), {
                        key: "failed-recipe-image-upload",
                        severity: "error",
                        // Can auto-close because image is visually marked as errored
                        autoHideDuration: 3000,
                    });

                    setImages((prevState) =>
                        prevState.map((prevImage) => ({
                            ...prevImage,
                            status: prevImage.id === image.id
                                ? RecipeImageStatus.FAILED
                                : image.status,
                        }))
                    );
                };
    // Execute upload new images (if recipe is already available, otherwise procrastinate)
    useEffect(() => {
        if (!recipe) {
            return;
        }

        if (!images.filter((image) => image.status === RecipeImageStatus.VALIDATING).length) {
            return;
        }

        for (const image of images) {
            if (
                image.status === RecipeImageStatus.VALIDATING
                && image.file
            ) {
                const handleError = () => {
                    // This is onUploadError
                    notifications.show(t("Failed uploading image."), {
                        key: "failed-recipe-image-upload",
                        severity: "error",
                        // Can auto-close because image is visually marked as errored
                        autoHideDuration: 3000,
                    });

                    setImages((prevState) =>
                        prevState.map((prevImage) => ({
                            ...prevImage,
                            status: prevImage.id === image.id
                                ? RecipeImageStatus.FAILED
                                : image.status,
                        }))
                    );
                };
5 replies
TTCTheo's Typesafe Cult
Created by Roland on 12/11/2024 in #questions
UploadThing: Image upload successful, but reaching neither onUploadError nor onUploadSuccess
Server-side onUploadError or onUploadSuccess is never reached, but onClientUploadComplete is, and serverData is undefined. 
    // uploadthing image upload
    const { startUpload } = useUploadThing("recipeImage", {
        onUploadBegin: () => setDirtyImageOrder(true),
        onUploadError: handleUploadError,
        onClientUploadComplete: (images) => {
            for (const image of images) {
                console.log(image.serverData);
                // serverData is undefined!!!
                imageUploadCompleted(
                    image.serverData.recipeImageId,
                    image.key,
                );

                router.prefetch(buildImageUrl(image.key));
            }
        },
    });
    // uploadthing image upload
    const { startUpload } = useUploadThing("recipeImage", {
        onUploadBegin: () => setDirtyImageOrder(true),
        onUploadError: handleUploadError,
        onClientUploadComplete: (images) => {
            for (const image of images) {
                console.log(image.serverData);
                // serverData is undefined!!!
                imageUploadCompleted(
                    image.serverData.recipeImageId,
                    image.key,
                );

                router.prefetch(buildImageUrl(image.key));
            }
        },
    });
5 replies