sprint/packages/frontend/src/Index.tsx

import type { IssueResponse, ProjectResponse } from "@issue/shared";
import { useEffect, useRef, useState } from "react";
import { IssueDetailPane } from "@/components/issue-detail-pane";
import { IssuesTable } from "@/components/issues-table";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import SmallUserDisplay from "./components/small-user-display";

function Index() {
    const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
    const [projects, setProjects] = useState<ProjectResponse[]>([]);
    const projectsRef = useRef(false);

    useEffect(() => {
        if (projectsRef.current) return;
        projectsRef.current = true;

        fetch("http://localhost:3000/projects/all")
            .then((res) => res.json())
            .then((data: ProjectResponse[]) => {
                setProjects(data);
            })
            .catch((err) => {
                console.error("error fetching projects:", err);
            });
    }, []);

    const [selectedIssue, setSelectedIssue] = useState<IssueResponse | null>(null);
    const [issuesData, setIssues] = useState<IssueResponse[]>([]);

    const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";

    useEffect(() => {
        if (!selectedProject) return;

        fetch(`${serverURL}/issues/${selectedProject.Project.blob}`)
            .then((res) => res.json())
            .then((data: IssueResponse[]) => {
                setIssues(data);
            })
            .catch((err) => {
                console.error("error fetching issues:", err);
            });
    }, [selectedProject]);

    return (
        <main className="w-full h-full p-1">
            {/* header area */}
            <div className="flex gap-4 items-center">
                <Select
                    onValueChange={(value) => {
                        if (value === "NONE") {
                            setSelectedProject(null);
                            setSelectedIssue(null);
                            setIssues([]);
                        }
                        const project = projects.find((p) => p.Project.id === Number(value));
                        if (!project) {
                            // TODO: toast here
                            console.error(`NO PROJECT FOUND FOR ID: ${value}`);
                            return;
                        }
                        setSelectedProject(project);
                        setSelectedIssue(null);
                    }}
                >
                    <SelectTrigger className="h-8 lg:flex">
                        <SelectValue
                            placeholder={
                                selectedProject ? `P: ${selectedProject.Project.name}` : "Select Project"
                            }
                        />
                    </SelectTrigger>
                    <SelectContent side="bottom" position="popper">
                        {projects.map((project) => (
                            <SelectItem key={project.Project.id} value={`${project.Project.id}`}>
                                {project.Project.name}
                            </SelectItem>
                        ))}
                    </SelectContent>
                </Select>
                {selectedProject && (
                    <div className="flex items-center gap-2">
                        Owner: <SmallUserDisplay user={selectedProject?.User} />
                    </div>
                )}
            </div>
            {/* main body */}
            <div className="w-full h-full flex items-start justify-between pt-1 gap-2">
                {selectedProject && issuesData.length > 0 && (
                    <>
                        {/* issues list (table) */}
                        <IssuesTable
                            project={selectedProject}
                            issuesData={issuesData}
                            columns={{ description: false }}
                            issueSelectAction={setSelectedIssue}
                            className="border w-full flex-shrink"
                        />
                        {/* issue detail pane */}
                        {selectedIssue && (
                            <div className="border w-2xl">
                                <IssueDetailPane
                                    project={selectedProject}
                                    issueData={selectedIssue}
                                    close={() => setSelectedIssue(null)}
                                />
                            </div>
                        )}
                    </>
                )}
            </div>
        </main>
    );
}

export default Index;