From 9f7c52cd7d81e170368bb5242f12798b8f805328 Mon Sep 17 00:00:00 2001 From: tglide <26071571+TGlide@users.noreply.github.com> Date: Thu, 26 Oct 2023 18:53:03 +0100 Subject: [PATCH 1/2] rewrite svelte tutorial --- .../tutorials/sveltekit/step-3/+page.markdoc | 1 - .../tutorials/sveltekit/step-4/+page.markdoc | 170 ++++++++++-------- .../tutorials/sveltekit/step-5/+page.markdoc | 56 +++--- .../tutorials/sveltekit/step-6/+page.markdoc | 82 ++++----- .../tutorials/sveltekit/step-7/+page.markdoc | 158 ++++++++++------ .../tutorials/sveltekit/step-8/+page.markdoc | 9 - 6 files changed, 253 insertions(+), 223 deletions(-) delete mode 100644 src/routes/docs/tutorials/sveltekit/step-8/+page.markdoc diff --git a/src/routes/docs/tutorials/sveltekit/step-3/+page.markdoc b/src/routes/docs/tutorials/sveltekit/step-3/+page.markdoc index 51a7938cd4..f0756a7ada 100644 --- a/src/routes/docs/tutorials/sveltekit/step-3/+page.markdoc +++ b/src/routes/docs/tutorials/sveltekit/step-3/+page.markdoc @@ -44,7 +44,6 @@ Only one instance of the `Client()` class should be created per app. Add the following code to it, replacing `` with your project ID. ```js - import { Client, Databases, Account } from "appwrite"; const client = new Client(); diff --git a/src/routes/docs/tutorials/sveltekit/step-4/+page.markdoc b/src/routes/docs/tutorials/sveltekit/step-4/+page.markdoc index 0b1b1cbe20..d7b9686e08 100644 --- a/src/routes/docs/tutorials/sveltekit/step-4/+page.markdoc +++ b/src/routes/docs/tutorials/sveltekit/step-4/+page.markdoc @@ -7,51 +7,63 @@ step: 4 # Using stores {% #using-stores %} -In Svelte, [stores](https://svelte.dev/docs/svelte-store) are a way to manage state throughout your application. +Svelte [stores](https://svelte.dev/docs/svelte-store) provide an easy way to manage state throughout your application. We'll use a store to keep track of our user's data. -Create a new file `src/lib/stores/user.js` and add the following code to it. +Create a new file `src/lib/user.js` and add the following code to it. ```js -import { writable } from "svelte/store"; -import { ID } from "appwrite"; -import { goto } from "$app/navigation"; -import { account } from "$lib/appwrite"; - -const store = writable(null); - -async function init() { - try { - store.set(await account.get()); - } catch (e) { - store.set(null); - } -} - -async function register(email, password, name) { - await account.create(ID.unique(), email, password, name); - await login(email, password); -} - -async function login(email, password) { - await account.createEmailSession(email, password); - await init(); - goto("/"); // Redirect to home page after login -} - -async function logout() { - await account.deleteSession("current"); - store.set(null); -} - -// Expose the store's value with $user -export const user = { - subscribe: store.subscribe, - register, - login, - logout, - init, +import { writable } from 'svelte/store'; +import { ID } from 'appwrite'; +import { goto } from '$app/navigation'; +import { account } from '$lib/appwrite'; + +// Avoid auth calls in server-side, so that a user is not shared between requests +const isBrowser = typeof window !== 'undefined'; + +const createUser = () => { + const store = writable(null); + + async function init() { + if (!isBrowser) return; + try { + store.set(await account.get()); + } catch (e) { + store.set(null); + } + } + + init(); + + async function register(email, password, name) { + if (!isBrowser) return; + await account.create(ID.unique(), email, password, name); + await login(email, password); + } + + async function login(email, password) { + if (!isBrowser) return; + await account.createEmailSession(email, password); + await init(); + goto('/'); // Redirect to home page after login + } + + async function logout() { + await account.deleteSession('current'); + store.set(null); + } + + return { + // Exposes the store's value with $user + subscribe: store.subscribe, + register, + login, + logout, + init + }; }; + +export const user = createUser(); ``` # Login page {% #login-page %} @@ -62,51 +74,59 @@ Create a new file `src/routes/login/+page.svelte` and add the following code to ```html

Login or register

- - - + + +
-
- - - - + + + +
``` \ No newline at end of file diff --git a/src/routes/docs/tutorials/sveltekit/step-5/+page.markdoc b/src/routes/docs/tutorials/sveltekit/step-5/+page.markdoc index d0ed993fad..61b5dc1eb6 100644 --- a/src/routes/docs/tutorials/sveltekit/step-5/+page.markdoc +++ b/src/routes/docs/tutorials/sveltekit/step-5/+page.markdoc @@ -8,49 +8,41 @@ step: 5 We'll create a layout component, that's used by all pages, to display a navbar. The navbar will show a login button if the user is not logged in, and a logout button if the user is logged in. -In this component, we can call our `user.init()` function to check if the user is logged in when the page loads. - Create a new file `src/routes/+layout.svelte` and add the following code to it. ```html ``` \ No newline at end of file diff --git a/src/routes/docs/tutorials/sveltekit/step-6/+page.markdoc b/src/routes/docs/tutorials/sveltekit/step-6/+page.markdoc index a734306545..d13bbfb0ba 100644 --- a/src/routes/docs/tutorials/sveltekit/step-6/+page.markdoc +++ b/src/routes/docs/tutorials/sveltekit/step-6/+page.markdoc @@ -5,7 +5,8 @@ description: Add databases and queries to store user data in you SvelteKit proje step: 6 --- # Create collection {% #create-collection %} -In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas. +In Appwrite, data is stored as a collection of documents. +Create a collection inside a database in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas. {% only_dark %} ![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png) @@ -14,64 +15,51 @@ In Appwrite, data is stored as a collection of documents. Create a collection in ![Create project screen](/images/docs/tutorials/idea-tracker-collection.png) {% /only_light %} -Create a new collection with the following attributes: -| Field | Type | Required | -|-------------|--------|----------| -| userId | String | Yes | -| title | String | Yes | -| description | String | No | +Create the following attributes within the collection: +| Field | Type | Size | Required | +| ----------- | ------ | ---- | -------- | +| userId | String | 36 | Yes | +| title | String | 128 | Yes | +| description | String | 1024 | No | + +For this tutorial, we'll also set the permissions to allow any users to read and write to the collection. +In a real-world scenario, you would probably want to restrict access to a certain group of users. + +# Managing ideas {% #getting-ideas %} -# Add and remove methods {% #add-and-remove-methods %} Now that you have a collection to hold ideas, we can read and write to it from our app. -Create a new file `src/lib/stores/ideas.js` and add the following code to it. -```js -import { writable } from "svelte/store"; -import { ID, Query } from "appwrite"; -import { databases } from "$lib/appwrite"; +Let's create some methods to manage ideas in our app. -export const IDEAS_DATABASE_ID = "6508783c5dc784d544dd"; // Replace with your database ID -export const IDEAS_COLLECTION_ID = "65087840ab307cb06883"; // Replace with your collection ID +Create a new file `src/lib/ideas.js` and add the following code: -const databases = new Databases(client); +```js +import { ID, Query } from 'appwrite'; +import { databases } from '$lib/appwrite'; -const store = writable([]); +const IDEAS_DATABASE_ID = ''; // Replace with your database ID +const IDEAS_COLLECTION_ID = ''; // Replace with your collection ID -async function init() { - const response = await databases.listDocuments( - IDEAS_DATABASE_ID, - IDEAS_COLLECTION_ID, - // Use a query to how the latest ideas first - [Query.orderDesc("$createdAt")] - ); - store.set(response.documents); +export async function getIdeas() { + return await databases.listDocuments( + IDEAS_DATABASE_ID, + IDEAS_COLLECTION_ID, + // Use a query to show the latest ideas first + [Query.orderDesc('$createdAt')] + ); } -async function add(userId, title, description) { - const response = await databases.createDocument( - IDEAS_DATABASE_ID, - IDEAS_COLLECTION_ID, - ID.unique(), - { - userId, - title, - description, - } - ); - store.update((ideas) => [response, ...ideas]); +export async function addIdea(userId, title, description) { + await databases.createDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, ID.unique(), { + userId, + title, + description + }); } -async function remove(id) { - await databases.deleteDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, id); - store.update((ideas) => ideas.filter((idea) => idea.$id !== id)); +export async function deleteIdea(id) { + await databases.deleteDocument(IDEAS_DATABASE_ID, IDEAS_COLLECTION_ID, id); } - -export const ideas = { - subscribe: store.subscribe, // Expose the store's value with $ideas - init, - add, - remove, -}; ``` Remember to use a store to hold data returned from Appwrite Databases, so your components can be updated when the data changes. \ No newline at end of file diff --git a/src/routes/docs/tutorials/sveltekit/step-7/+page.markdoc b/src/routes/docs/tutorials/sveltekit/step-7/+page.markdoc index e58dded3a4..c9fd7a7a39 100644 --- a/src/routes/docs/tutorials/sveltekit/step-7/+page.markdoc +++ b/src/routes/docs/tutorials/sveltekit/step-7/+page.markdoc @@ -5,77 +5,117 @@ description: Add pagining and ordering to you SvelteKit application powered by A step: 7 --- -Using the `ideas` store, we can build a page to submit and view ideas. +Using our created methods, we can build a page to submit and view ideas. -Overwrite the contents of `src/routes/+page.svelte` with the following code. +First, let's create a load function for our ideas page. This will load the latest ideas from the database. + +To do so, create a file called `src/routes/+page.js` with the following content: + +```js +import { getIdeas } from '$lib/ideas'; + +export async function load() { + return { + ideas: getIdeas() + }; +} +``` + +Simple as that! Now, let's create the page itself. Replace the contents in `src/routes/+page.svelte` with the following: ```html {#if $user} -
-

Submit Idea

-
- -