fixed more issues

client/res/scss/home.scss

@@ -19,11 +19,7 @@
       text-align: center;
     }
     button {
-      background-color: $color3;
       font-size: 1rem;
-      &:hover {
-        background-color: $color4;
-      }
     }
   }
   ul {
@@ -32,14 +28,12 @@
     li {
       margin: 0.5rem 0;
       button {
-        background-color: $color1;
         width: 100%;
         font-size: 1.5rem;
         transition: all 0.3s;
         text-transform: capitalize;
         &:hover {
           cursor: pointer;
-          background-color: $color2;
         }
       }
     }

client/res/scss/main.scss

@@ -18,6 +18,7 @@ h1 {
 
 button {
   font-family: 'Roboto', sans-serif;
+  background-color: $color1;
   font-weight: 300;
   border: none;
   outline:none;
@@ -27,6 +28,7 @@ button {
   transition: all 0.3s;
   &:hover {
     cursor: pointer;
+    background-color: $color2;
   }
 }
 

client/res/scss/palette.scss

@@ -1,15 +1,15 @@
-/* Coolors Exported Palette - coolors.co/a62639-db324d-12355b-420039-ffffff */
+/* Coolors Exported Palette - coolors.co/03b5aa-037971-023436-00bfb3-049a8f */
 
 /* HSL */
-$color1: hsla(351%, 63%, 40%, 1);
-$color2: hsla(350%, 70%, 53%, 1);
-$color3: hsla(211%, 67%, 21%, 1);
-$color4: hsla(308%, 100%, 13%, 1);
-$color5: hsla(0%, 0%, 100%, 1);
+$color1: hsla(176%, 97%, 36%, 1);
+$color2: hsla(176%, 95%, 24%, 1);
+$color3: hsla(182%, 93%, 11%, 1);
+$color4: hsla(176%, 100%, 37%, 1);
+$color5: hsla(176%, 95%, 31%, 1);
 
 /* RGB */
-$color1: rgba(166, 38, 57, 1);
-$color2: rgba(219, 50, 77, 1);
-$color3: rgba(18, 53, 91, 1);
-$color4: rgba(63, 98, 137, 1);
-$color5: rgba(255, 255, 255, 1);
+$color1: rgba(3, 181, 170, 1);
+$color2: rgba(3, 121, 113, 1);
+$color3: rgba(2, 52, 54, 1);
+$color4: rgba(0, 191, 179, 1);
+$color5: rgba(4, 154, 143, 1);

client/res/scss/view_item.scss

@@ -11,10 +11,6 @@
     text-align: center;
   }
   button {
-    background-color: $color3;
     font-size: 1rem;
-    &:hover {
-      background-color: $color4;
-    }
   }
 }

client/src/index.js

@@ -35,11 +35,13 @@ const render = (Component) => {
 
 render(App);
 
-module.hot.accept('./app', () => {
-  // eslint-disable-next-line
-  const nextApp = require('./app').default;
-  render(nextApp);
-});
+if (module.hot) {
+  module.hot.accept('./app', () => {
+    // eslint-disable-next-line
+    const nextApp = require('./app').default;
+    render(nextApp);
+  });
+}
 
 // module.hot.accept('./reducers', () => {
 //   // eslint-disable-next-line

client/src/reducers/list.js

@@ -1,20 +1,20 @@
-import LIST_ITEMS from '../consts/list_items';
 import { LIST_ACTIONS } from '../consts/action_types';
 import { LISTS } from '../consts/default_state';
 
 export default (state = LISTS, action) => {
   switch (action.type) {
     case LIST_ACTIONS.ITEM_PREVIEW:
-      return { ...state, itemPreview: LIST_ITEMS[action.name.toUpperCase()] };
+      return { ...state, itemPreview: state.items[action.name.toUpperCase()] };
     case LIST_ACTIONS.ITEM_VIEW:
-      return { ...state, itemView: LIST_ITEMS[action.name.toUpperCase()] };
+      return { ...state, itemView: state.items[action.name.toUpperCase()] };
     case LIST_ACTIONS.ITEM_CLEAR:
       return { ...state, itemView: null };
     case LIST_ACTIONS.ITEM_ADD: {
       const nextItems = { ...state.items };
       const itemToAdd = action.item;
       nextItems[itemToAdd.name.toUpperCase()] = itemToAdd;
-      return { ...state, items: nextItems };
+      const returnVal = { ...state, items: nextItems };
+      return returnVal;
     }
     default:
       return state;

server/routes/index.js

@@ -7,7 +7,7 @@ app.set('view engine', 'ejs');
 
 app.use(express.static('public'));
 
-app.use('/', ssr);
+app.use('/*', ssr);
 
 app.listen(3000, () => {
   console.log('Hello World listening on port 3000!');

server/routes/ssr.js

@@ -36,7 +36,7 @@ router.get('/', (req, res) => {
   store.dispatch({
     type: LIST_ACTIONS.ITEM_ADD,
     item: {
-      name: 'Middleware',
+      name: 'middleware',
       description: `Redux middleware solves different problems than Express or Koa middleware, but in a conceptually similar way.
       It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.`,
     },

server/views/index.dev.ejs

@@ -25,7 +25,7 @@
 <body>
   <div id="reactbody">
   </div>
-  <script src="js/index.js"></script>
+  <script src="/js/index.js"></script>
 </body>
 
 </html>

server/views/index.ejs

@@ -18,8 +18,8 @@
   <meta name="site" content="https://www.example.com" />
   <meta name="distribution" content="global" />
   <meta name="Copyright" content="" />
-
   <meta name="theme-color" content="#0e5354" />
+  <link rel="stylesheet" href="/css/main.css" />
 </head>
 
 <body>
@@ -31,7 +31,7 @@
   <script>
     window.__INITIAL_STATE__ = <%- script %>
   </script>
-  <script src="js/index.js"></script>
+  <script src="/js/index.js"></script>
 </body>
 
 </html>

webpack/client.dev.js

@@ -20,7 +20,6 @@ module.exports = {
   },
   devServer: {
     hot: true,
-    contentBase: path.join(__dirname, '../server/public'),
     publicPath: '/',
     historyApiFallback: true
   },