First Delevery by alfruiz · Pull Request #73 · wizelineacademy/react-series-challenge

alfruiz · 2018-07-09T03:59:21Z

DONE !!

Redux ( actions / reducers / middleware / selectors / store )
Redux-saga (localStorage & axios)
React Router ( BrowserHistory / Route / Switch / Redirect )
JEST ( Enzyme / redux-mock-store / Snaptshots / redux "actions & reducers" / redux-saga )
Styled Component ( with classes / Own styled / jest / snaptshops / injectGlobal )
React 16 ( Error boundary / Fragments)

Final .... Here is the Coverage -- at least 70%

@timgivois @Robfz @bgilm
Thanks for the comments all the teaching , support & and all =)

bgilm · 2018-07-10T17:33:35Z

+
+
+###### IMPORTANT KEYS ######
+YOUR_API_KEY=BtpjCc5CrNS0nxVvRcC8PDz2u3KeW8Bq


I guess this is not your actual key, right?

Yep, I didnt know if you need it so I just copy on .env
Should I removed?

Yeah remove it, with the name variable is enough to know we should use the key.

bgilm · 2018-07-10T17:36:44Z

+      <Switch>
+        <Route path="/keeps"  component={Keeps} />
+        <Route path="/" component={Home} />
+        <Redirect to="/" />


It is a good practice to send the object on the redirect so you can let the user know what happened before the redirect.

bgilm · 2018-07-10T17:38:28Z

-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
-      </div>
+      <React.Fragment>


bgilm · 2018-07-11T21:20:56Z

+      <Switch>
+        <Route path="/home" component={Home} />
+        <Route path="/keeps"  component={Favorites} />
+        <Redirect to={{


timgivois · 2018-07-11T21:21:15Z

+import './footer.css';
+
+const Footer = () => (
+  <footer className="footer">


use styled components not css

timgivois · 2018-07-11T21:21:22Z

@@ -0,0 +1,11 @@
+import React from "react";
+
+import './footer.css';


use styled-components

bgilm · 2018-07-11T21:21:47Z

+
+const App = ({ ...props }) => {
+  return (
+    <React.Fragment>


bgilm · 2018-07-11T21:29:29Z

@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+
+import './giphys.css';


Styled components

bgilm · 2018-07-11T21:32:23Z

+const Navegation = () => (
+  <header>
+    <ul>
+      <li><NavLink to="/home" activeclass="active">HOME</NavLink></li>


You can style any component with styledcomponents, avoid using classname.

Robfz · 2018-07-12T19:44:43Z

+        let url = `${baseUrl}${word.length > 0 ? 'search' : 'trending'}?api_key=${process.env.YOUR_API_KEY}&limit=10&rating=G${query}`;
+        const data = yield call(fetchData, url);
+
+        yield put({ type: actions.FETCH_DATA, payload: { data } });


Use action creators for this.

Robfz · 2018-07-12T20:09:32Z

+
+      return newState;
+    }
+    case actions.LOCALSTORAGE_MODIFY: {


I would suggest you to invert the data flow regarding the store and localStorage. You should first store the favorites in the Store and have a subscription/saga/middleware hearing the proper actions to just dump the state to localStorage when needed.

Actually if you check after LOCALSTORAGE_MODIFY redux saga runs localModifyStorage
whichs inject that in the window.localStorage

check inside sagas folder: local.js
localModifyStorage generator

Robfz · 2018-07-12T20:10:36Z

+const fetch_word = state => state.fetch.word;
+
+// LOCAL
+const local = state => state.local;


I would suggest you to have more descriptive names.

Got IT @Robfz

timgivois · 2018-07-12T20:56:10Z

    "lint": "eslint ./",
-    "test": "yarn lint && yarn jest",
-    "jest": "react-scripts test --env=jsdom --coverage"
+    "test": "yarn lint && yarn jest  --watch",


you shouldn't change this things

I only add watch to avoid strating this all the time @timgivois

timgivois · 2018-07-12T21:01:18Z

You changed all the jest configuration. Had to change it again to make it work.

alfruiz added 18 commits July 7, 2018 11:46

install packages & set react-router

68dc4be

adding inital config for redux / redux-saga

af7a6a3

updating middleware & removing service worker

39c50a0

remove some files & starting the LS watch with redux saga

b99c4d6

update package to read localStorage with redux-saga

9aeb4c7

start working again

2409855

updating the fetch watcher

3ee7d40

divided and conquer

41bdffd

staring local watcher

02ea5b1

issue detected, not refreshing

34ddf7f

passing everything to master branch

fd35d85

update readme

840af6a

bug fixed

7146031

uncoment loger middleware

2421a85

final styling

9f4ea2c

update code

437716d

reset search bar on favorites

5c6f259

update title

ac534a6

bgilm reviewed Jul 10, 2018

View reviewed changes

alfruiz added 3 commits July 10, 2018 20:15

update routes

e1667d8

updates & initial test

cb991b3

components tests

088df8e

bgilm reviewed Jul 11, 2018

View reviewed changes

timgivois reviewed Jul 11, 2018

View reviewed changes

bgilm reviewed Jul 11, 2018

View reviewed changes

alfruiz added 12 commits July 11, 2018 16:50

update testing components

be563fe

updting testing for header

27c7d5e

updating gil

e000879

update styling

f23b307

update test with snaptshot

25470c7

updating components test

3c1bcda

add loger again

f9a570a

updating test for redux reducers

eefa305

local reducer test

882b7ec

updating fetch reducer test

87bf164

updating gloabal

5cf7370

update test for sagas local

de7d3cc

Robfz reviewed Jul 12, 2018

View reviewed changes

timgivois reviewed Jul 12, 2018

View reviewed changes

alfruiz added 5 commits July 12, 2018 16:33

updating actions on redux-saga

4fb4f1f

updating tests

814f15a

updating test & error boundry

cf98662

update css

0c5071b

update snaptshots

a732237



		###### IMPORTANT KEYS ######
		YOUR_API_KEY=BtpjCc5CrNS0nxVvRcC8PDz2u3KeW8Bq

		@@ -0,0 +1,11 @@
		import React from "react";

		import './footer.css';

		@@ -0,0 +1,42 @@
		import React, { Component } from "react";

		import './giphys.css';

Uh oh!

Conversation

alfruiz commented Jul 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alfruiz Jul 10, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alfruiz Jul 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

alfruiz Jul 12, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

timgivois commented Jul 12, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

alfruiz commented Jul 9, 2018 •

edited

Loading

alfruiz Jul 10, 2018 •

edited

Loading

alfruiz Jul 12, 2018 •

edited

Loading

alfruiz Jul 12, 2018 •

edited

Loading