kjannette/kongruity
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

huge push of backend and frontend to dos to finish wiring up and UI display

Browse Source
This commit is contained in:
KS Jannette
2026-02-11 14:40:45 -05:00
parent fcc8dbe9f7
commit b60faa42d4
11 changed files with 163 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>my-react-app</title>
<title>Resias</title>
</head>
<body>
<div id="root"></div>

5
frontend/src/App.css
View File

@@ -4,8 +4,3 @@
padding: 2rem;
text-align: center;
}
.card {
padding: 2em;
}

24
frontend/src/api/api.tsx
View File

@@ -1,17 +1,35 @@
import { useQuery } from '@tanstack/react-query';
import type { Sticky } from '../types/types';
import { useQuery, useMutation } from '@tanstack/react-query';
import type { Sticky, Cluster } from '../types/types';
const API_BASE = 'http://localhost:3001/v1/notes';
const fetchStickies = async (): Promise<Sticky[]> => {
const response = await fetch('http://localhost:3001/v1/notes');
const response = await fetch(API_BASE);
if (!response.ok) {
throw new Error('Failed to fetch stickies');
}
return response.json();
};
const fetchClusters = async (): Promise<Cluster[]> => {
const response = await fetch(`${API_BASE}/cluster`, {
method: 'POST',
});
if (!response.ok) {
throw new Error('Failed to cluster stickies');
}
return response.json();
};
export const useGetStickies = () => {
return useQuery<Sticky[]>({
queryKey: ['stickies'],
queryFn: fetchStickies,
});
};
export const useClusterStickies = () => {
return useMutation<Cluster[]>({
mutationFn: fetchClusters,
});
};

21
frontend/src/components/button.tsx
View File

@@ -1,11 +1,14 @@
import { useState } from 'react';
const Button = () => {
return (
<button>
Click me
</button>
);
type ClusterButtonProps = {
onClick: () => void;
isLoading: boolean;
};
export default Button;
const ClusterButton = ({ onClick, isLoading }: ClusterButtonProps) => {
return (
<button onClick={onClick} disabled={isLoading}>
{isLoading ? 'Clustering...' : 'Run Clustering'}
</button>
);
};
export default ClusterButton;

19
frontend/src/components/stickies.css
View File

@@ -5,3 +5,22 @@
justify-content: center;
padding: 24px;
}
.clusters-container {
display: flex;
flex-direction: column;
gap: 32px;
padding: 24px 0;
}
.cluster-group {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 16px;
}
.cluster-label {
margin: 0 0 16px 0;
font-size: 1.2em;
font-weight: 600;
}

51
frontend/src/components/stickies.tsx
View File

@@ -1,18 +1,57 @@
import { useGetStickies } from '../api/api';
import { useGetStickies, useClusterStickies } from '../api/api';
import type { Sticky as StickyType } from '../types/types';
import Sticky from './sticky';
import ClusterButton from './button';
import './stickies.css';
const Stickies = () => {
const { data, isLoading, error } = useGetStickies();
const { data: stickies, isLoading, error } = useGetStickies();
const { mutate: cluster, data: clusters, isPending } = useClusterStickies();
if (isLoading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
const handleCluster = () => {
cluster();
};
const buildStickyMap = (): Map<string, StickyType> => {
const map = new Map<string, StickyType>();
stickies?.forEach((s) => map.set(s.id, s));
return map;
};
if (clusters) {
const stickyMap = buildStickyMap();
return (
<div>
<ClusterButton onClick={handleCluster} isLoading={isPending} />
<div className="clusters-container">
{clusters.map((group) => (
<div key={group.label} className="cluster-group">
<h3 className="cluster-label">{group.label}</h3>
<div className="stickies-grid">
{group.noteIds.map((id) => {
const sticky = stickyMap.get(id);
return sticky ? <Sticky key={sticky.id} sticky={sticky} /> : null;
})}
</div>
</div>
))}
</div>
</div>
);
}
return (
<div className="stickies-grid">
{data?.map((sticky) => (
<Sticky key={sticky.id} sticky={sticky} />
))}
<div>
<ClusterButton onClick={handleCluster} isLoading={isPending} />
<div className="stickies-grid">
{stickies?.map((sticky) => (
<Sticky key={sticky.id} sticky={sticky} />
))}
</div>
</div>
);
};

23
frontend/src/index.css
View File

@@ -2,30 +2,17 @@
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
@@ -46,22 +33,26 @@ button {
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}

5
frontend/src/types/types.tsx
View File

@@ -6,3 +6,8 @@ export type Sticky = {
author: string;
color: string;
};
export type Cluster = {
label: string;
noteIds: string[];
};