fix landing page

Author: ryansolid

package-lock.json

@@ -24,15 +24,15 @@
   },
   "homepage": "https://github.com/ryansolid/solid-realworld#readme",
   "devDependencies": {
-    "@babel/core": "7.6.2",
+    "@babel/core": "7.7.4",
     "@babel/plugin-syntax-dynamic-import": "7.2.0",
-    "babel-preset-solid": "0.2.1",
-    "rollup": "1.26.0",
+    "babel-preset-solid": "0.2.3",
+    "rollup": "1.27.8",
     "rollup-plugin-babel": "4.3.3",
     "rollup-plugin-clear": "^2.0.7",
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-serve": "^1.0.1",
     "rollup-plugin-terser": "5.1.2",
-    "solid-js": "0.13.0"
+    "solid-js": "0.14.7"
   }
 }

package.json

@@ -0,0 +1,38 @@
+import { lazy } from "solid-js";
+import { useStore } from "./store";
+
+const NavBar = lazy(() => import("./components/NavBar")),
+  Home = lazy(() => import("./components/Home")),
+  Editor = lazy(() => import("./components/Editor")),
+  Settings = lazy(() => import("./components/Settings")),
+  Auth = lazy(() => import("./components/Auth")),
+  Article = lazy(() => import("./components/Article")),
+  Profile = lazy(() => import("./components/Profile"));
+
+export default () => {
+  const [CommonStore, UserStore, { match, getParams }] = useStore(
+    "common",
+    "user",
+    "router"
+  );
+
+  if (!CommonStore.state.token) CommonStore.setAppLoaded();
+  else UserStore.pullUser().finally(() => CommonStore.setAppLoaded());
+
+  return (
+    <>
+      <NavBar />
+      <Show when={CommonStore.state.appLoaded}>
+        <Switch>
+          <Match when={match("editor", /^#\/editor\/?(.*)/)}><Editor {...getParams()} /></Match>
+          <Match when={match("settings", /^#\/settings/)}><Settings /></Match>
+          <Match when={match("login", /^#\/login/)}><Auth /></Match>
+          <Match when={match("register", /^#\/register/)}><Auth /></Match>
+          <Match when={match("article", /^#\/article\/(.*)/)}><Article {...getParams()} /></Match>
+          <Match when={match("profile", /^#\/@([^/]*)\/?(favorites)?/)}><Profile {...getParams()} /></Match>
+          <Match when={match("", /^#?$/)}><Home /></Match>
+        </Switch>
+      </Show>
+    </>
+  );
+};

src/App.js

@@ -19,12 +19,12 @@ export default ({ article }) => {
   return (
     <div class="article-preview">
       <div class="article-meta">
-        <NavLink to={`/@${article.author.username}`}>
+        <NavLink href={`@${article.author.username}`} route="profile">
           <img src={article.author.image} alt="" />
         </NavLink>
 
         <div class="info">
-          <NavLink class="author" to={`/@${article.author.username}`}>
+          <NavLink class="author" href={`@${article.author.username}`} route="profile">
             {article.author.username}
           </NavLink>
           <span class="date">{new Date(article.createdAt).toDateString()}</span>
@@ -40,7 +40,7 @@ export default ({ article }) => {
         </div>
       </div>
 
-      <NavLink to={`/article/${article.slug}`} class="preview-link">
+      <NavLink href={`article/${article.slug}`} route="article" class="preview-link">
         <h1>{article.title}</h1>
         <p>{article.description}</p>
         <span>Read more...</span>

src/components/App.js

@@ -1,46 +1,44 @@
-import { createEffect } from "solid-js";
+import { createEffect, createSignal } from "solid-js";
 import { useStore } from "../store";
 import NavLink from "./NavLink";
 import ArticleList from "./ArticleList";
 
 const qsParse = () => "";
 
 export default () => {
-  const [CommonStore, UserStore, ArticlesStore] = useStore(
+  const [CommonStore, UserStore, ArticlesStore, { location }] = useStore(
       "common",
       "user",
-      "articles"
+      "articles",
+      "router"
     ),
-    getTab = () => qsParse(window.location.search).tab || "all",
-    getTag = () => qsParse(window.location.search).tag || "",
+    [tab, setTab] = createSignal(CommonStore.state.token ? "feed" : "all"),
     getPredicate = () => {
-      switch (getTab()) {
+      switch (tab()) {
         case "feed":
           return { myFeed: true };
-        case "tag":
-          return { tag: qsParse(window.location.search).tag };
-        default:
+        case "all":
           return {};
+        default:
+          return { tag: tab() };
       }
     },
-    handleTabChange = tab => {
-      if (props.location.query.tab === tab) return;
-      props.router.push({ ...props.location, query: { tab } });
-    },
     handleSetPage = page => {
       ArticlesStore.setPage(page);
       ArticlesStore.loadArticles();
     };
 
   createEffect(() => {
-    // if (
-    //   getTab(props) !== getTab(previousProps) ||
-    //   getTag(props) !== getTag(previousProps)
-    // ) {
+    const search = location().split("?")[1];
+    if (!search) return setTab("all");
+    const query = new URLSearchParams(search);
+    setTab(query.get("tab"));
+  });
+  createEffect(() => {
     ArticlesStore.setPredicate(getPredicate());
     ArticlesStore.loadArticles();
-    // }
   });
+  CommonStore.loadTags();
 
   return (
     <div class="home-page">
@@ -60,23 +58,31 @@ export default () => {
               <ul class="nav nav-pills outline-active">
                 <Show when={UserStore.state.currentUser}>
                   <li class="nav-item">
-                    <NavLink class="nav-link" route="?tab=feed">
+                    <NavLink
+                      class="nav-link"
+                      href="?tab=feed"
+                      active={tab() === "feed"}
+                    >
                       Your Feed
                     </NavLink>
                   </li>
                 </Show>
                 <li class="nav-item">
-                  <NavLink class="nav-link" route="?tab=all">
+                  <NavLink
+                    class="nav-link"
+                    href="?tab=all"
+                    active={tab() === "all"}
+                  >
                     Global Feed
                   </NavLink>
                 </li>
-                {/* <Show when={props.tag}>
+                <Show when={tab() !== "all" && tab() !== "feed"}>
                   <li className="nav-item">
                     <a href="" className="nav-link active">
-                      <i className="ion-pound" /> {props.tag}
+                      <i className="ion-pound" /> {tab()}
                     </a>
                   </li>
-                </Show> */}
+                </Show>
               </ul>
             </div>
 
@@ -96,10 +102,7 @@ export default () => {
                 <div class="tag-list">
                   <For each={CommonStore.state.tags}>
                     {tag => (
-                      <a
-                        href={`#/?tab=tag&tag=${tag}`}
-                        class="tag-pill tag-default"
-                      >
+                      <a href={`#/?tab=${tag}`} class="tag-pill tag-default">
                         {tag}
                       </a>
                     )}

src/components/ArticlePreview.js

@@ -44,8 +44,8 @@ export default () => {
               </NavLink>
             </li>
             <li class="nav-item">
-              <NavLink class="nav-link" route="profile">
-                <i class="ion-compose"></i>&nbsp;User
+              <NavLink class="nav-link" route="profile" href={`@${UserStore.state.currentUser.username}`}>
+                <i class="ion-compose"></i>&nbsp;{UserStore.state.currentUser}
               </NavLink>
             </li>
           </Show>

src/components/Home.js

@@ -1,12 +1,12 @@
 import { useStore } from "../store";
 
 export default props => {
-  const [{ match }] = useStore("router");
+  const [{ getParams }] = useStore("router");
   return (
     <a
       class={props.class}
-      classList={{ active: match(props.route) }}
-      href={`#/${props.route}`}
+      classList={{ active: props.active || getParams().routeName === props.route }}
+      href={`#/${props.href || props.route}`}
     >
       {props.children}
     </a>

src/components/NavBar.js

@@ -1,5 +1,5 @@
 import { render } from 'solid-js/dom';
-import App from './components/App';
+import App from './App';
 import { Provider } from './store';
 
 render(() => (

src/components/NavLink.js

@@ -22,7 +22,7 @@ export default function createCommon(agent) {
     async loadTags() {
       setState('isLoadingTags', true);
       try {
-        const { tags } = agent.Tags.getAll();
+        const { tags } = await agent.Tags.getAll();
         setState({ tags: tags.map(t => t.toLowerCase()) });
       } finally {
         setState('isLoadingTags', false);