Feature/#20 (#22)

* Notification replaced by Profile.

* Updated text of profile page.

* Login actions added.

package.json

@@ -20,11 +20,13 @@
     "ramda": "^0.26.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-hook-form": "^3.21.7",
     "react-redux": "github:sultan99/react-redux#master",
     "react-router-dom": "^5.0.0",
     "redux-saga": "^1.0.2",
     "reselect": "^4.0.0",
-    "styled-components": "^4.3.2"
+    "styled-components": "^4.3.2",
+    "yup": "^0.27.0"
   },
   "devDependencies": {
     "@babel/core": "^7.4.4",

src/common/lens.js

@@ -6,6 +6,30 @@ const lens = R.ifElse(
   R.lensPath
 )
 
+/*
+const list = [
+  {emoji: `likes`, count: 13},
+  {emoji: `dislikes`, count: 5},
+  {emoji: `poo`, count: 2},
+]
+
+const update = assemble(
+  R.pipe(
+    R.last,
+    R.over(R.lensProp(`count`), R.inc),
+  )
+  R.dropLast,
+  (last, tail) => R.append(tail, last)
+)
+
+update(list)
+*/
+export const assemble = (...fns) => data => {
+  const [main, ...inputs] = R.reverse(fns)
+  const args = R.map(fn => fn(data), inputs)
+  return main(...args)
+}
+
 export const reshape = R.curry((shape, object) =>
   R.mapObjIndexed(
     fn => R.is(Array, fn) ? R.pipe(...fn)(object) : fn(object),

src/components/auth-options/index.js

@@ -8,7 +8,7 @@ const AuthOptions = ({
     text: 'Sign up'
   }, 
   second = {
-    link: '/log-in',
+    link: '/login',
     text: 'Log in'
   }
 }, ...rest) => {

src/components/input/index.js

@@ -1,29 +1,16 @@
-import React from 'react'
-import Top_ from './top.sc'
 import Input_ from './input.sc'
 import Label_ from './label.sc'
-import * as R from 'ramda'
-
-const Input = ({state: [state, setState] = [{}], children: name, type = 'text', ...rest}) => {
-  const onChange = event => {
-    const newState = R.merge(
-      state,
-      {[name]: event.target.value}
-    )
-    setState(newState)
-  }
+import React from 'react'
+import Top_ from './top.sc'
 
-  return (
-    <Top_ {...rest}>
-      <Label_>{name}</Label_>
-      <Input_ 
-        placeholder={name}
-        type={type}
-        value={state[name]}
-        onChange={onChange}
-      />
-    </Top_>
-  )
-}
+const Input = ({label, ...props}, ref) => (
+  <Top_>
+    <Label_>{label}</Label_>
+    <Input_
+      ref={ref}
+      {...props}
+    />
+  </Top_>
+)
 
-export default Input
+export default React.forwardRef(Input)

src/components/input/input.sc.js

@@ -1,11 +1,10 @@
 import styled from 'styled-components'
-import {prop} from 'common/style'
-
+import {ifProp, prop} from 'common/style'
 
 const Input_ = styled.input`
   background-color: white;
   border-radius: 4px;
-  border: 1px solid #dbdbdb;
+  border: 1px solid ${ifProp(`hasError`, `#ff7aa8`, `#dbdbdb`)};
   box-shadow: inset 0 1px 2px rgba(10,10,10,.1);
   box-sizing: border-box;
   color: #363636;

src/components/nav-menu/index.js

@@ -1,25 +1,34 @@
+import * as R from 'ramda'
 import Top_ from './top.sc'
 import Link_ from './link.sc'
 import React from 'react'
 import {withRouter} from 'react-router-dom'
 
-const NavMenu = ({isAuthenticated, history: {location: {pathname: path}}, ...rest}) => {
-  const logIn = path === '/log-in'
-  return (
-    <Top_ {...rest}>
-      <Link_ to="/review">Review</Link_>
-      <Link_ to="/search">Search</Link_>
-      <Link_ to="/notifications" hidden={!isAuthenticated}>
-        Notifications
-      </Link_>
-      <Link_ to="/sign-up" hidden={isAuthenticated || logIn}>
-        Sign up
-      </Link_>
-      <Link_ to='/log-in' hidden={isAuthenticated || !logIn}>
-        Log in
-      </Link_>
-    </Top_>
-  )
-}
+const isLogin = R.pathEq([
+  `history`, `location`, `pathname`
+], `/login`)
+
+const NavMenu = ({isAuthenticated, ...props}) => (
+  <Top_ {...props}>
+    <Link_ to="/review">
+      Review
+    </Link_>
+    <Link_ to="/search">
+      Search
+    </Link_>
+    <Link_ to="/notifications" hidden={true}>
+      Notifications
+    </Link_>
+    <Link_ to="/profile" hidden={!isAuthenticated}>
+      Profile
+    </Link_>
+    <Link_ to="/sign-up" hidden={isAuthenticated || isLogin(props)}>
+      Sign up
+    </Link_>
+    <Link_ to='/login' hidden={isAuthenticated || !isLogin(props)}>
+      Log in
+    </Link_>
+  </Top_>
+)
 
 export default withRouter(NavMenu)

src/containers/app/private-route.js

@@ -3,7 +3,7 @@ import connect from './connect'
 import {Redirect, Route} from 'react-router-dom'
 
 const destUrl = props => ({
-  pathname: `/log-in`,
+  pathname: `/login`,
   state: {from: props.location.pathname}
 })
 

src/containers/app/routes.js

@@ -1,7 +1,7 @@
-import LogIn from 'containers/log-in'
+import LogIn from 'containers/login'
 import NotFound from 'components/not-found'
-import Notifications from 'containers/notifications'
 import PrivateRoute from './private-route'
+import Profile from 'containers/profile'
 import React from 'react'
 import Review from 'containers/review'
 import Search from 'containers/search'
@@ -10,13 +10,13 @@ import {Redirect, Route, Switch} from 'react-router-dom'
 
 const Routes = () => (
   <Switch>
-    {/* TODO: If user is authenticated, redirect should be to /review instead of search */}
-    <Redirect from="/" to="search" exact/>
+    <Redirect from="/" to="/review" exact/>
     <Route path="/review" component={Review}/>
     <Route path="/search" component={Search}/>
-    <Route path="/log-in" component={LogIn}/>
+    <Route path="/login" component={LogIn}/>
     <Route path="/sign-up" component={SignUp}/>
-    <PrivateRoute path="/notifications" component={Notifications}/>
+    <Route path="/forgot-password" component={NotFound}/>
+    <PrivateRoute path="/profile" component={Profile}/>
     <Route component={NotFound}/>
   </Switch>
 )