Get settings working

Author: ryansolid

src/pages/Settings.js

@@ -1,52 +1,100 @@
+import { useStore } from "../store";
+import ListErrors from "../components/ListErrors";
+import { createState } from "solid-js";
+
 export default () => {
+  const [store, { logout, updateUser }] = useStore(),
+    [state, setState] = createState({
+      image: store.currentUser.image || "",
+      username: store.currentUser.username,
+      bio: store.currentUser.bio || "",
+      email: store.currentUser.email,
+      password: ""
+    }),
+    updateState = field => ev => setState(field, ev.target.value),
+    submitForn = ev => {
+      ev.preventDefault();
+      const user = Object.assign({}, state);
+      if (!user.password) {
+        delete user.password;
+      }
+      setState({ updatingUser: true });
+      updateUser(user)
+        .then(() => location.hash = `/@${user.username}`)
+        .catch(errors => setState({ errors }))
+        .finally(() => setState({ updatingUser: false }));
+    };
+
   return (
     <div class="settings-page">
       <div class="container page">
         <div class="row">
           <div class="col-md-6 offset-md-3 col-xs-12">
             <h1 class="text-xs-center">Your Settings</h1>
-            <form>
+            <ListErrors errors={state.errors} />
+            <form onSubmit={submitForn}>
               <fieldset>
                 <fieldset class="form-group">
                   <input
                     class="form-control"
                     type="text"
                     placeholder="URL of profile picture"
+                    value={state.image}
+                    onChange={updateState("image")}
                   />
                 </fieldset>
                 <fieldset class="form-group">
                   <input
                     class="form-control form-control-lg"
                     type="text"
                     placeholder="Your Name"
+                    value={state.username}
+                    onChange={updateState("username")}
                   />
                 </fieldset>
                 <fieldset class="form-group">
                   <textarea
                     class="form-control form-control-lg"
                     rows="8"
                     placeholder="Short bio about you"
+                    value={state.bio}
+                    onChange={updateState("bio")}
                   ></textarea>
                 </fieldset>
                 <fieldset class="form-group">
                   <input
                     class="form-control form-control-lg"
                     type="text"
                     placeholder="Email"
+                    value={state.email}
+                    onChange={updateState("email")}
                   />
                 </fieldset>
                 <fieldset class="form-group">
                   <input
                     class="form-control form-control-lg"
                     type="password"
                     placeholder="Password"
+                    value={state.password}
+                    onChange={updateState("password")}
                   />
                 </fieldset>
-                <button class="btn btn-lg btn-primary pull-xs-right">
+                <button
+                  class="btn btn-lg btn-primary pull-xs-right"
+                  type="submit"
+                  disabled={state.updatingUser}
+                >
                   Update Settings
                 </button>
               </fieldset>
             </form>
+            <hr/>
+            <button
+              class="btn btn-outline-danger"
+              onClick={() => (logout(), location.hash = "/")}
+            >
+              Or click here to logout.
+            </button>
           </div>
         </div>
       </div>

src/store/createArticles.js

@@ -27,9 +27,7 @@ export default function createArticles(
         const article = state.articles[slug];
         if (article) return article;
       }
-      const p = agent.Articles.get(slug);
-      loadArticle({ [slug]: p });
-      return p;
+      loadArticle({ [slug]: agent.Articles.get(slug) });
     },
     async makeFavorite(slug) {
       const article = state.articles[slug];
@@ -39,7 +37,7 @@ export default function createArticles(
           favoritesCount: s.favoritesCount + 1
         }));
         try {
-          return await agent.Articles.favorite(slug);
+          await agent.Articles.favorite(slug);
         } catch (err) {
           setState("articles", slug, s => ({
             favorited: false,
@@ -57,7 +55,7 @@ export default function createArticles(
           favoritesCount: s.favoritesCount - 1
         }));
         try {
-          return await agent.Articles.unfavorite(slug);
+          await agent.Articles.unfavorite(slug);
         } catch (err) {
           setState("articles", slug, s => ({
             favorited: true,
@@ -81,7 +79,7 @@ export default function createArticles(
       const article = state.articles[slug];
       setState("articles", { [slug]: undefined });
       try {
-        return await agent.Articles.del(slug);
+        await agent.Articles.del(slug);
       } catch (err) {
         setState("articles", { [slug]: article });
         throw err;

src/store/createEditor.js

@@ -1,18 +1,18 @@
 export default function createEditor(store) {
-  store.actions = {
-    ...store.actions,
+  const [, actions] = store;
+  store[1] = {
+    ...actions,
     async loadInitialData(articleSlug) {
-      const article = await store.actions.loadArticle(articleSlug, {
+      const article = await actions.loadArticle(articleSlug, {
         acceptCached: true
       });
       if (!article) throw new Error("Can't load original article");
       return article;
     },
     async submit(article) {
       await (article.slug
-        ? store.actions.updateArticle(article)
-        : store.actions.createArticle(article));
+        ? actions.updateArticle(article)
+        : actions.createArticle(article));
     }
   };
-  return store;
 }

src/store/createUser.js

@@ -8,13 +8,9 @@ export default function createUser(agent, store, loadState, setState) {
       return p;
     },
     async updateUser(newUser) {
-      setState({ updatingUser: true });
-      try {
-        const { user } = await agent.Auth.save(newUser);
-        setState({ currentUser: user });
-      } finally {
-        setState({ updatingUser: false });
-      }
+      const { user, errors } = await agent.Auth.save(newUser);
+      if (errors) throw errors;
+      setState({ currentUser: user });
     }
   };
 }

src/store/index.js

@@ -28,7 +28,7 @@ export function Provider(props) {
   createArticles(agent, store, loadState, setState, loadArticles);
   createComments(agent, store, loadState, setState);
   createCommon(agent, store, loadState, setState);
-  // createEditor(store, setState);
+  createEditor(store, setState);
   createProfile(agent, store, loadState, setState);
   createUser(agent, store, loadState, setState);
   createAuth(agent, store, loadState, setState);