LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-11 04:22:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Apply suggestions from code review

Browse Source 
Co-authored-by: Thomas G. Lopes <26071571+TGlide@users.noreply.github.com>
This commit is contained in:
Vincent (Wen Yu) Ge
2024-01-12 14:38:26 -05:00
committed by GitHub
parent a786030446
commit a7b9154020
4 changed files with 18 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/docs/tutorials/nuxt/step-2/+page.markdoc
View File

@@ -140,7 +140,7 @@ This is what your directory should look like after adding the new directories an
If you run the development server now, it will still render the Nuxt Welcome page.
We need to tell our app to use the files we just created instead.
Open `app.vue`in the root directory and replace the content with the following code.
Open `app.vue` in the root directory and replace the content with the following code.
Your page will now be up and running.
```vue

12
src/routes/docs/tutorials/nuxt/step-4/+page.markdoc
View File

@@ -31,8 +31,6 @@ import { ref } from "vue";
import { account } from "../appwrite";
import { type Models } from 'appwrite';
const current = ref<Models.Session | null>(null); // Reference to current user object
export const useUserSession = () => {
@@ -64,19 +62,19 @@ export const useUserSession = () => {
# Login page {% #login-page %}
To get the user input we will build a simple form with the logic from the `useUserSession()` composable.
The form will have two input fields, one for the user's email-address and one for the password.
Underneath will be two buttons for logging in or registering the user.
The form will have two input fields, one for the user's email address and one for the password.
Underneath there will be two buttons for logging in or registering the user.
Create a new file in the `pages` directory called `login.vue`.
This will not only create a new page, it will also add the route `/login` to the url.
In step 5 we will add a loginbutton that will redirect us to this page.
In step 5 we will add a login button that will redirect us to this page.
Add the following code to build the form.
```vue
<!-- pages/login.vue -->
<template>
<div class="u-max-width-650" style="margin: 0 auto;">
<div class="u-max-width-650" style="margin-inline: auto;">
<section class="card u-margin-32">
<h2 class="eyebrow-heading-2">Login/Register</h2>
<form
@@ -84,7 +82,6 @@ Add the following code to build the form.
@submit.prevent="handleLogin || handleRegistration"
>
<ul class="form-list">
<!-- Input field e-mail -->
<li class="form-item">
<label class="label">Email</label>
<div class="input-text-wrapper">
@@ -97,7 +94,6 @@ Add the following code to build the form.
/>
</div>
</li>
<!-- Input field e-mail -->
<li class="form-item">
<label class="label">Password</label>
<div class="input-text-wrapper">

5
src/routes/docs/tutorials/nuxt/step-6/+page.markdoc
View File

@@ -71,10 +71,9 @@ interface Idea extends Models.Document{
const current = ref<Idea[] | null>(null); // Reference for the fetched data
export const useIdeas = () => {
// Fetch the 10 most recent ideas from the database
// Add the list to the current reference object
const fetch = async (): Promise<void> => {
const fetch = async () => {
const response = await database.listDocuments(
ideasDatabaseId,
ideasCollectionId,
@@ -109,4 +108,4 @@ export const useIdeas = () => {
};
```
Now we can call the `useIdeas()` composable from the home page.
Now we can call the `useIdeas` composable from the home page.

26
src/routes/docs/tutorials/nuxt/step-7/+page.markdoc
View File

@@ -5,7 +5,7 @@ description: Add ideas from Appwrite database in your app.
step: 7
---
With the methods in the `useIdeas`composable we can get some ideas to the home page for the users to interact with.
With the methods in the `useIdeas` composable we can get some ideas to the home page for the users to interact with.
We will use it in a form component so the logged in users can add their ideas, and in a list component to render the ten most recent ideas.
We start with building the form.
@@ -14,10 +14,10 @@ We start with building the form.
On the home page, the logged in users should be able to add their ideas to the Appwrite database.
The form need a text field for filling in the title, a textarea for the description and a submit button.
From the `components` directory, add the file `ÌdeasForm.vue` and add the following code.
From the `components` directory, add the file `IdeasForm.vue` and add the following code.
```vue
<!-- components/ideasForm.vue -->
<!-- components/IdeasForm.vue -->
<template>
<div>
@@ -25,7 +25,6 @@ From the `components` directory, add the file `ÌdeasForm.vue` and add the follo
<h4 class="heading-level-4">Submit Idea</h4>
<form @submit.prevent="handleAddIdea" class="u-margin-block-start-16">
<ul class="form-list">
<!-- Title input field -->
<li class="form-item">
<label class="label">Title</label>
<input
@@ -34,7 +33,6 @@ From the `components` directory, add the file `ÌdeasForm.vue` and add the follo
name="title"
/>
</li>
<!-- Description input field -->
<li class="form-item">
<label class="label">Description</label>
<textarea
@@ -73,13 +71,13 @@ const handleAddIdea = async (event) => {
</script>
```
Next, add the component to the page `pages/index.vue` by auto-importing it in the `<template>`tag.
Next, add the component to the page `pages/index.vue` by auto-importing it in the `<template>` tag.
In doing that, we need to take a moment to think about how we want to display the form to the users.
Since it should only be shown to logged in user, we need to wrap it in a `<section>`that renders conditionally when the `isLoggedIn` reference in the `useUserSession` is true.
Since it should only be shown to logged in user, we need to wrap it in a `<section>` that renders conditionally when the `isLoggedIn` reference in the `useUserSession` is true.
If the requirement is not met, we show a paragraph with some information to the user instead.
Add the following code to the `index.vue`page to conditionally render the form and information paragraph.
Add the following code to the `index.vue` page to conditionally render the form and information paragraph.
Overwrite the contents of `pages/index.vue` with the following code.
@@ -87,13 +85,12 @@ Overwrite the contents of `pages/index.vue` with the following code.
<!-- pages/index.vue -->
<template>
<div class="u-max-width-650" style="margin: 0 auto;">
<div class="u-max-width-650" style="margin-inline: auto;">
<!-- Idea form component for logged in users -->
<section v-if="user.current.value" class="card u-margin-32">
<IdeasForm />
</section>
<!-- Paragraph for not logged in users -->
<section v-else class="card u-margin-32">
<div class="container">
<p class="body-text-1" style="width: 100%;">
@@ -106,7 +103,6 @@ Overwrite the contents of `pages/index.vue` with the following code.
</template>
<script setup>
// Access user composable function
const user = useUserSession();
</script>
@@ -122,22 +118,22 @@ Now that we can get some ideas to show, we go on to build the component for the
Once again, we need to take a moment to think about how this component should work.
First of all, the ideas should be visible for the users before any interaction has taken place on the page.
To catch that moment in time when the page loads, we call our `fetch()` function, that fetches the ideas in Appwrite, from the built-in `onMounted` function.
To catch that moment in time when the page loads, we call our `fetch` function, that fetches the ideas in Appwrite, from the built-in `onMounted` function.
Second, it's likely that a user will want to delete one of their ideas from the database.
We help them do that by adding a delete button in the top right corner of the idea list item, but only on the ideas added by the user itself.
Add the file `IdeasList`from the `componenents` directory and insert the following code:
Add the file `IdeasList` from the `componenents` directory and insert the following code:
```vue
<!-- componenents/ideasList.vue -->
<!-- componenents/IdeasList.vue -->
<template>
<section class="u-margin-32">
<article class="card">
<h4 class="heading-level-4">Latest Ideas</h4>
<ul class="u-margin-block-start-8">
<template v-if="ideas.current.value && ideas.current.value.length">
<template v-if="ideas.current.value?.length">
<li v-for="idea in ideas.current.value">
<div class="box">
<h5 class="heading-level-6">{{ idea.title }}</h5>