Feature/mini challenge4

[fernandaMadin]

No description provided.

[wdonet]

Revision of Acceptance Criteria

• The search term is stored and retrieved from the Global Context correctly.
• The appearance theme is stored on the Global Context and applied correctly to the App UI.
• useReducer hook is implemented correctly to manage the Global State.

Revision of Bonus Points

• Testing coverage is above 70%. (Please include a screenshot of the code coverage report in your PR description).
  • Note: It is not great but you are still over 60% - so good job so far

I was unable to see it running, but I evaluate it based on the provided code and looks pretty good. You're doing a good job so far 👌🏽 - just keep the same effort till the end. I added several suggestions, to make you think if it would be better to implement them or not.

[wdonet]

Now that you're using dotenv, this .env file is not intended to be uploaded into your repo. Otherwise the API key is still public and we want to avoid it.

You can, for example, have a .env.example file with the variables but not values like:

Suggested change

	REACT_APP_API_KEY=AIzaSyCbnwRIBvWCoQGaLIOFUx4rhLHg-Sb1a8s
	REACT_APP_API_KEY=

Then keep .env file locally for you only. You can have it listed at the .gitignore for not allowing anyone in the team to push it into the repository accidentally.

[wdonet]

❤️ cool - you can also move the JSX for logIn/out components to their own file and just import them here.

[wdonet]

It seems correctly coded but have a few questions for you to think about:

1. Is there a specific reason for using 2 providers?
2. Is it doable with a single provider?
3. If so, can it be more readable for you or others?

[wdonet]

I do not see where the htmlFor is consumed

[wdonet]

❤️ cool :)

[wdonet]

💯 nice test

[wdonet]

I've seen this pattern frenquently. You can have it extracted as a general fn as an utility to be reused at several styled component case like:

// at /util/styleUtils.js
export const getThemeField = fieldName => ({ theme }) => theme[fieldName];
export const getThemeText = getThemeField('text');
export const getThemeContent = getThemeField('content');

// Then at this line:
color: ${getThemeText};
// At the line below:
background-color: ${getThemeContent};

[wdonet]

If the code results strange or difficult to follow, check more about currying and decide if keep it or leave it

[wdonet]

Use a default for destructured object id, othwerwise you could get rendering errors here

[wdonet]

See how payload value is hold into word at the internal state of the reducer. So you might make easier reading on your code if you give meaningful names to your variables providede to the reducer users

Suggested change

	const SearchWordReducer = (state, action) => {
	switch (action.type) {
	case 'SET_WORD':
	return { ...state, word: action.payload };
	default:
	return state;
	}
	};
	const SearchWordReducer = (state, action) => {
	const { type, word } = action;
	switch (type) {
	case 'SET_WORD':
	return { ...state, word };
	default:
	return state;
	}
	};

[wdonet]

Same here about naming your action content:

Suggested change

	const ThemeReducer = (stateTheme, action) => {
	switch (action.type) {
	case 'SET_THEME':
	return { ...stateTheme, theme: action.payload };
	default:
	return stateTheme;
	}
	};
	const ThemeReducer = (stateTheme, action) => {
	const { type, theme } = action;
	switch (type) {
	case 'SET_THEME':
	return { ...stateTheme, theme };
	default:
	return stateTheme;
	}
	};