# Modern React with Redux

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

ReactDOM.render(<App />, document.querySelector('#root'));

import React from 'react';

class App extends React.Component {
  render() {
    return <div>App</div>
  }
}

export default App;

import React from 'react';

class App extends React.Component {

  state = { resource: 'posts'};

  render() {
    return (
      <div>
        <div>
          <button onClick={() => this.setState({ resource: 'posts'})}>Posts</button>
          <button onClick={() => this.setState({ resource: 'todos'})}>Todos</button>
        </div>
        {this.state.resource}
      </div>
    )
  }
}

export default App;

import React, {useState} from 'react';

const App = () => {
  // First element of the array is the name of the state value
  // Second element of the array is the name of the function used to update the state value
  // We initialize the `resource` value with `posts
  const [resource, setResource] = useState('posts');
  return (
    <div>
      <div>
        <button onClick={() => setResource('posts')}>Posts</button>
        <button onClick={() => setResource('todos')}>Todos</button>
      </div>
      {resource}
    </div>
  );
}

export default App;

import React from 'react';

class ResouceList extends React.Component {

  render() {
    return <div>{this.props.resource}</div>
  }
}

export default ResouceList;

import React, {useState} from 'react';
import ResourceList from './ResourceList';

const App = () => {
  // First element of the array is the name of the state value
  // Second element of the array is the name of the function used to update the state value
  // We initialize the `resource` value with `posts
  const [resource, setResource] = useState('posts');
  return (
    <div>
      <div>
        <button onClick={() => setResource('posts')}>Posts</button>
        <button onClick={() => setResource('todos')}>Todos</button>
      </div>
      <ResourceList resource={resource} />
    </div>
  );
}

export default App;

import React from 'react';
import axios from 'axios';

class ResouceList extends React.Component {

  state = { resources: [] };

  async componentDidMount() {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/${this.props.resource}`)
    this.setState({ resources: response.data });
  }

  async componentDidUpdate(prevProps) {
    if (prevProps.resource !== this.props.resource) {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/${this.props.resource}`)
      this.setState({ resources: response.data });
    }
  }

  render() {
    return <div>{this.state.resources.length}</div>
  }
}

export default ResouceList;

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const ResouceList = ({resource}) => {

  const [resources, setResources] = useState([]);

  const fecthResource = async (resource) => {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/${resource}`)
    setResources(response.data);
  }

  // The second argument indicates the value that when it is updated it forces the funtion to be called
  // Inside useEffect you always has to define function that is going to be called
  useEffect(() => {
    fecthResource(resource)
  }, [resource])

  return <div>{resources.length}</div>
}

export default ResouceList;

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const ResouceList = ({resource}) => {

  const [resources, setResources] = useState([]);

  useEffect(() => {
    (async (resource) => {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/${resource}`)
      setResources(response.data);
    })(resource);
  }, [resource])

  return <div>{resources.length}</div>
}

export default ResouceList;

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const ResouceList = ({resource}) => {

  const [resources, setResources] = useState([]);

  // The second argument indicates the value that when it is updated it forces the funtion to be called
  // Inside useEffect you always has to define function that is going to be called
  useEffect(() => {
    (async (resource) => {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/${resource}`)
      setResources(response.data);
    })(resource);
  }, [resource])

  return <ul>{resources.map(record => <li key={record.id}>{record.title}</li>)}</ul>
}

export default ResouceList;

import React, {useState, useEffect} from 'react';
import axios from 'axios';

const useResources = (resource) => {
  const [resources, setResources] = useState([]);

  useEffect(() => {
    (async (resource) => {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/${resource}`)
      setResources(response.data);
    })(resource);
  }, [resource])

  return resources;
}

const ResouceList = ({resource}) => {

  const resources = useResources(resource);

  return <ul>{resources.map(record => <li key={record.id}>{record.title}</li>)}</ul>
}

export default ResouceList;

import {useState, useEffect} from 'react';
import axios from 'axios';


const useResources = (resource) => {
  const [resources, setResources] = useState([]);

  useEffect(() => {
    (async (resource) => {
      const response = await axios.get(`https://jsonplaceholder.typicode.com/${resource}`)
      setResources(response.data);
    })(resource);
  }, [resource])

  return resources;
}

export default useResources;

import React from 'react';
import useResources from './useResources'

const ResouceList = ({resource}) => {

  const resources = useResources(resource);

  return <ul>{resources.map(record => <li key={record.id}>{record.title}</li>)}</ul>
}

export default ResouceList;

import React from 'react';
import useResources from './useResources'

const UserList = () => {

  const users = useResources('users');

  return <ul>{users.map(user => <li key={user.id}>{user.name}</li>)}</ul>
}

export default UserList;

import React, {useState} from 'react';
import ResourceList from './ResourceList';
import UserList from './UserList';

const App = () => {
  // First element of the array is the name of the state value
  // Second element of the array is the name of the function used to update the state value
  // We initialize the `resource` value with `posts
  const [resource, setResource] = useState('posts');
  return (
    <div>
      <UserList />
      <div>
        <button onClick={() => setResource('posts')}>Posts</button>
        <button onClick={() => setResource('todos')}>Todos</button>
      </div>
      <ResourceList resource={resource} />
    </div>
  );
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './SeasonDisplay';
import Spinner from './Spinner';

class App extends React.Component {
  state = { lat: null, errorMessage: '' };

  componentDidMount() {
    window.navigator.geolocation.getCurrentPosition(
      position => this.setState({ lat: position.coords.latitude }),
      err => this.setState({ errorMessage: err.message })
    );
  }

  renderContent() {
    if (this.state.errorMessage && !this.state.lat) {
      return <div>Error: {this.state.errorMessage}</div>;
    }

    if (!this.state.errorMessage && this.state.lat) {
      return <SeasonDisplay lat={this.state.lat} />;
    }

    return <Spinner message="Please accept location request" />;
  }

  render() {
    return <div className="border red">{this.renderContent()}</div>;
  }
}

ReactDOM.render(<App />, document.querySelector('#root'));

import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './SeasonDisplay';
import Spinner from './Spinner';

const  App = () => {
  const [lat, setLat] = useState(null);
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    window.navigator.geolocation.getCurrentPosition(
      position => setLat(position.coords.latitude),
      err => setErrorMessage(err.message)
    );
  }, [])

  let content;
  if (errorMessage) {
    content = <div>Error: {errorMessage}</div>;
  } else if (lat) {
    content = <SeasonDisplay lat={lat} />;
  } else {
    content = <Spinner message="Please accept location request" />;
  }

  return <div className="border red">{content}</div>;
}

ReactDOM.render(<App />, document.querySelector('#root'));

import { useState, useEffect } from 'react';

const useLocation = () => {
  const [lat, setLat] = useState(null);
  const [errorMessage, setErrorMessage] = useState('');

  useEffect(() => {
    window.navigator.geolocation.getCurrentPosition(
      position => setLat(position.coords.latitude),
      err => setErrorMessage(err.message)
    );
  }, [])  

  //return { lat, errorMessage };
  // Community convention is to use an array
  return [lat, errorMessage];
}

export default useLocation;

import React from 'react';
import ReactDOM from 'react-dom';
import SeasonDisplay from './SeasonDisplay';
import Spinner from './Spinner';
import useLocation from './useLocation';

const  App = () => {

  //const { lat, errorMessage } = useLocation();
  // Community convention is to use an array
  const [lat, errorMessage] = useLocation();

  let content;
  if (errorMessage) {
    content = <div>Error: {errorMessage}</div>;
  } else if (lat) {
    content = <SeasonDisplay lat={lat} />;
  } else {
    content = <Spinner message="Please accept location request" />;
  }

  return <div className="border red">{content}</div>;
}

ReactDOM.render(<App />, document.querySelector('#root'));