Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
App Frameworks Architecting a React Application
import React, { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, Route, history } from "react-router-dom";
import {
starWarsCharacterSelector,
starWarsCharactersLoadingSelector
} from "./selectors";
import { actions } from "./selectors";
import Spinner from "./Spinner";
import Modal from "./Modal";
import css from "./css";
export const StarWarsCharacters = () => {
const characters = useSelector(starWarsCharacterSelector);
const loading = useSelector(starWarsCharactersLoadingSelector);
const dispatch = useDispatch();
const [newCharacterFormValues, setNewCharacterFormValues] = useState({
name: "",
age: 0,
isJedi: false
});
async function handleSubmit() {
await dispatch(actions.createCharacter(newCharacterFormValues));
history.back();
}
if (!characters) dispatch(actions.getCharacters());
if (loading) return <Spinner />;
return (
<div className={css.wrapper}>
<ul>
{characters.map((c) => (
<li>
{c.name} - {c.age} - {c.isJedi}
</li>
))}
</ul>
<div className={css.actions}>
<Link to="create">Create Character</Link>
</div>
<Route
exact="characters/create"
render={() => (
<Modal>
<form onSubmit={handleSubmit}>
<input
value={newCharacterFormValues.name}
onChange={(e) =>
setNewCharacterFormValues((v) => ({
...v,
name: e.target.value
}))
}
/>
<input
value={newCharacterFormValues.age}
onChange={(e) =>
setNewCharacterFormValues((v) => ({
...v,
age: e.target.value
}))
}
/>
<input
checked={newCharacterFormValues.isJedi}
type="checkbox"
onChange={(e) =>
setNewCharacterFormValues((v) => ({
...v,
isJedi: e.target.value
}))
}
/>
<button type="submit">Create</button>
</form>
</Modal>
)}
/>
</div>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment