/
Project.jsx
52 lines (44 loc) · 1.04 KB
/
Project.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { getProject } from 'App/redux/reducers/projects';
function ProjectsDropdown() {
const { id } = useParams();
const { projects } = useSelector(state => state.projects);
return (
<select defaultValue={id}>
{projects.map(project => {
return (
<option key={project.id} value={project.id}>
{project.name}
</option>
);
})}
</select>
);
}
function ProjectDetails() {
const { id } = useParams();
const dispatch = useDispatch();
const { projectDetails } = useSelector(state => state.projects);
useEffect(() => {
dispatch(getProject(id));
}, [id]);
if (!projectDetails[id]) return <h1>Loading project: {id}</h1>;
const details = projectDetails[id];
return (
<div>
<h1>{details.name}</h1>
<p>{details.description}</p>
</div>
);
}
function Project() {
return (
<div>
<ProjectsDropdown />
<ProjectDetails />
</div>
);
}
export default Project;