Avatar Uploader with Server Actions

"use client";
import { useTransition, useEffect, useState } from "react";
import {
  uploadImageToServer,
  logOutFromSupabase,
} from "@/actions/serverActions";
import { createClient } from "@/utils/supabase/client";
import Link from "next/link";
import Image from "next/image";

export default function AvatarUploader() {
  let [isPending, startTransition] = useTransition(); // React's concurrent mode API to manage transitions
  const [loggingOut, setLoggingOut] = useState(false); // State to handle logging out UI changes
  const [imageUrl, setImageUrl] = (useState < string) | (null > null); // State to store the URL of the uploaded image
  const [user, setUser] = useState < any > null; // State to store user information

  // useEffect to perform side effects only when isPending changes
  useEffect(() => {
    if (isPending) return; // Skip fetching if a transition is in progress

    const supabase = createClient(); // Initialize Supabase client

    // Function to fetch the avatar image from Supabase
    const getAvatarImageFromSupabase = async () => {
      const {
        data: { user },
      } = await supabase.auth.getUser(); // Get the currently authenticated user
      console.log("user", user?.id);
      setUser(user); // Set user data

      const { data: profile } = await supabase
        .from("profiles")
        .select()
        .eq("id", user?.id)
        .single(); // Query for the user profile

      setImageUrl(profile?.avatar_url); // Set image URL from user profile
    };

    getAvatarImageFromSupabase();
  }, [isPending]);

  // Handler for uploading images
  const uploadAction = async (formData: FormData) => {
    startTransition(() => {
      uploadImageToServer(formData);
    });
  };

  // Handler for logging out
  const logOutAction = async () => {
    await logOutFromSupabase();
  };

  // Render the component UI
  return (
    <main className="flex min-h-screen flex-col items-center justify-between py-12">
      <div className="z-10 max-w-xl w-full items-center justify-between flex flex-col gap-4 font-mono">
        <h1 className="text-4xl font-bold text-center">Image Uploader</h1>
        <p className="text-center">
          This is an uploader for images built with Next.js and Supabase.
        </p>

        {user ? (
          <div className="flex flex-col gap-2">
            <p className="font-bold">User: {user.email}</p>
            <form action={logOutAction} className="flex justify-center">
              <button
                className="border border-black rounded py-1 px-2 hover:bg-gray-300"
                type="submit"
                onClick={() => setLoggingOut(true)}
              >
                {loggingOut ? <p>Logging Out...</p> : <p>Log Out</p>}
              </button>
            </form>
          </div>
        ) : (
          <div>
            <p className="text-center">
              You must{" "}
              <Link className="underline font-bold" href="/login">
                log in
              </Link>{" "}
              to use this app.
            </p>
          </div>
        )}
        <form action={uploadAction} className="flex flex-col gap-4 pt-4">
          <input type="file" name="file" />
          <button
            type="submit"
            className="border border-black rounded py-1 px-2 hover:bg-gray-300"
            onClick={() => {
              setImageUrl(null);
            }}
          >
            {isPending ? "uploading..." : "upload"}{" "}
          </button>
        </form>
        <div className=" w-80 h-80 border border-black rounded relative">
          {imageUrl ? (
            <Image
              src={imageUrl}
              alt="avatar"
              fill={true}
              style={{ objectFit: "cover" }}
            />
          ) : (
            <div className="w-full h-full bg-gray-100 flex flex-col justify-center">
              <p className="text-center p-8 text-black">
                {user ? (
                  <span>Avatar Image</span>
                ) : (
                  <span>You need to be logged in to see your avatar</span>
                )}
              </p>
            </div>
          )}
        </div>
      </div>
    </main>
  );
}

"use server";
import { createClient } from "@/utils/supabase/server";
import { redirect } from "next/navigation";
import sharp from "sharp";

const IMAGE_SIZE = 600;  // Define the target size of the resized image
const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL;  // Supabase URL from environment variables

// Function to upload an image to Supabase storage
export const uploadImageToServer = async (formData: FormData) => {
  const supabase = createClient();  // Initialize the Supabase client

  try {
    // Get the current authenticated user
    const {
      data: { user },
    } = await supabase.auth.getUser();
    if (!user) throw new Error("Authentication failed");  // If no user, throw an error

    const file = formData.get("file") as File;  // Extract the file from the FormData
    const resizedImage = await resizeImage(file);  // Resize the image using the sharp library

    // Construct the file path where the image will be stored
    const fileName = file.name.split(".")[0];
    const timestamp = Math.floor(Date.now() / 1000);
    const filePath = `${user.id}/${timestamp}_${fileName}.jpg`;

    // Upload the resized image to Supabase storage
    const { data, error } = await supabase.storage
      .from("uploads")
      .upload(filePath, resizedImage);

    if (error) throw error;  // If there's an upload error, throw it

    // Construct the URL to access the uploaded image
    const avatarUrl = `${SUPABASE_URL}/storage/v1/object/public/uploads/${data.path}`;
    await updateUserProfile(user.id, avatarUrl, supabase);  // Update the user profile with the new avatar URL
  } catch (error) {
    console.error("Failed to upload image:", error);
  }
};

// Function to resize an image to a square format and convert it to JPEG
const resizeImage = async (file: File): Promise<Buffer> => {
  const buffer = await file.arrayBuffer(); // Convert file to array buffer
  return sharp(buffer)
    .resize(IMAGE_SIZE, IMAGE_SIZE) // Resize the image
    .toFormat("jpeg") // Convert the image to JPEG format
    .toBuffer(); // Return the modified image as a buffer
};

// Function to update the user profile with a new avatar URL
const updateUserProfile = async (
  userId: string,
  avatarUrl: string,
  supabase: any
) => {
  const { error } = await supabase
    .from("profiles")
    .update({ avatar_url: avatarUrl })
    .eq("id", userId); // Update the 'profiles' table where 'id' matches userId

  if (error) throw error; // If there's an update error, throw it
};

// Function to log out from Supabase
export const logOutFromSupabase = async () => {
  const supabase = createClient(); // Initialize the Supabase client

  try {
    const { error } = await supabase.auth.signOut(); // Attempt to sign out
    if (error) {
      throw new Error(`Logout failed: ${error.message}`); // If logout fails, throw an error
    }
  } catch (error) {
    console.error("Logout error:", error);
  } finally {
    redirect("/login"); // Redirect to login page after logout
  }
};