Initial boilerplate migration to Typescript #62

gomezhyuuga · 2018-07-07T17:49:56Z

I'll be working with Typescript so I migrated my codebase to react-scripts-ts

Next, I'll be working on the routing.

Adding Meyer's CSS reset to the index

- Don't check too strictly variable names - Ignore unused locals (due to react global import, it was always warning that it wasn't used)

Defined two routes: - /home - /favs Default redirect to /home

In order to enable ES5 iteration support used by Redux Saga

Adding boilerplate files for Redux Saga implementation.

API#getTrending() API#search(query: string)

Interface for a GIF Object, more details about the schema in: https://developers.giphy.com/docs/#rendition-guide

Example using raw Component State

Implementation of FETCHED_TRENDING and FETCH_TRENDING

Just convert the favs object into an array and reuse GIFList. The Fav button also works out-of-the-box :)

Use a Middleware to store in localStorage each time the state changes.

Implemented Search into a Saga and into the Component

See `reducers` and FavsSearch component

Creation of Component*.style.ts files

timgivois · 2018-07-10T22:25:13Z

src/components/AppNav.tsx

+`;
+
+const LINKS = ROUTES.map(({path, content}) =>
+    <li key={path}><NavLink  activeClassName="active" to={path}>{content}</NavLink></li>);


try to avoid classNames

Thanks...
What could be a workaround in this case for the React Router NavLink?

you can create NavLink with style using styled components. https://www.styled-components.com/docs/basics#styling-any-components

timgivois · 2018-07-10T22:26:19Z

src/index.tsx

+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import App from './App';
+import './normalize.css';


maybe a good injectGlobal use case

Even for vendor content?

bgilm · 2018-07-11T20:28:46Z

src/App.tsx

+            <Header />
+            <section>
+            <Switch>
+              {ROUTES.map(({path, component, exact}) =>


For this specific case where we have few routes that are at the same level the benefit may not be that obvious, but remember that the mindset of React-router 4 is making routing dynamic instead of static. When defining your routes on a separate file you are still approaching this in a static way.

Alright, should I move them to this single file?
Although, the dynamic routing could still be used in any other file connecting with router right?
I'm used to use single-file definitions for routes at the same level and use multiple files (dynamic) for nested routes or with a different context.

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

src/api.ts

+import axios from 'axios';
+
+const API_URL = "https://api.giphy.com/v1/gifs";
+const API_KEY = process.env.REACT_APP_GIPHY_KEY;


timgivois · 2018-07-11T21:42:25Z

src/styles/App.global.ts

+	h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
+
+	/* HELPERS */
+	.center { text-align: center }


this could be a styled component

- Test rendering the favorites in the store - Test rendering only those who match the filter

Robfz · 2018-07-12T19:13:23Z

src/actions/gifs.ts

@@ -0,0 +1,21 @@
+import { createAction } from 'redux-actions'


Robfz · 2018-07-12T19:15:03Z

src/middleware/autosave.ts

@@ -0,0 +1,12 @@
+import { Store, Action } from "redux";
+
+const autosave = (store: Store) => (next: any) => (action: Action) => {


gomezhyuuga added 24 commits July 7, 2018 12:45

Initial boilerplate migration to Typescript

cedf7a1

Adding CSS Normalize

cbef533

Put CSS Reset in index.css

948f236

Adding Meyer's CSS reset to the index

Adjustments of TSLint variable names rules

1494b63

- Don't check too strictly variable names - Ignore unused locals (due to react global import, it was always warning that it wasn't used)

Initial Routing implementation, see routes.ts

7697488

Defined two routes: - /home - /favs Default redirect to /home

TSLint Rule: ignore console logs warning

5b50ea1

ADD: TSConfig downlevelIteration: true

40f1d7c

In order to enable ES5 iteration support used by Redux Saga

Initial Redux Saga Boilerplate

d715db1

Adding boilerplate files for Redux Saga implementation.

.gitignore .env file

b988f3b

Initial Redux markup: Wrapping app into Provider

328279c

Iniital action: FETCH_TRENDING

c1c7bc6

Giphy API functions getTrending(), search()

3a7277f

API#getTrending() API#search(query: string)

GIF interface definition

645fd63

Interface for a GIF Object, more details about the schema in: https://developers.giphy.com/docs/#rendition-guide

Initial GIFList Component

332df35

Example using raw Component State

Enable Redux Chrome Extension

f1dd63d

Extra CSS Base Styling

19f4f7b

HomeView using Redux/Saga see reduces/index.ts

bfe89fa

Implementation of FETCHED_TRENDING and FETCH_TRENDING

Favorite function completed

ec566bf

Favorite View completed

7ea9c68

Just convert the favs object into an array and reuse GIFList. The Fav button also works out-of-the-box :)

LocalStorage implementation

98dcd6f

Use a Middleware to store in localStorage each time the state changes.

Search functionality

0327be2

Implemented Search into a Saga and into the Component

Favs Search implemented

a8a36d1

See `reducers` and FavsSearch component

General styling improvements

6ae00f7

Styling migration to lecture best practices

d478cde

Creation of Component*.style.ts files

timgivois reviewed Jul 10, 2018

View reviewed changes

Initial tests for FavButton.tsx and App.tsx

dc9b9e4

bgilm reviewed Jul 11, 2018

View reviewed changes

src/api.ts

import axios from 'axios';

const API_URL = "https://api.giphy.com/v1/gifs";

const API_KEY = process.env.REACT_APP_GIPHY_KEY;

Copy link

bgilm Jul 11, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

timgivois reviewed Jul 11, 2018

View reviewed changes

gomezhyuuga added 10 commits July 12, 2018 00:00

FavButton tests

101e772

GIFList tests

711a11b

API Tests

470aeef

Search tests

b7e684a

Fixed static typing

645d330

Improved test for GIFList

c252675

Ignore src/index.tsx due to be boilerplate

28d0b91

Improved Search test

45a775d

FavsView.tsx tested

14c3e86

- Test rendering the favorites in the store - Test rendering only those who match the filter

Redux Action Creators testing

0f2fd6c

Robfz reviewed Jul 12, 2018

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Initial boilerplate migration to Typescript #62

Initial boilerplate migration to Typescript #62

gomezhyuuga commented Jul 7, 2018

timgivois Jul 10, 2018

gomezhyuuga Jul 11, 2018

timgivois Jul 11, 2018

gomezhyuuga Jul 11, 2018

timgivois Jul 10, 2018

gomezhyuuga Jul 12, 2018

bgilm Jul 11, 2018

gomezhyuuga Jul 11, 2018

bgilm Jul 11, 2018

timgivois Jul 11, 2018

Robfz Jul 12, 2018

Robfz Jul 12, 2018

		@@ -0,0 +1,21 @@
		import { createAction } from 'redux-actions'

		@@ -0,0 +1,12 @@
		import { Store, Action } from "redux";

		const autosave = (store: Store) => (next: any) => (action: Action) => {

Initial boilerplate migration to Typescript #62

Are you sure you want to change the base?

Initial boilerplate migration to Typescript #62

Conversation

gomezhyuuga commented Jul 7, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment