renamed stores

client/src/api/todo.js

@@ -1,9 +1,8 @@
-import { writable } from 'svelte/store'
 import axios from 'axios'
 
-axios.defaults.baseURL = '//localhost:8000'
+import { todos } from '../stores'
 
-export const todos = writable([])
+axios.defaults.baseURL = '//localhost:8000'
 
 export async function refresh() {
   const { data } = await axios({

client/src/components/Add.svelte

@@ -2,7 +2,7 @@
   import Button from './Button.svelte'
   import Field from './Field.svelte'
 
-  import { add } from '../api'
+  import { add } from '../api/todo.js'
 
   let title = ''
 

client/src/components/Button.svelte

@@ -7,11 +7,13 @@
     outline: none;
     border: none;
     color: hsl(0, 0%, 100%);
-    background-color: hsl(0, 0%, 0%);
+    background-color: var(--clr-accent);
     padding: 0.5em 1em;
     border-radius: 1em;
     font-size: inherit;
     cursor: pointer;
+    min-width: 5em;
+    text-align: center;
   }
 </style>
 

client/src/components/Field.svelte

@@ -6,7 +6,7 @@
 <style>
   input {
     outline: none;
-    border: 3px solid hsl(0, 0%, 0%);
+    border: 3px solid var(--clr-accent);
     border-radius: 1em;
     font-size: inherit;
     padding: 0.25em 1em;

client/src/components/List.svelte

@@ -1,6 +1,6 @@
 <script>
   import Todo from './Todo.svelte'
-  import { todos } from '../api'
+  import { todos } from '../stores.js'
 </script>
 
 <style>

client/src/components/Todo.svelte

@@ -2,33 +2,53 @@
   import Button from './Button.svelte'
   import Field from './Field.svelte'
 
-  import { remove, update } from '../api'
+  import { remove, update } from '../api/todo.js'
 
   export let todo
+
+  function toggle() {
+    update({
+      ...todo,
+      done: !todo.done,
+    })
+  }
 </script>
 
 <style>
   li {
+    display: block;
+  }
+
+  li.done {
+    --clr-accent: #c9c9c9;
+  }
+
+  div {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
-    margin-bottom: 2.5em;
+    margin-top: 0.5em;
+    margin-bottom: 3em;
   }
 
   span {
     display: block;
-    width: 1em;
+    width: 0.5em;
   }
 </style>
 
-<li>
+<li class:done={todo.done}>
   <Field bind:value={todo.title} full />
-  <span />
-  <Button
-    on:click={() => (window.location.pathname = '/todo/' + todo._id)}
-    text="View" />
-  <span />
-  <Button on:click={() => update(todo)} text="Update" />
-  <span />
-  <Button on:click={() => remove(todo._id)} text="Delete" />
+  <div>
+    <Button on:click={toggle} text={todo.done ? 'Reopen' : 'Completed'} />
+    {#if !todo.done}
+      <span />
+      <Button on:click={() => update(todo)} text="Update" />
+      <span />
+      <a href={'/todo/' + todo._id}>
+        <Button text="View" />
+      </a>
+    {/if}
+    <span />
+    <Button on:click={() => remove(todo._id)} text="Delete" />
+  </div>
 </li>

client/src/routes/_layout.svelte

@@ -2,16 +2,19 @@
   // import 'bootstrap/dist/css/bootstrap.min.css'
   import { onMount } from 'svelte'
 
-  import { refresh } from '../api'
+  import { refresh } from '../api/todo.js'
 
   onMount(() => {
     refresh()
-    console.log('mounted')
   })
 </script>
 
 <style>
-  * {
+  :root {
+    --clr-accent: #000;
+  }
+
+  :global(*) {
     box-sizing: border-box;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
       Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

client/src/routes/todo/[id].svelte

@@ -6,13 +6,21 @@
 
 <script>
   import Todo from '../../components/Todo.svelte'
-  import { todos } from '../../api'
+  import Button from '../../components/Button.svelte'
+
+  import { todos } from '../../stores.js'
 
   export let id
 
   $: todo = $todos.find(todo => todo._id === id)
 </script>
 
+<a href="/">
+  <Button text="← Back" />
+</a>
+<br />
+<br />
+
 {#if todo}
   <Todo {todo} />
 {/if}

client/src/stores.js

@@ -0,0 +1,6 @@
+import { writable } from 'svelte/store'
+
+export const todos = writable([])
+
+// And so on...
+export const someOtherStore = writable('something')