* updates for separate hosting client/server

* update readme
* styling tweaks

Author: timiscoding

README.md

@@ -1,39 +1,34 @@
-# Blog List app
+# <p align="center"> Blog List app </p>
 
-**An app that lets users manage blog links, share, like and comment.**
+### <p align="center">An app that lets users manage blog links, share, like and comment.</p>
 
-**[Try it out]()**
+### <p align="center"><a href="https://blog-list-pi.now.sh/">Try it out</a></p>
 
-Test username/password: **tim / tim**
+<p align="center">Test username/password: tim / tim</p>
+
+## About
 
 Frontend: React, Redux, Styled-components, Storybook
 
-Backend: Node, Express, MongoDB, Mongoose
+Backend: Node, Express, MongoDB, Mongoose, Jest
 
 This project started out as my submission in part 7 of the
 [Full Stack course](https://fullstackopen.com/en/part7)
 to learn redux and grew from there.
 
 ## Dev build
 
-Requirements (works on version):
+Server requirements (works on version):
 
 - node 11.10
 - mongodb v3.4 or mongo cloud - sign up for a
   [free account](https://www.mongodb.com/cloud)
 
-Server secrets are stored in `.env` in project root so create the env
-vars like the example below:
-
-```
-MONGODB_URI=mongodb+srv://tim:<password>@fullstackopen-9zjso.mongodb.net/blog-list?retryWrites=true&w=majority
-PORT=3003
-SECRET=jsonwebtokensuperdupersecret
-```
+Secrets are stored in `/server/.env`. See `/server/.env.example`.
 
 The client uses create-react-app and proxies all backend requests.
-In order for the client to talk to the server, the port chosen above
-needs to match the one inside `package.json` in `/client`
+In order for the client to talk to the server, the port chosen in `.env`
+needs to match the one in `/client/package.json`
 
 ```
 "proxy": "http://localhost:3003",
@@ -51,18 +46,20 @@ npm run server
 npm run storybook (for visual testing)
 ```
 
-## Notes
+## Additional
 
 Things I added on top of the project requirements:
 
-- pagination with client caching
-- sort by fields
-- multiple blog deletion
-- form validation
-- a design system...sort of (check out the storybook)
-- notifications
-- mobile responsive
-- react-spring animations
+- [x] pagination with client caching
+- [x] sort by fields
+- [x] multiple blog deletion
+- [x] form validation
+- [x] a design system...sort of (check out the storybook)
+- [x] notifications
+- [x] mobile responsive
+- [x] react-spring animations
+
+## Outcome
 
 Learnt some notable things:
 

client/now.json

@@ -0,0 +1,7 @@
+{
+  "build": {
+    "env": {
+      "REACT_APP_API_URL": "@API_URL"
+    }
+  }
+}

client/package-lock.json

@@ -8,7 +8,6 @@
     "@quickbaseoss/babel-plugin-styled-components-css-namespace": "1.0.0-rc4",
     "axios": "^0.19.0",
     "body-scroll-lock": "2.7.0",
-    "http-proxy-middleware": "0.20.0",
     "immer": "4.0.0",
     "lodash": "4.17.15",
     "normalizr": "3.4.1",
@@ -17,13 +16,11 @@
     "react-dom": "^16.8.6",
     "react-helmet": "5.2.1",
     "react-loading-skeleton": "1.3.0",
-    "react-morph": "0.4.0",
     "react-onclickoutside": "6.9.0",
     "react-redux": "7.1.0",
     "react-router-dom": "5.0.1",
     "react-scripts": "3.4.1",
     "react-spring": "8.0.27",
-    "react-transition-group": "4.3.0",
     "redux": "4.0.4",
     "redux-thunk": "2.3.0",
     "reselect": "4.0.0",

client/package.json

@@ -44,7 +44,7 @@ export const CircleIcon = styled(CircleGlyph)`
 `;
 
 export const Title = styled.div`
-  font-weight: 600;
+  font-weight: 500;
   font-size: 1.3rem;
   line-height: 1.2;
   text-transform: capitalize;
@@ -71,6 +71,7 @@ export const Metadata = styled.span`
 `;
 
 export const BlogLink = styled.a`
+  margin-top: 5px;
   ${ellipsis("100%")};
 `;
 

client/src/components/Blog/styled.js

@@ -27,7 +27,7 @@ export const ListItem = styled.li`
 
 export const Title = styled(filterProps(Link, ["isLink"]))`
   pointer-events: ${({ isLink }) => (isLink ? "auto" : "none")};
-  font-weight: ${({ isLink }) => (isLink ? "auto" : "normal")};
+  font-weight: ${({ isLink }) => (isLink ? "450" : "normal")};
   text-decoration: none;
   color: ${({ theme }) => theme.fontDark};
   font-size: 1.1rem;

client/src/components/BlogList/BlogItem/styled.js

@@ -47,7 +47,7 @@ export default createGlobalStyle`
 
   a {
     color: ${({ theme }) => theme.primaryLight};
-    font-weight: 550;
+    font-weight: 400;
     text-decoration: none;
     &:hover {
       text-decoration: underline;

client/src/components/GlobalStyle.js

@@ -5,7 +5,7 @@ const makeBrightLevels = (name, baseColor, percent = 0.1) => ({
   [name + "Lighter"]: lighten(percent * 3, baseColor),
   [name + "Light"]: lighten(percent, baseColor),
   [name + "Dark"]: darken(percent, baseColor),
-  [name + "Darker"]: darken(percent * 2, baseColor)
+  [name + "Darker"]: darken(percent * 2, baseColor),
 });
 
 const theme = {
@@ -26,7 +26,7 @@ const theme = {
     return transparentize(0.9, this.valid);
   },
   ...makeBrightLevels("fontDark", "#000"),
-  fontLight: "#fff"
+  ...makeBrightLevels("fontLight", "#fff"),
 };
 
 export default theme;

client/src/components/Theme.js

@@ -2,7 +2,7 @@ import Axios from "axios";
 import { batch } from "react-redux";
 import { getActionName } from "../reducers/utils";
 
-export default ({ getState, dispatch }) => next => async action => {
+export default ({ getState, dispatch }) => (next) => async (action) => {
   if (action.HTTP_ACTION === undefined) return next(action);
 
   const {
@@ -15,7 +15,7 @@ export default ({ getState, dispatch }) => next => async action => {
     onSuccess,
     onFail,
     headers,
-    notify
+    notify,
   } = action.HTTP_ACTION;
   const actionName = getActionName(type);
   const { currentUser } = getState();
@@ -26,10 +26,11 @@ export default ({ getState, dispatch }) => next => async action => {
   next({ type, notify });
   try {
     const response = await Axios({
+      baseURL: process.env.REACT_APP_API_URL,
       method,
       headers,
       url,
-      data: payload
+      data: payload,
     });
     let retVal;
     batch(() => {
@@ -38,8 +39,8 @@ export default ({ getState, dispatch }) => next => async action => {
           type: `${actionName}_SUCCESS`,
           data,
           response: response.data,
-          schema
-        }
+          schema,
+        },
       });
       onSuccess && next(onSuccess()); // OnSuccess(data, transformResp) UNUSED?
     });
@@ -57,7 +58,7 @@ export default ({ getState, dispatch }) => next => async action => {
       error = { message: "Request was made but no response was received" };
     } else {
       error = {
-        message: `There was a problem setting up the request (${err.message})`
+        message: `There was a problem setting up the request (${err.message})`,
       };
     }
     console.error(
@@ -73,7 +74,7 @@ export default ({ getState, dispatch }) => next => async action => {
     const retVal = next({
       type: `${actionName}_FAIL`,
       error,
-      notify
+      notify,
     });
     onFail && next(onFail(error));
     return retVal;

client/src/store/apiMiddleware.js

@@ -0,0 +1,3 @@
+MONGODB_URI=<mongodb connection string URI>
+PORT=<server port>
+SECRET=<json web token secret>