pikram/tasker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started implementation of basic frontend for ToDoList App

Browse Source
This commit is contained in:
Marcin-Ramotowski 2025-04-12 19:49:47 +02:00
parent 7062e14396
commit 1ed7f308a3
17 changed files with 4075 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
frontend/README.md Normal file
View File

@ -0,0 +1,54 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default tseslint.config({
extends: [
// Remove ...tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
})
```

28
frontend/eslint.config.js Normal file
View File

@ -0,0 +1,28 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)

13
frontend/index.html Normal file
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<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>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

3581
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

33
frontend/package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"axios": "^1.8.3",
"js-cookie": "^3.0.5",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-router-dom": "^7.3.0"
},
"devDependencies": {
"@eslint/js": "^9.21.0",
"@types/js-cookie": "^3.0.6",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.21.0",
"eslint-plugin-react-hooks": "^5.1.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^15.15.0",
"typescript": "~5.7.2",
"typescript-eslint": "^8.24.1",
"vite": "^6.2.0"
}
}

16
frontend/src/App.tsx Normal file
View File

@ -0,0 +1,16 @@
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./pages/Login";
import Tasks from "./pages/Tasks";
const App = () => {
return (
<Router>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/tasks" element={<Tasks />} />
</Routes>
</Router>
);
};
export default App;

44
frontend/src/api/api.ts Normal file
View File

@ -0,0 +1,44 @@
import axios from "axios";
import Cookies from "js-cookie";
const API_URL = "http://localhost:5000";
const api = axios.create({
baseURL: API_URL,
headers: {
"Content-Type": "application/json",
Accept: "application/json",
},
withCredentials: true,
});
// User login
export const login = async (username: string, password: string) => {
try {
const response = await api.post("/login", { username, password });
const userId = response.data.user_id;
Cookies.set("user_id", String(userId), { secure: true, sameSite: "Strict" });
return { userId };
} catch (error) {
throw new Error("Incorrect username or password.");
}
};
// Get user tasks
export const getTasks = async () => {
const userId = Cookies.get("user_id");
if (!userId) throw new Error("No user_id in cookies.");
const response = await api.get(`/tasks/user/${userId}`);
return response.data;
};
// Logout
export const logout = async () => {
await api.get("/logout"); // API usunie JWT
Cookies.remove("access_token_cookie");
Cookies.remove("user_id");
};

22
frontend/src/api/auth.ts Normal file
View File

@ -0,0 +1,22 @@
import axios from "axios";
import Cookies from "js-cookie";
const API_URL = "http://localhost:5000";
export const logout = async () => {
try {
await axios.get(`${API_URL}/logout`, { withCredentials: true });
} catch (error) {
console.error("Error during logout:", error);
}
// Remove JWT token from cookies
document.cookie = "access_token_cookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
localStorage.removeItem("user_id");
};
export const getCsrfToken = () => {
const value = Cookies.get("csrf_access_token");
const header = {"X-CSRF-TOKEN": value}
return header;
};

26
frontend/src/api/tasks.ts Normal file
View File

@ -0,0 +1,26 @@
import axios from "axios";
import { getCsrfToken } from "./auth";
const API_URL = "http://localhost:5000";
// Get user tasks
export const getUserTasks = async (userId: number) => {
const response = await axios.get(`${API_URL}/tasks/user/${userId}`, {withCredentials: true, headers: getCsrfToken()});
return response.data;
};
// Create new task
export const createTask = async (taskData: {
title: string;
description: string;
due_date: string;
done: boolean;
}) => {
const response = await axios.post(`${API_URL}/tasks`, taskData, {withCredentials: true, headers: getCsrfToken()});
return response.data;
};
// Delete task
export const deleteTask = async (taskId: number) => {
await axios.delete(`${API_URL}/tasks/${taskId}`, {withCredentials: true, headers: getCsrfToken()});
};

9
frontend/src/main.tsx Normal file
View File

@ -0,0 +1,9 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

57
frontend/src/pages/Login.tsx Normal file
View File

@ -0,0 +1,57 @@
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { login } from "../api/api";
const Login = () => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const navigate = useNavigate();
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
try {
const { userId } = await login(username, password);
console.log("User logged in successfully! user_id:", userId);
navigate("/tasks");
} catch (err) {
console.error(err);
setError("Incorrect login data");
}
};
return (
<div className="flex justify-center items-center h-screen bg-gray-100">
<div className="bg-white p-8 rounded-lg shadow-md w-96">
<h2 className="text-2xl font-bold mb-4 text-center">Logowanie</h2>
{error && <p className="text-red-500 text-center">{error}</p>}
<form onSubmit={handleLogin} className="flex flex-col gap-4">
<input
type="text"
placeholder="Nazwa użytkownika"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="border p-2 rounded"
required
/>
<input
type="password"
placeholder="Hasło"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="border p-2 rounded"
required
/>
<button type="submit" className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600">
Zaloguj się
</button>
</form>
</div>
</div>
);
};
export default Login;

127
frontend/src/pages/Tasks.tsx Normal file
View File

@ -0,0 +1,127 @@
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { getUserTasks, createTask, deleteTask } from "../api/tasks";
import { logout } from "../api/auth";
import Cookies from "js-cookie";
// Define Task type
interface Task {
id: number;
title: string;
description: string;
due_date: string;
done: boolean;
}
const Tasks = () => {
const [tasks, setTasks] = useState<Task[]>([]);
const [newTask, setNewTask] = useState({ title: "", description: "", due_date: "", done: false });
const navigate = useNavigate();
const userId = Number(Cookies.get("user_id"))
useEffect(() => {
if (!userId) {
navigate("/login");
return;
}
const fetchTasks = async () => {
try {
const tasksData = await getUserTasks(userId);
setTasks(tasksData);
} catch (error) {
console.error("Błąd pobierania zadań:", error);
}
};
fetchTasks();
}, [userId]);
const handleLogout = async () => {
await logout();
navigate("/login");
};
const handleCreateTask = async () => {
try {
const task = await createTask(newTask);
setTasks([...tasks, task]); // List update
setNewTask({ title: "", description: "", due_date: "", done: false }); // Form reset
} catch (error) {
console.error("Błąd tworzenia zadania:", error);
}
};
const handleDeleteTask = async (taskId: number) => {
try {
await deleteTask(taskId);
setTasks(tasks.filter((task) => task.id !== taskId));
} catch (error) {
console.error("Błąd usuwania zadania:", error);
}
};
return (
<div className="p-6">
<h1 className="text-2xl font-bold mb-4">Twoje zadania</h1>
<button
onClick={handleLogout}
className="bg-red-500 text-white p-2 rounded hover:bg-red-600 mb-4"
>
Wyloguj
</button>
{/* Form to add a task */}
<div className="mb-6">
<input
type="text" placeholder="Tytuł" value={newTask.title}
onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
className="border p-2 mr-2"
/>
<input
type="text" placeholder="Opis" value={newTask.description}
onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
className="border p-2 mr-2"
/>
<input
type="text" placeholder="Termin (DD-MM-YYYY HH:MM)" value={newTask.due_date}
onChange={(e) => setNewTask({ ...newTask, due_date: e.target.value })}
className="border p-2 mr-2"
/>
<button
onClick={handleCreateTask}
className="bg-blue-500 text-white p-2 rounded hover:bg-blue-600"
>
Dodaj zadanie
</button>
</div>
{/* 🔹 Task list */}
{tasks.length === 0 ? (
<p>Brak zadań.</p>
) : (
<ul>
{tasks.map((task) => (
<li key={task.id} className="border p-2 rounded mb-2 flex justify-between items-center">
<div>
<h2 className="font-semibold">{task.title}</h2>
<p>{task.description}</p>
<p><strong>Termin:</strong> {task.due_date}</p>
<p><strong>Status:</strong> {task.done ? "✅ Zrobione" : "⏳ Do zrobienia"}</p>
</div>
<button
onClick={() => handleDeleteTask(task.id)}
className="bg-red-500 text-white p-2 rounded hover:bg-red-600"
>
❌ Usuń
</button>
</li>
))}
</ul>
)}
</div>
);
};
export default Tasks;

1
frontend/src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

26
frontend/tsconfig.app.json Normal file
View File

@ -0,0 +1,26 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

7
frontend/tsconfig.json Normal file
View File

@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

24
frontend/tsconfig.node.json Normal file
View File

@ -0,0 +1,24 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"isolatedModules": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

7
frontend/vite.config.ts Normal file
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})