ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 18:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

simple auth setup

Browse Source
This commit is contained in:
Oliver Bryan
2025-12-22 06:34:37 +00:00
parent 66b4868c6f
commit e550b936e0
3 changed files with 116 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
packages/frontend/src/Index.tsx
View File

@@ -1,11 +1,17 @@
import type { IssueResponse, ProjectResponse } from "@issue/shared";
import type { IssueResponse, ProjectResponse, UserRecord } from "@issue/shared";
import { useEffect, useRef, useState } from "react";
import { IssueDetailPane } from "@/components/issue-detail-pane";
import { IssuesTable } from "@/components/issues-table";
import SmallUserDisplay from "@/components/small-user-display";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import SmallUserDisplay from "./components/small-user-display";
import LogOutButton from "./components/log-out-button";
import { getAuthHeaders } from "./lib/utils";
function Index() {
const serverURL = import.meta.env.SERVER_URL?.trim() || "http://localhost:3000";
const user = JSON.parse(localStorage.getItem("user") || "{}") as UserRecord;
const [selectedProject, setSelectedProject] = useState<ProjectResponse | null>(null);
const [projects, setProjects] = useState<ProjectResponse[]>([]);
const projectsRef = useRef(false);
@@ -14,7 +20,7 @@ function Index() {
if (projectsRef.current) return;
projectsRef.current = true;
fetch("http://localhost:3000/projects/all")
fetch(`${serverURL}/projects/all`, { headers: getAuthHeaders() })
.then((res) => res.json())
.then((data: ProjectResponse[]) => {
setProjects(data);
@@ -27,12 +33,10 @@ function Index() {
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}`)
fetch(`${serverURL}/issues/${selectedProject.Project.blob}`, { headers: getAuthHeaders() })
.then((res) => res.json())
.then((data: IssueResponse[]) => {
setIssues(data);
@@ -45,42 +49,51 @@ function Index() {
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"
<div className="flex gap-4 items-center justify-between">
<div className="flex gap-4 items-center">
<Select
onValueChange={(value) => {
if (value === "NONE") {
setSelectedProject(null);
setSelectedIssue(null);
setIssues([]);
}
/>
</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 && (
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>
{user && (
<div className="flex items-center gap-2">
Owner: <SmallUserDisplay user={selectedProject?.User} />
You:
<SmallUserDisplay user={user} />
</div>
)}
</div>
@@ -109,6 +122,8 @@ function Index() {
</>
)}
</div>
<LogOutButton />
</main>
);
}