ShafehOrg · sharshi · Mar 8, 2022 · Mar 8, 2022
diff --git a/.gitignore b/.gitignore
@@ -30,3 +30,7 @@ app/assets/javascripts/bundle.js.map
 
 /app/assets/builds/*
 !/app/assets/builds/.keep
+
+bundle.js
+bundle.js.map
+bundle.js.LICENSE.txt
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,14 @@
+module.exports = {
+  "stories": [
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "@storybook/addon-postcss",
+    "storybook-addon-designs/register"
+  ],
+  "framework": "@storybook/react"
+}
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}
diff --git a/app/assets/javascripts/5786ac3aa2cf2bedabdc60118803b16b.jpg b/app/assets/javascripts/5786ac3aa2cf2bedabdc60118803b16b.jpg
diff --git a/app/assets/javascripts/bundle.js b/app/assets/javascripts/bundle.js
diff --git a/app/assets/javascripts/bundle.js.map b/app/assets/javascripts/bundle.js.map
diff --git a/app/views/api/sessions/_user.json.jbuilder → ...views/api/sessions/_session.json.jbuilder b/app/views/api/sessions/_user.json.jbuilder → ...views/api/sessions/_session.json.jbuilder
diff --git a/app/views/api/sessions/show.json.jbuilder b/app/views/api/sessions/show.json.jbuilder
@@ -1 +1 @@
-json.partial! 'api/users/user', user: @user
+json.partial! 'api/sessions/session', user: @user
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -14,15 +14,22 @@
     <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
 
+    <% if logged_in? %>
+      <script>
+        window.currentUser = {
+          username: '<%= current_user.username %>',
+          name: '<%= current_user.name %>'
+        };
+      </script>
+    <% end %>
+
     <%# fonts  %>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 
   </head>
 
   <body>
-    <main class="container mx-auto mt-28 px-5 flex">
-      <%= yield %>
-    </main>
+    <%= yield %>
   </body>
 </html>
diff --git a/frontend/assets/logo.jpg b/frontend/assets/logo.jpg
diff --git a/frontend/components/app.js b/frontend/components/app.js
@@ -1,8 +1,5 @@
 import React from "react";
 
-import { connect } from "react-redux";
-import { logoutUser } from "../actions/session_actions";
-
 import { Switch, Route, Link } from "react-router-dom";
 import { AuthRoute, ProtectedRoute } from "../utils/route_util";
 import {
@@ -17,20 +14,9 @@ import {
   Siddur,
   SiddurEdit,
 } from "./components";
+import { Header } from "./header";
 
-const mapStateToProps = (state) => {
-  return {
-    loggedIn: Boolean(state.session.currentUser.id)
-  };
-};
-
-const mapDispatchToProps = (dispatch) => {
-  return {
-    logOut: () => dispatch(logoutUser())
-  };
-};
-
-const App = function(props) {
+const App = (props) => {
 
   const links = {
     "Chumash": "/chumash",
@@ -41,46 +27,42 @@ const App = function(props) {
   };
 
   const externalLinks = {
-    "Shnayim Mikra": "/shnayimmikra",
-    "Tikkun Korim": "/tikkun/online",
-    "Github": "/github",
+    "Shnayim Mikra": {
+      path: "/shnayimmikra",
+      url: "https://shafehorg.github.io/Shnayim-Mikra/",
+    },
+    "Tikkun Korim": {
+      path: "/tikkun/online",
+      url: "https://www.sharshi.com/tikkunkorim/",
+    },
+    "Github": {
+      path: "/github",
+      url: "https://github.com/ShafehOrg/daily-learning",
+    },
   };
 
   const nav = (
     <nav>
       <div className="internal-links">{Object.keys(links).map(text => {
         const link = links[text];
         return <div key={text}>
-          <Link to={`${link}`} > {text} </Link>
+          <Link to={`${ link }`} > { text } </Link>
         </div>
       })}</div>
       <br />
       external:
       <div className="external-links">{Object.keys(externalLinks).map(text => {
         const link = externalLinks[text];
         return <div key={text}>
-          <Link to={`${link}`} > {text} </Link>
+          <a href={`${ link.url }`} target="_blank" > { text } </a>
         </div>
       })}</div>
     </nav>
   );
 
-  const session = (
-    <>
-      { props.loggedIn ?
-        <Link to="/" onClick={props.logOut}>  Log out  </Link> :
-        <>
-          <Link to="/login">  Login  </Link>
-          <Link to="/signup">  Sign Up  </Link>
-        </>
-      }
-    </>
-  )
-
   return (
     <div>
-      <Link to="/" > Shafeh: Daily Learning  </Link>
-      {session}
+      <Header />
       {nav}
       <main >
         <Switch>
@@ -137,10 +119,12 @@ const App = function(props) {
           <Route exact path="/tikkun/online" render={() => (window.location = "https://www.sharshi.com/tikkunkorim/")} />
           <Route exact path="/github" render={() => (window.location = "https://github.com/ShafehOrg/daily-learning")} />
           <Route component={() => 404} />
+          <Link to={{ pathname: "https://example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }} target="_blank" />
+
         </Switch>
       </main>
     </div>
   );
 }
 
-export default connect(mapStateToProps, mapDispatchToProps)(App);
+export default App;
diff --git a/frontend/components/header.css b/frontend/components/header.css
@@ -0,0 +1,32 @@
+.wrapper {
+  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+svg {
+  display: inline-block;
+  vertical-align: top;
+}
+
+h1 {
+  font-weight: 900;
+  font-size: 20px;
+  line-height: 1;
+  margin: 6px 0 6px 10px;
+  display: inline-block;
+  vertical-align: top;
+}
+
+button + button {
+  margin-left: 10px;
+}
+
+.welcome {
+  color: #333;
+  font-size: 14px;
+  margin-right: 10px;
+}
diff --git a/frontend/components/header.js b/frontend/components/header.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Logo } from './logo';
+import Session from './session';
+import './header.css';
+
+export const Header = () => (
+    <header>
+        <div>
+            <Logo />
+            <h1>Shafeh</h1>
+        </div>
+        <div>
+            <Session />
+        </div>
+    </header>
+);
+
+
diff --git a/frontend/components/logo.css b/frontend/components/logo.css
@@ -0,0 +1,14 @@
+.storybook-logo--small {
+  width: 32px;
+  height: 32px;
+}
+
+.storybook-logo--medium {
+  width: 48px;
+  height: 48px;
+}
+
+.storybook-logo--large {
+  width: 64px;
+  height: 64px;
+}
diff --git a/frontend/components/logo.js b/frontend/components/logo.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './logo.css';
+import Image from '../assets/logo.jpg';
+
+/**
+ * Primary UI component for the app logo
+ */
+export const Logo = ({ size, alt, ...props }) => {
+  return (
+    <img
+      src={Image}
+      alt={alt}
+      className={['storybook-logo', `storybook-logo--${size}`].join(' ')}
+      {...props}
+    />
+  );
+};
+
+Logo.propTypes = {
+  /**
+   * How large should the logo be?
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  /**
+   * Optional click handler
+   */
+  onClick: PropTypes.func,
+  /**
+   * Optional alt text
+   * @default 'Logo'
+   */
+  alt: PropTypes.string,
+};
+
+Logo.defaultProps = {
+  size: 'small',
+  onClick: undefined,
+  alt: 'Logo',
+};
diff --git a/frontend/components/provider.js b/frontend/components/provider.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Provider } from 'react-redux'
+import { HashRouter } from "react-router-dom";
+
+const ProviderWrapper = ({ children, store }) => (
+    <Provider store={store}>
+        <HashRouter>
+            {children}
+        </HashRouter>
+    </Provider>
+)
+
+export default ProviderWrapper
diff --git a/frontend/components/session.js b/frontend/components/session.js
@@ -0,0 +1,43 @@
+import React from "react";
+import { connect } from "react-redux";
+import { logoutUser } from "../actions/session_actions";
+import { Link } from "react-router-dom";
+import PropTypes from 'prop-types';
+
+const mapStateToProps = (state) => {
+  return {
+    loggedIn: Boolean(state.session.currentUser.name)
+  };
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    logOut: () => dispatch(logoutUser())
+  };
+};
+
+export const Session = ({ loggedIn, logOut }) => {
+  return (
+    <>
+      { loggedIn ?
+        <Link to="/" onClick={ logOut }>  Log out  </Link> :
+        <>
+          <Link to="/login">  Login  </Link>
+          <Link to="/signup">  Sign Up  </Link>
+        </>
+      }
+    </>
+  );
+};
+
+Session.propTypes = {
+  loggedIn: PropTypes.bool.isRequired,
+  logOut: PropTypes.func.isRequired,
+};
+
+Session.defaultProps = {
+  loggedIn: true,
+  logOut: () => {},
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Session);
diff --git a/frontend/daily_learning.jsx b/frontend/daily_learning.jsx
@@ -4,7 +4,24 @@ import Root from "./root";
 import configureStore from "./store/store";
 
 document.addEventListener("DOMContentLoaded", () => {
-  const store = configureStore();
   const root = document.getElementById("root");
+
+  let store;
+  if (window.currentUser) {
+    const preloadedState = {
+      session: {
+        "currentUser": {
+          name: currentUser.name,
+          username: currentUser.username,
+        }
+      }
+    };
+    store = configureStore(preloadedState);
+  } else {
+    store = configureStore();
+  }
+  delete window.currentUser;
+
+
   ReactDOM.render( <Root store={store} />, root );
 });
diff --git a/frontend/reducers/session_reducer.js b/frontend/reducers/session_reducer.js
@@ -1,8 +1,11 @@
 import { REMOVE_USER, RECEIVE_USER_SIGNIN } from "../actions/session_actions";
 
+/**
+ * TODO: Save the session state to localStorage
+ */
 const defaultState = {
   currentUser: {
-    id: null,
+    name: null,
     username: null
   },
 };
@@ -12,7 +15,7 @@ const sessionReducer = (state = defaultState, action) => {
     case RECEIVE_USER_SIGNIN:
       return {
         currentUser: {
-          id: action.user.id,
+          name: action.user.name,
           username: action.user.username
         },
       };
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		json.partial! 'api/users/user', user: @user
		json.partial! 'api/sessions/session', user: @user