Merge pull request #6 from VaquitApp/add-groups

Add groups
VaquitApp · May 15, 2024 · a66cfc0 · a66cfc0
2 parents c7ed018 + b1f9d5b
commit a66cfc0
Show file tree

Hide file tree

Showing 16 changed files with 181 additions and 32 deletions.
diff --git a/Makefile b/Makefile
@@ -5,6 +5,9 @@ NPM := cd $(DIR) && npm
 install:
 	$(NPM) install
 
+env:
+	cp $(DIR)/.env.example $(DIR)/.env
+
 dev: install
 	$(NPM) run dev -- --open
 

diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@
 Open `Makefile` to see useful commands.
 
 - `make install`: install dependencies
+- `make env`: create .env file with env vars
 - `make dev`: start development server
 - `make test`: run tests
 - `make format`: format files

diff --git a/my-app/.env.example b/my-app/.env.example
@@ -1 +1,2 @@
-VITE_API_URL="http://localhost:8000"
+# VITE_API_URL="http://127.0.0.1:8000"
+VITE_API_URL="http://localhost:8000"
diff --git a/my-app/src/app.html b/my-app/src/app.html
@@ -2,7 +2,10 @@
 <html lang="en" data-theme="light">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐮</text></svg>">
+		<link
+			rel="icon"
+			href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐮</text></svg>"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/my-app/src/lib/api.ts b/my-app/src/lib/api.ts
@@ -1,26 +1,28 @@
 import { error } from '@sveltejs/kit';
 
+type Method = 'GET' | 'POST' | 'DELETE' | 'PUT';
+type Headers = { [key: string]: string };
 type Request = {
-	method: 'GET' | 'POST' | 'DELETE' | 'PUT';
 	path: string;
 	data?: object;
-	token?: string;
+	headers?: Headers;
+};
+type Opts = {
+	method: Method;
+	headers: Headers;
+	body?: string;
 };
 
 const base = import.meta.env.VITE_API_URL;
 
-async function send({ method, path, data, token }: Request) {
-	const opts = { method, headers: {} };
+async function send(method: Method, { path, data, headers = {} }: Request) {
+	const opts: Opts = { method, headers };
 
 	if (data) {
 		opts.headers['Content-Type'] = 'application/json';
 		opts.body = JSON.stringify(data);
 	}
 
-	if (token) {
-		opts.headers['Authorization'] = `Token ${token}`;
-	}
-
 	const res = await fetch(`${base}/${path}`, opts);
 	if (res.ok) {
 		const text = await res.text();
@@ -30,18 +32,18 @@ async function send({ method, path, data, token }: Request) {
 	throw error(res.status);
 }
 
-export function get(path: string, token?: string) {
-	return send({ method: 'GET', path, token });
+export function get(path: string, headers?: Headers) {
+	return send('GET', { path, headers });
 }
 
-export function del(path: string, token?: string) {
-	return send({ method: 'DELETE', path, token });
+export function del(path: string, headers?: Headers) {
+	return send('DELETE', { path, headers });
 }
 
-export function post(path: string, data: object, token?: string) {
-	return send({ method: 'POST', path, data, token });
+export function post(path: string, data: object, headers?: Headers) {
+	return send('POST', { path, data, headers });
 }
 
-export function put(path: string, data: object, token?: string) {
-	return send({ method: 'PUT', path, data, token });
+export function put(path: string, data: object, headers?: Headers) {
+	return send('PUT', { path, data, headers });
 }
diff --git a/my-app/src/params/integer.ts b/my-app/src/params/integer.ts
@@ -0,0 +1,5 @@
+import type { ParamMatcher } from '@sveltejs/kit';
+
+export const match: ParamMatcher = (param) => {
+	return /^\d+$/.test(param);
+};
diff --git a/my-app/src/routes/groups/+page.server.ts b/my-app/src/routes/groups/+page.server.ts
@@ -0,0 +1,11 @@
+import { get } from '$lib/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ cookies }) => {
+	const token = cookies.get('jwt')!;
+	const headers = {
+		'x-user': token
+	};
+	const groups: Group[] = await get('group', headers);
+	return { groups };
+};
diff --git a/my-app/src/routes/groups/+page.svelte b/my-app/src/routes/groups/+page.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { title } from '$lib';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	<title>{title} - Grupos</title>
+</svelte:head>
+
+<header class="row">
+	<h2>Grupos</h2>
+	<a href="/groups/details" role="button">Nuevo grupo</a>
+</header>
+<main>
+	{#if !data.groups.length}
+		<article class="centered">
+			<p>Todavía no pertenece a ningún grupo. ¿Por qué no crea uno?</p>
+			<a href="/groups/details">Crear un nuevo grupo</a>
+		</article>
+	{/if}
+	{#each data.groups as group}
+		<article>
+			<header>{group.name}</header>
+			<p>{group.description}</p>
+			<a href="/groups/details/{group.id}">Ver en detalle</a>
+		</article>
+	{/each}
+</main>
+
+<style>
+	.row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+
+	.centered {
+		text-align: center;
+	}
+</style>
diff --git a/my-app/src/routes/groups/details/[[id=integer]]/+page.server.ts b/my-app/src/routes/groups/details/[[id=integer]]/+page.server.ts
@@ -0,0 +1,39 @@
+import { error, fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { post } from '$lib/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	let group: Group = { name: '', description: '', id: 0, owner_id: 0 };
+	const id = params.id;
+	if (id) {
+		// TODO: load real group
+	}
+	return { group };
+};
+
+export const actions: Actions = {
+	default: async ({ cookies, request, params }) => {
+		const data = await request.formData();
+		const name = data.get('name');
+		const description = data.get('description');
+
+		if (!name) {
+			throw error(400, 'Name is required');
+		}
+		if (!description) {
+			throw error(400, 'Description is required');
+		}
+
+		const token = cookies.get('jwt')!;
+		const body = await post('group', { name, description }, { 'x-user': token });
+
+		if (body.errors) {
+			throw fail(400, body);
+		}
+
+		const value = body.id;
+
+		return { success: true };
+	}
+};
diff --git a/my-app/src/routes/groups/details/[[id=integer]]/+page.svelte b/my-app/src/routes/groups/details/[[id=integer]]/+page.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { title } from '$lib';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	<title>{title} - Nuevo Grupo</title>
+</svelte:head>
+
+<h2>Nuevo Grupo</h2>
+<form method="POST">
+	<fieldset>
+		<label>
+			Ingrese un nombre para el grupo
+			<input type="text" name="name" value={data.group.name} placeholder="Nombre" required />
+		</label>
+		<label>
+			Ingrese una descripción para el grupo
+			<input
+				type="text"
+				name="description"
+				value={data.group.description}
+				placeholder="Descripcion"
+				required
+			/>
+		</label>
+		<button>Crear</button>
+		<button type="button" class="outline" on:click={() => history.back()}>Cancelar</button>
+	</fieldset>
+</form>
diff --git a/my-app/src/routes/login/+page.server.ts b/my-app/src/routes/login/+page.server.ts
@@ -1,4 +1,4 @@
-import { error, fail } from '@sveltejs/kit';
+import { error, fail, redirect } from '@sveltejs/kit';
 import type { Actions } from './$types';
 import { post } from '$lib/api';
 
@@ -23,9 +23,9 @@ export const actions: Actions = {
 		}
 
 		// save JWT in cookie
-		const value = body.id;
+		const value = body.token;
 		cookies.set('jwt', value, { path: '/' });
 
-		return { success: true };
+		return redirect(302, '/groups');
 	}
 };
diff --git a/my-app/src/routes/login/+page.svelte b/my-app/src/routes/login/+page.svelte
@@ -18,11 +18,11 @@
 		<fieldset>
 			<label>
 				Ingrese su email
-				<input type="email" name="email" placeholder="Email" />
+				<input type="email" name="email" placeholder="Email" required />
 			</label>
 			<label>
 				Ingrese su contraseña
-				<input type="password" name="password" placeholder="Contaseña" />
+				<input type="password" name="password" placeholder="Contaseña" required />
 				<a href="/recover">Olvidé mi contraseña</a>
 			</label>
 		</fieldset>

diff --git a/my-app/src/routes/recover/+page.svelte b/my-app/src/routes/recover/+page.svelte
@@ -2,7 +2,7 @@
 	<fieldset>
 		<label>
 			Ingrese su email
-			<input type="text" name="email" placeholder="Email" />
+			<input type="text" name="email" placeholder="Email" required />
 		</label>
 	</fieldset>
 	<button type="submit"> Enviar </button>

diff --git a/my-app/src/routes/register/+page.svelte b/my-app/src/routes/register/+page.svelte
@@ -18,15 +18,15 @@
 		<fieldset>
 			<label>
 				Ingrese su email
-				<input type="email" name="email" placeholder="Email" />
+				<input type="email" name="email" placeholder="Email" required />
 			</label>
 			<label>
 				Ingrese una contraseña
-				<input type="password" name="password1" placeholder="Contraseña" />
+				<input type="password" name="password1" placeholder="Contraseña" required />
 			</label>
 			<label>
 				Vuelva a repetir su contraseña
-				<input type="password" name="password2" placeholder="Contraseña" />
+				<input type="password" name="password2" placeholder="Contraseña" required />
 			</label>
 		</fieldset>
 		<button type="submit"> Registrarse </button>

diff --git a/my-app/src/types.d.ts b/my-app/src/types.d.ts
@@ -0,0 +1,10 @@
+declare global {
+	type Group = {
+		id: number;
+		owner_id: number;
+		name: String;
+		description: String;
+	};
+}
+
+export {};
diff --git a/roadmap b/roadmap
@@ -1,13 +1,13 @@
 [x] setup
 account:
-[ ] register
-[ ] login
+[x] register
+[x] login
 [ ] recover
 groups:
-[ ] list
-[ ] create
+[x] list
+[x] create
 [ ] details
-expenses:
+spendings:
 [ ] list
 [ ] details
 budget: