alpha version

Author: ryansolid

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "printWidth": 100
+}

FRONTEND_INSTRUCTIONS.md

@@ -47,7 +47,7 @@ Alternatively, if you want to make modifications to the theme, check out the [th
   - [Settings](#settings)
   - [Create/Edit Article](#createedit-article)
   - [Article](#article)
-  
+
 
 ## Layout
 

readme.md

@@ -1,11 +1,9 @@
-# WIP Not Functional Yet!!
-
 # ![RealWorld Example App](logo.png)
 
 > ### Solid.js codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API.
 
 
-### [Demo](https://github.com/gothinkster/realworld)    [RealWorld](https://github.com/ryansolid/solid-realworld)
+### [Demo](https://ryansolid.github.io/solid-realworld)    [RealWorld](https://github.com/ryansolid/solid-realworld)
 
 
 This codebase was created to demonstrate a fully fledged fullstack application built with Solid.js including CRUD operations, authentication, routing, pagination, and more.
@@ -14,12 +12,15 @@ We've gone to great lengths to adhere to the Solid.js community styleguides & be
 
 For more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.
 
+# Getting started
 
-# How it works
+To run locally during development:
 
-> Describe the general architecture of your app here
+- `npm install` to install all dependencies
+- `npm start` to build and serve app locally
+- browse to http://localhost:5000/
 
-# Getting started
+To create a production build:
 
-> npm install, npm start, etc.
+- `npm run build` creates a development build, with all source compiled into ./dist/ folder
 

rollup.config.js

@@ -16,7 +16,7 @@ const plugins = [
   }),
   resolve({ extensions: [".js", ".jsx"] }),
   commonjs(),
-  process.env.production && terser()
+  terser()
 ];
 
 export default {

src/App.js

@@ -4,9 +4,9 @@ import NavBar from "./components/NavBar";
 import Home from "./pages/Home";
 import Article from "./pages/Article";
 import Profile from "./pages/Profile";
+import Editor from "./pages/Editor";
 
-const Editor = lazy(() => import("./pages/Editor")),
-  Settings = lazy(() => import("./pages/Settings")),
+const Settings = lazy(() => import("./pages/Settings")),
   Auth = lazy(() => import("./pages/Auth"));
 
 export default () => {
@@ -20,7 +20,7 @@ export default () => {
     <>
       <NavBar />
       <Show when={store.appLoaded}>
-        <Suspense fallback={"Loading..."}>
+          <Suspense fallback={<div class="container">Loading...</div>}>
           <Switch>
             <Match when={match("editor", /^editor\/?(.*)/)}><Editor {...getParams()} /></Match>
             <Match when={match("settings", /^settings/)}><Settings /></Match>

src/components/ArticleList.js

@@ -1,18 +1,26 @@
+import { useStore } from "../store";
 import ArticlePreview from "./ArticlePreview";
 
 export default props => {
-  const handlePage = (e, v) => {
-    e.preventDefault();
-    props.onSetPage(v);
-    setTimeout(() => window.scrollTo(0, 0), 200);
-  };
+  const [{ token }, { unmakeFavorite, makeFavorite }] = useStore(),
+    handleClickFavorite = (e, article) => {
+      e.preventDefault();
+      article.favorited ? unmakeFavorite(slug) : makeFavorite(slug);
+    },
+    handlePage = (e, v) => {
+      e.preventDefault();
+      props.onSetPage(v);
+      setTimeout(() => window.scrollTo(0, 0), 200);
+    };
   return (
     <Suspense fallback={<div class="article-preview">Loading articles...</div>}>
       <For
         each={props.articles}
         fallback={<div class="article-preview">No articles are here... yet.</div>}
       >
-        {article => <ArticlePreview article={article} />}
+        {article => (
+          <ArticlePreview article={article} token={token} onClickFavorite={handleClickFavorite} />
+        )}
       </For>
       <Show when={props.totalPagesCount > 1}>
         <nav>

src/components/ArticlePreview.js

@@ -1,22 +1,20 @@
-import { useStore } from "../store";
 import NavLink from "./NavLink";
 
-const FAVORITED_CLASS = 'btn btn-sm btn-primary';
-const NOT_FAVORITED_CLASS = 'btn btn-sm btn-outline-primary';
+const FAVORITED_CLASS = "btn btn-sm btn-primary";
+const NOT_FAVORITED_CLASS = "btn btn-sm btn-outline-primary";
 
-export default ({ article }) => {
-  const [{ token }, { unmakeFavorite, makeFavorite }] = useStore(),
-    { title, description, slug, createdAt, tagList, author: { username, image }} = article;
-
-  const handleClickFavorite = e => {
-    e.preventDefault();
-    article.favorited
-      ? unmakeFavorite(slug)
-      : makeFavorite(slug);
-  };
+export default ({ article, token, onClickFavorite }) => {
+  const {
+    title,
+    description,
+    slug,
+    createdAt,
+    tagList,
+    author: { username, image }
+  } = article;
 
   return (
-    <div class="article-preview">
+    <div class="article-preview" model={article}>
       <div class="article-meta">
         <NavLink href={`@${username}`} route="profile">
           <img src={image} alt="" />
@@ -26,14 +24,14 @@ export default ({ article }) => {
           <NavLink class="author" href={`@${username}`} route="profile">
             {username}
           </NavLink>
-          <span class="date" textContent={/*@once*/new Date(createdAt).toDateString()} />
+          <span class="date" textContent={/*@once*/ new Date(createdAt).toDateString()} />
         </div>
 
         {token && (
           <div class="pull-xs-right">
             <button
               class={article.favorited ? FAVORITED_CLASS : NOT_FAVORITED_CLASS}
-              onClick={handleClickFavorite}
+              onClick={onClickFavorite}
             >
               <i class="ion-heart" /> {article.favoritesCount}
             </button>

src/components/NavLink.js

@@ -3,7 +3,7 @@ import { useTransition } from "solid-js";
 
 export default props => {
   const { getParams } = useRouter(),
-    [, start] = useTransition({ timeoutMs: 250 })
+    [, start] = useTransition({ timeoutMs: 250 });
   return (
     <a
       class={props.class}