Task Management
This commit is contained in:
Chantha
commit
51ed3a31a0
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
36
package.json
Normal file
36
package.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"name": "rocketfy",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"immer": "^3.1.3",
|
||||
"react": "^16.8.6",
|
||||
"react-dnd": "^9.3.2",
|
||||
"react-dnd-html5-backend": "^9.3.2",
|
||||
"react-dom": "^16.8.6",
|
||||
"react-icons": "^3.7.0",
|
||||
"react-scripts": "3.0.1",
|
||||
"styled-components": "^4.3.2"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
13
public/index.html
Normal file
13
public/index.html
Normal file
@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<title>Rocketfy</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
21
src/App.js
Normal file
21
src/App.js
Normal file
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { DndProvider } from 'react-dnd';
|
||||
import HTML5Backend from 'react-dnd-html5-backend';
|
||||
|
||||
import GlobalStyle from './styles/global';
|
||||
|
||||
import Header from './components/Header';
|
||||
import Board from './components/Board';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<DndProvider backend={HTML5Backend}>
|
||||
<Header />
|
||||
<Board />
|
||||
|
||||
<GlobalStyle />
|
||||
</DndProvider>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
3
src/components/Board/context.js
Normal file
3
src/components/Board/context.js
Normal file
@ -0,0 +1,3 @@
|
||||
import { createContext } from 'react';
|
||||
|
||||
export default createContext({});
|
||||
34
src/components/Board/index.js
Normal file
34
src/components/Board/index.js
Normal file
@ -0,0 +1,34 @@
|
||||
import React, { useState } from 'react';
|
||||
import produce from 'immer';
|
||||
|
||||
import { loadLists } from '../../services/api';
|
||||
|
||||
import BoardContext from './context';
|
||||
|
||||
import List from '../List';
|
||||
|
||||
import { Container } from './styles';
|
||||
|
||||
const data = loadLists();
|
||||
|
||||
export default function Board() {
|
||||
const [lists, setLists] = useState(data);
|
||||
|
||||
function move(fromList, toList, from, to) {
|
||||
setLists(produce(lists, draft => {
|
||||
const dragged = draft[fromList].cards[from];
|
||||
|
||||
draft[fromList].cards.splice(from, 1);
|
||||
draft[toList].cards.splice(to, 0, dragged);
|
||||
}))
|
||||
}
|
||||
|
||||
return(
|
||||
|
||||
<BoardContext.Provider value={{ lists, move }}>
|
||||
<Container>
|
||||
{lists.map((list, index) => <List key={list.title} index={index} data={list} />)}
|
||||
</Container>
|
||||
</BoardContext.Provider>
|
||||
);
|
||||
}
|
||||
7
src/components/Board/styles.js
Normal file
7
src/components/Board/styles.js
Normal file
@ -0,0 +1,7 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Container = styled.div`
|
||||
display: flex;
|
||||
padding: 30px 0;
|
||||
height: calc(100% - 80px);
|
||||
`;
|
||||
64
src/components/Card/index.js
Normal file
64
src/components/Card/index.js
Normal file
@ -0,0 +1,64 @@
|
||||
import React, { useRef, useContext } from 'react';
|
||||
import { useDrag, useDrop } from 'react-dnd';
|
||||
|
||||
import BoardContext from '../Board/context';
|
||||
|
||||
import { Container, Label } from './styles';
|
||||
|
||||
export default function Card({ data, index, listIndex }) {
|
||||
const ref = useRef();
|
||||
const { move } = useContext(BoardContext);
|
||||
|
||||
const [{ isDragging }, dragRef] = useDrag({
|
||||
item: { type: 'CARD', index, listIndex },
|
||||
collect: monitor => ({
|
||||
isDragging: monitor.isDragging(),
|
||||
}),
|
||||
});
|
||||
|
||||
const [, dropRef] = useDrop({
|
||||
accept: 'CARD',
|
||||
hover(item, monitor) {
|
||||
const draggedListIndex = item.listIndex;
|
||||
const targetListIndex = listIndex;
|
||||
|
||||
const draggedIndex = item.index;
|
||||
const targetIndex = index;
|
||||
|
||||
if (draggedIndex === targetIndex && draggedListIndex === targetListIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetSize = ref.current.getBoundingClientRect();
|
||||
const targetCenter = (targetSize.bottom - targetSize.top) / 2;
|
||||
|
||||
const draggedOffset = monitor.getClientOffset();
|
||||
const draggedTop = draggedOffset.y - targetSize.top;
|
||||
|
||||
if (draggedIndex < targetIndex && draggedTop < targetCenter) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (draggedIndex > targetIndex && draggedTop > targetCenter) {
|
||||
return;
|
||||
}
|
||||
|
||||
move(draggedListIndex, targetListIndex, draggedIndex, targetIndex);
|
||||
|
||||
item.index = targetIndex;
|
||||
item.listIndex = targetListIndex;
|
||||
}
|
||||
})
|
||||
|
||||
dragRef(dropRef(ref));
|
||||
|
||||
return (
|
||||
<Container ref={ref} isDragging={isDragging}>
|
||||
<header>
|
||||
{data.labels.map(label => <Label key={label} color={label} />)}
|
||||
</header>
|
||||
<p>{data.content}</p>
|
||||
{ data.user && <img src={data.user} alt=""/> }
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
51
src/components/Card/styles.js
Normal file
51
src/components/Card/styles.js
Normal file
@ -0,0 +1,51 @@
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
export const Container = styled.div`
|
||||
position: relative;
|
||||
background: #FFF;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
padding: 15px;
|
||||
box-shadow: 0 1px 4px 0 rgba(192, 208, 230, 0.8);
|
||||
border-top: 20px solid rgba(230, 236, 245, 0.4);
|
||||
cursor: grab;
|
||||
|
||||
header {
|
||||
position: absolute;
|
||||
top: -22px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 500;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 2px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
${props => props.isDragging && css`
|
||||
border: 2px dashed rgba(0, 0, 0, 0.2);
|
||||
padding-top: 31px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
cursor: grabbing;
|
||||
|
||||
p, img, header {
|
||||
opacity: 0;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
export const Label = styled.span`
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
display: inline-block;
|
||||
background: ${props => props.color};
|
||||
`;
|
||||
11
src/components/Header/index.js
Normal file
11
src/components/Header/index.js
Normal file
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Container } from './styles';
|
||||
|
||||
export default function Header() {
|
||||
return (
|
||||
<Container>
|
||||
<h1>Rocketfy</h1>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
11
src/components/Header/styles.js
Normal file
11
src/components/Header/styles.js
Normal file
@ -0,0 +1,11 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Container = styled.div`
|
||||
height: 80px;
|
||||
padding: 0 30px;
|
||||
background: #7159c1;
|
||||
color: #FFF;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
`;
|
||||
33
src/components/List/index.js
Normal file
33
src/components/List/index.js
Normal file
@ -0,0 +1,33 @@
|
||||
import React from 'react';
|
||||
|
||||
import { MdAdd } from 'react-icons/md';
|
||||
|
||||
import Card from '../Card';
|
||||
|
||||
import { Container } from './styles';
|
||||
|
||||
export default function List({ data, index: listIndex }) {
|
||||
return (
|
||||
<Container done={data.done}>
|
||||
<header>
|
||||
<h2>{data.title}</h2>
|
||||
{data.creatable && (
|
||||
<button type="button">
|
||||
<MdAdd size={24} color="#FFF" />
|
||||
</button>
|
||||
)}
|
||||
</header>
|
||||
|
||||
<ul>
|
||||
{ data.cards.map((card, index) => (
|
||||
<Card
|
||||
key={card.id}
|
||||
listIndex={listIndex}
|
||||
index={index}
|
||||
data={card}
|
||||
/>
|
||||
)) }
|
||||
</ul>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
38
src/components/List/styles.js
Normal file
38
src/components/List/styles.js
Normal file
@ -0,0 +1,38 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Container = styled.div`
|
||||
padding: 0 15px;
|
||||
height: 100%;
|
||||
flex: 0 0 320px;
|
||||
opacity: ${props => props.done ? 0.6 : 1};
|
||||
|
||||
& + div {
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 42px;
|
||||
|
||||
h2 {
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 18px;
|
||||
background: #3b5bfd;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-top: 30px;
|
||||
}
|
||||
`;
|
||||
5
src/index.js
Normal file
5
src/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import App from './App';
|
||||
|
||||
ReactDOM.render(<App />, document.getElementById('root'));
|
||||
98
src/services/api.js
Normal file
98
src/services/api.js
Normal file
@ -0,0 +1,98 @@
|
||||
export function loadLists() {
|
||||
return [
|
||||
{
|
||||
title: 'Tarefas',
|
||||
creatable: true,
|
||||
cards: [
|
||||
{
|
||||
id: 1,
|
||||
content: 'Hello From React JS',
|
||||
labels: ['#7159c1'],
|
||||
user: 'https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/profile.png'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
content: 'Criar vídeo para o Youtube ensinando a recriar a interface do Pipefy',
|
||||
labels: ['#7159c1'],
|
||||
user: 'https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/profile.png'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
content: 'Estudar módulo 03 de React Native',
|
||||
labels: ['#7159c1'],
|
||||
user: 'https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/profile.png'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
content: 'Gravar Aula "NextJS: Utilizando server-side rendering com ReactJS"',
|
||||
labels: ['#54e1f7'],
|
||||
user: 'https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/profile.png'
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
content: 'Gravar testes e deploy ReactJS',
|
||||
labels: ['#54e1f7'],
|
||||
user: 'https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/profile.png'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Fazendo',
|
||||
creatable: false,
|
||||
cards: [
|
||||
{
|
||||
id: 6,
|
||||
content: 'Recriando clone do Pipefy',
|
||||
labels: [],
|
||||
user: 'https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/profile.png'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Pausado',
|
||||
creatable: false,
|
||||
cards: [
|
||||
{
|
||||
id: 7,
|
||||
content: 'Gravar sobre Geolocalização e mapas com React Native',
|
||||
labels: ['#7159c1'],
|
||||
user: 'https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/profile.png'
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
content: 'Gravar testes e deploy ReactJS',
|
||||
labels: ['#54e1f7'],
|
||||
user: 'https://rocketseat-cdn.s3-sa-east-1.amazonaws.com/profile.png'
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
content: 'Ajustes na biblioteca unform',
|
||||
labels: [],
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Concluído',
|
||||
creatable: false,
|
||||
done: true,
|
||||
cards: [
|
||||
{
|
||||
id: 10,
|
||||
content: 'Gravar aula sobre deploy e CI com React Native',
|
||||
labels: [],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
content: 'Gravar testes e deploy ReactJS',
|
||||
labels: ['#54e1f7'],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
content: 'Gravar Aula "Internacionalização de aplicações Node.js, ReactJS e React Native"',
|
||||
labels: ['#7159c1'],
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
];
|
||||
}
|
||||
27
src/styles/global.js
Normal file
27
src/styles/global.js
Normal file
@ -0,0 +1,27 @@
|
||||
import { createGlobalStyle } from 'styled-components'
|
||||
|
||||
export default createGlobalStyle`
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body, #root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
font: 14px 'Roboto', sans-serif;
|
||||
background: #ecf1f8;
|
||||
color: #333;
|
||||
-webkit-font-smoothing: antialiased !important;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
`;
|
||||
Loading…
Reference in New Issue
Block a user