chanthasuon/DataJPA_V2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Task Management

Browse Source
This commit is contained in:
Chantha 2020-05-17 18:12:36 +07:00
commit 51ed3a31a0
17 changed files with 10690 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored Normal file
View 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
View 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
View 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
View 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
View File

@ -0,0 +1,3 @@
import { createContext } from 'react';
export default createContext({});

34
src/components/Board/index.js Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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;
}
`;

10215
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff