aneagoie / robofriends

Tutorial for ZTM course - React

robofriends

Tutorial for React To run the project:

1. Clone this repo
2. Run npm install
3. Run npm start

visist https://zerotomastery.io/ for more

robofriends's Issues

Fix cardlist component, please.

Hello Andrei,
I guess in cardlist component the "robots[i]" is bad practice :) .
It's better to be "user" instead.

At last, you're one the best Instructor i've seen in my life <3 i love you bro <3,
and I hope to some day to meet with you <3
sorry for my bad english... :)

Love from india

There is no issue☺️

TypeError: Cannot read property 'filter' of undefined

something wrong

I've used this files as a basement for setup redux as it shown in tutorials, but, there is might me some misconceptions, because the purpose way isn't working. I did all as in tutorial and even download this folder and make redux setup from scratch, but there is an error with searchRobots variable.
`typeError: Cannot read property 'searchField' of undefined
Function.mapSateToProps [as mapToProps]
src/containers/App.js:12
9 |
10 | const mapSateToProps = state => {
11 | return {

12 | searchField: state.searchRobots.searchField
13 | }
14 | }`

Robo

class App extends component issue

Hi Aneagoie, can you help?

My Robofriends app isn't opening on the web. I don't know what may be the problem. Can you help?

Scroll Problem

-<-div style="overflow: scroll; border: 5px solid black; height: 800px;"->-

This style scroll that you used is causing problems in the app, for people who use Firefox browsers it creates two scroll bars, one vertical and one horizontal.

To solve this, just replace the code above with this:

-<-div style="overflow-y: scroll; border: 5px solid black; height: 800px;"->-

only change de overflow for overflow-y, this change can fixe de problem...

passing several store enhancers to createStore().

[OS]=LINUX(UBUNTU)
BROWSER:CHROME

Hi @aneagoie
Actually I am trying to complete your webdev course and i am having a hard time completing the react part. It is my first steps with react. On passing multiple stores, i have this notification:

"Error: It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function."
`const rootReducer = combineReducers({ searchRobots, requestsRobots });

const store = createStore(
rootReducer,
searchRobots,
applyMiddleware(thunkMiddleware, logger)
);
ReactDOM.render(
<React.StrictMode>



</React.StrictMode>,
document.getElementById("root")
);
serviceWorker.unregister();
`
Thanks in advance for helping.

images are missing

Cloned the github without an issue but the robot images are not displaying?

Error when

I am trying to serve the robofriends on the gh-pages for some reason I am not sure what I am doing wrong but it keeps throwing the error below, I have created the repository in Github and followed the commands but I am sure its something very silly I am not doing right. can you kindly help, please. thanks

Gifteds-MacBook-Pro:robofriends designunleash$ echo "# robofriends" >> README.md
Gifteds-MacBook-Pro:robofriends designunleash$ git init
Reinitialized existing Git repository in /Users/designunleash/Desktop/robofriends/.git/
Gifteds-MacBook-Pro:robofriends designunleash$ git add README.md
Gifteds-MacBook-Pro:robofriends designunleash$ git commit -m "first commit"
[main f9aeef0] first commit
1 file changed, 1 insertion(+)
Gifteds-MacBook-Pro:robofriends designunleash$ git branch -M main
Gifteds-MacBook-Pro:robofriends designunleash$ git remote add origin https://github.com/Quartelai/robofriends.git
fatal: remote origin already exists.
Gifteds-MacBook-Pro:robofriends designunleash$ git push -u origin main
ERROR: Repository not found.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights
and the repository exists.

Provider Not passing store

When i run this

'undefined'

when i run with 'this.prop.store.getState()'

this happens

kindly help

.. but when i do < App store={store} /> without Provider, everything works fine

CORS policy: No 'Access-Control-Allow-Origin'

Hi Andrei today I deploy my app (for the proyect with react robofriends) in Github but the pages doesn't load, I view the console and I found this problem and Is the same in this app:
Access to fetch at 'https://jsonplaceholder.typicode.com/users' from origin 'https://aneagoie.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

TypeError: Cannot read property 'state' of undefined

Hey Sorry I'm kind of new can you help me with this it can't read the property of state as it says so here is my code

`class App extends Component{
constructor(){
super()
this.state ={
robots:robots,
searchfield:''
}
}
onSearchChange(event){

    const filteredRobots= this.state.robots.filter(robot=>{
        return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
    })
    console.log(filteredRobots);
}

render (){  
    return(
    <div className="tc">
        <SearchBox searchChange={this.onSearchChange}/>
        <CardList robots={this.state.robots}/>
    </div>
    );
}

}
export default App;`

Search Box not working

The search box fails to filter.
render(){
const filteredRobots = this.state.robots.filter(robots =>{
return robots.name.toLowerCase().includes(this.state.searchfield.toLowerCase());

	})

this part of the code could not be reach

Cards are rendering with different sizes

The card list component is rendering with different sizes (as per the name length). I guess we need to add some CSS to fix width of card for the card list component. please see the attachments for the clarity.

Error in adding ErrorBoundry

Getting "TypeError : instance.render is not a function" on adding ErrorBoundry
This is the code in my App.js file

import React, {Component} from 'react';
import Cardlist from '../components/Cardlist';
import SearchBox from '../components/SearchBox';
import Scroll from '../components/Scroll';
import ErrorBoundry from '../components/ErrorBoundry';
import './App.css'; 

class App extends Component {
	constructor() {
		super()
		this.state={
			robots: [],
			searchfield: ''
		}
	}

	componentDidMount() {
		fetch('https://jsonplaceholder.typicode.com/users')
		.then(response=> response.json())
		.then(users=> {this.setState({robots: users})});
	}

	onSearchChange = (event) => {
		this.setState({searchfield: event.target.value})
	}
	render(){
		const { robots,searchfield }= this.state;
		const filteredRobots=robots.filter(robot=> {
			return robot.name.toLowerCase().includes(searchfield.toLowerCase());

		})
		return !robots.length ?
			<h1> Loading </h1>:
			(
			
				<div className='tc'>
					<h1>RoboFriends</h1>
					<SearchBox searchChange={this.onSearchChange}/>
					<Scroll>
						<ErrorBoundry>
							<Cardlist robots={filteredRobots}/>
						</ErrorBoundry>
					</Scroll>
				</div>
			);
			
	}
}
export default App;

And this is in my ErrorBoundry.js file

import React, { Component } from 'react';

class ErrorBoundry extends Component {
	constructor(props) {
		super(props);
		this.state={
			hasError: false
		}
	}


	componentDidCatch (error,info) {
		this.setState({ hasError:true })
	}


	rendor() {
		if(this.state.hasError){
			return<h1>Ooooops. That is not good</h1>
		}
		return this.props.children
	}
}
export default ErrorBoundry;

it should be robots = robots,

I did run the code using the above code, but it was not working, I think it should be robots = robots,