api work

.gitignore

@@ -21,4 +21,4 @@ lerna-debug.log*
 *.sln
 *.sw?
 
-backend/.secrets
+backend/.secrets.js

backend/app.js

@@ -7,6 +7,6 @@ const app = express();
 app.use(cors());
 app.use(express.json());
 
-app.use('/api/notes', notesRoutes);
+app.use('/v1/notes', notesRoutes);
 
 export default app;

frontend/resias/src/api/api.tsx

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

frontend/resias/src/components/stickies.css

@@ -0,0 +1,7 @@
+.stickies-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: center;
+  padding: 24px;
+}

frontend/resias/src/components/stickies.tsx

@@ -1,14 +1,20 @@
-import { useState} from "react";  
+import { useGetStickies } from '../api/api';
+import Sticky from './sticky';
+import './stickies.css';
 
-  const Stickies = () => {
-    const isLoading =  useState(false);
-    const error = useState(false);
-    let data: any = [];
+const Stickies = () => {
+  const { data, isLoading, error } = useGetStickies();
 
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;
 
-    return <div>{data?.map((sticky) => <div key={sticky.id}>{sticky.text}</div>)}</div>;
-  };
+  return (
+    <div className="stickies-grid">
+      {data?.map((sticky) => (
+        <Sticky key={sticky.id} sticky={sticky} />
+      ))}
+    </div>
+  );
+};
 
-  export default Stickies;
+export default Stickies;

frontend/resias/src/components/sticky.tsx

@@ -0,0 +1,43 @@
+import type { Sticky as StickyType } from '../types/types';
+
+const COLOR_MAP: Record<string, string> = {
+  yellow: '#fdfd96',
+  blue: '#a2d2ff',
+  green: '#b5ead7',
+  pink: '#ffb7ce',
+  purple: '#cdb4db',
+  orange: '#ffc09f',
+};
+
+type StickyProps = {
+  sticky: StickyType;
+};
+
+const Sticky = ({ sticky }: StickyProps) => {
+  const backgroundColor = COLOR_MAP[sticky.color] || '#fdfd96';
+
+  return (
+    <div
+      style={{
+        backgroundColor,
+        width: '180px',
+        minHeight: '180px',
+        padding: '16px',
+        borderRadius: '2px',
+        boxShadow: '2px 4px 8px rgba(0, 0, 0, 0.15)',
+        fontFamily: "'Patrick Hand', cursive, system-ui",
+        fontSize: '14px',
+        lineHeight: '1.4',
+        color: '#333',
+        display: 'flex',
+        alignItems: 'flex-start',
+        wordBreak: 'break-word',
+        transform: `rotate(${Math.random() * 4 - 2}deg)`,
+      }}
+    >
+      {sticky.text}
+    </div>
+  );
+};
+
+export default Sticky;