React App

8 | ); 9 | } -------------------------------------------------------------------------------- /src/components/AppContent/index.scss: -------------------------------------------------------------------------------- 1 | #app-content { 2 | background-color: #f2f2f2; 3 | } -------------------------------------------------------------------------------- /src/components/AppDrawer/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | import { 4 | Drawer, DrawerHeader, DrawerContent, 5 | Icon, 6 | IconButton, 7 | Layout, 8 | List, ListItem, ListItemGraphic, ListItemText, ListItemMeta, 9 | ListDivider, 10 | ListGroup, 11 | Typography 12 | } from 'mdc-react'; 13 | 14 | import useStore from 'hooks/store'; 15 | 16 | export default function AppDrawer({ lists }) { 17 | const { state, actions } = useStore(); 18 | 19 | return ( 20 | 23 | 26 | 27 | {state.user.email} 28 | actions.signOutUser()} title="Выйти"> 29 | exit_to_app 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | {[ 38 | { title: 'Задачи', icon: 'home', to: '/', exact: true }, 39 | { title: 'Важно', icon: 'star', to: '/important' }, 40 | { title: 'Запланированные', icon: 'event', to: '/planned' }, 41 | ].map(item => 42 | 49 | 50 | {item.icon} 51 | 52 | 53 | 54 | {item.title} 55 | 56 | 57 | )} 58 | 59 | 60 | 61 | 62 | 63 | {lists.map(item => 64 | 70 | 71 | list 72 | 73 | 74 | 75 | {item.title} 76 | 77 | 78 | 79 | {item.todos.length} 80 | 81 | 82 | )} 83 | 84 | 85 | 86 | 87 | ); 88 | } -------------------------------------------------------------------------------- /src/components/TodoDetails/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Checkbox, 4 | Layout, 5 | List, ListItem, ListItemText, ListItemGraphic, 6 | TextField, 7 | Typography 8 | } from 'mdc-react'; 9 | 10 | import './index.scss'; 11 | 12 | export default function TodoDetails({ todo }) { 13 | return ( 14 | 43 | ); 44 | } -------------------------------------------------------------------------------- /src/components/TodoDetails/index.scss: -------------------------------------------------------------------------------- 1 | .todo-details { 2 | .todo-steps { 3 | margin: 1rem 0; 4 | 5 | .todo-step-list { 6 | .mdc-list-item { 7 | padding: 0; 8 | 9 | .mdc-checkbox { 10 | margin-right: .5rem; 11 | } 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/TodoForm/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { 3 | List, ListItem, 4 | TextField 5 | } from 'mdc-react'; 6 | 7 | import './index.scss'; 8 | 9 | export default function TodoForm({ onSubmit }) { 10 | const [title, setTitle] = useState(''); 11 | 12 | function handleSubmit(event) { 13 | event.preventDefault(); 14 | 15 | onSubmit(title); 16 | setTitle(''); 17 | } 18 | 19 | return ( 20 | 32 | ); 33 | } -------------------------------------------------------------------------------- /src/components/TodoForm/index.scss: -------------------------------------------------------------------------------- 1 | .todo-form { 2 | background-color: white; 3 | margin-top: 2px; 4 | 5 | .mdc-list { 6 | padding: 0; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/components/TodoList/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | List 4 | } from 'mdc-react'; 5 | 6 | import TodoListItem from '../TodoListItem'; 7 | 8 | import './index.scss'; 9 | 10 | export default function TodoList({ 11 | todos, 12 | onUpdate, 13 | onDelete, 14 | onSelect 15 | }) { 16 | return ( 17 | 18 | {todos.map(todo => 19 | 26 | )} 27 | 28 | ); 29 | } -------------------------------------------------------------------------------- /src/components/TodoList/index.scss: -------------------------------------------------------------------------------- 1 | .todo-list { 2 | .todo-list__title { 3 | margin-top: 1rem; 4 | margin-bottom: 1rem; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/components/TodoListItem/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { 3 | Checkbox, 4 | Icon, 5 | IconButton, 6 | ListItem, ListItemGraphic, ListItemText, ListItemMeta 7 | } from 'mdc-react'; 8 | 9 | import './index.scss'; 10 | 11 | export default function TodoListItem({ 12 | todo, 13 | onUpdate, 14 | onDelete, 15 | onSelect 16 | }) { 17 | function handleChange(completed) { 18 | onUpdate(todo.id, { completed }); 19 | } 20 | 21 | return ( 22 | 23 | 24 | 28 | 29 | 30 | onSelect(todo)}>{todo.title} 31 | 32 | 33 | onDelete(todo.id)}> 34 | delete 35 | 36 | 37 | 38 | ); 39 | } -------------------------------------------------------------------------------- /src/components/TodoListItem/index.scss: -------------------------------------------------------------------------------- 1 | .todo-list-item { 2 | background-color: white; 3 | margin-top: 2px; 4 | 5 | .mdc-list-item__graphic { 6 | width: 18px; 7 | height: 18px; 8 | margin-right: 1rem; 9 | } 10 | 11 | .mdc-list-item__text { 12 | flex: 1; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/contexts/store.js: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | export default createContext(); -------------------------------------------------------------------------------- /src/firebase.js: -------------------------------------------------------------------------------- 1 | import firebase from 'firebase'; 2 | 3 | firebase.initializeApp({ 4 | apiKey: process.env.REACT_APP_FIREBASE_API_KEY, 5 | projectId: 'react-todo-16181', 6 | appId: '1:853702437056:web:356a2257476d5e5a7ea525', 7 | authDomain: 'react-todo-16181.firebaseapp.com', 8 | databaseURL: 'https://react-todo-16181.firebaseio.com', 9 | storageBucket: 'react-todo-16181.appspot.com', 10 | messagingSenderId: '853702437056' 11 | }); 12 | 13 | const db = firebase.firestore(); 14 | const auth = firebase.auth(); 15 | 16 | export { db, auth }; -------------------------------------------------------------------------------- /src/hooks/store.js: -------------------------------------------------------------------------------- 1 | import { useContext } from 'react'; 2 | 3 | import StoreContext from 'contexts/store'; 4 | 5 | export default function useStore() { 6 | const { state, actions } = useContext(StoreContext); 7 | 8 | return { 9 | state, 10 | actions 11 | }; 12 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { BrowserRouter as Router } from 'react-router-dom'; 4 | 5 | import './index.scss'; 6 | 7 | import { Provider, initialState, reducer, actions } from './store'; 8 | import App from './App'; 9 | 10 | ReactDOM.render( 11 | 12 | 13 | 14 | 15 | , 16 | document.getElementById('root') 17 | ); -------------------------------------------------------------------------------- /src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~mdc-react/dist/index.css'; 2 | 3 | * { 4 | box-sizing: content-box; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding: 0; 10 | overflow: hidden; 11 | } 12 | 13 | #root { 14 | display: flex; 15 | min-height: 100vh; 16 | } -------------------------------------------------------------------------------- /src/pages/Auth/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { 3 | Button, 4 | Card, CardSection, CardActions, 5 | Layout, 6 | TextField, 7 | Typography 8 | } from 'mdc-react'; 9 | 10 | import useStore from 'hooks/store'; 11 | 12 | import './index.scss'; 13 | 14 | export default function AuthPage() { 15 | const { actions } = useStore(); 16 | const [email, setEmail] = useState(''); 17 | const [password, setPassword] = useState(''); 18 | const [error, setError] = useState(''); 19 | 20 | function handleLogInButtonClick() { 21 | if (email && password) { 22 | actions.logInUser(email, password) 23 | .catch(error => setError(error.message)); 24 | } 25 | } 26 | 27 | function handleRegisterButtonClick() { 28 | if (email && password) { 29 | actions.registerUser(email, password) 30 | .catch(error => setError(error.message)); 31 | } 32 | } 33 | 34 | return ( 35 | 36 | React Todo 37 | 38 | {error && 39 | {error} 40 | } 41 | 42 | 43 | 44 | 52 | 53 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | ); 70 | } -------------------------------------------------------------------------------- /src/pages/Auth/index.scss: -------------------------------------------------------------------------------- 1 | #login-page { 2 | margin: auto; 3 | } -------------------------------------------------------------------------------- /src/pages/List/index.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react'; 2 | import { 3 | Icon, 4 | IconButton, 5 | Layout, 6 | SideSheet, 7 | Spinner, 8 | TopAppBar, 9 | Typography 10 | } from 'mdc-react'; 11 | 12 | import useStore from 'hooks/store'; 13 | 14 | import TodoList from 'components/TodoList'; 15 | import TodoForm from 'components/TodoForm'; 16 | import TodoDetails from 'components/TodoDetails'; 17 | 18 | import './index.scss'; 19 | 20 | export default function ListPage({ match }) { 21 | const { state, actions } = useStore(); 22 | const [selectedTodo, setSelectedTodo] = useState(null); 23 | 24 | useEffect(() => { 25 | setSelectedTodo(null); 26 | 27 | if (match.params.listId) { 28 | actions.getListTodos(match.params.listId); 29 | } else { 30 | actions.getTodos(); 31 | } 32 | }, [actions, match.params.listId]); 33 | 34 | function handleSubmit(title) { 35 | actions.createTodo({ 36 | title, 37 | listId: list.id 38 | }); 39 | } 40 | 41 | function handleDelete(todoId) { 42 | actions.deleteTodo(todoId); 43 | } 44 | 45 | function handleUpdate(todoId, data) { 46 | actions.updateTodo(todoId, data); 47 | } 48 | 49 | function handleSelect(todo) { 50 | setSelectedTodo(todo); 51 | } 52 | 53 | const list = state.lists.find(list => list.id === match.params.listId); 54 | 55 | if (!list || !state.todos) return ; 56 | 57 | return ( 58 | 59 | 62 | 63 | 64 | 69 | 70 | Детали задачи 71 | 72 | setSelectedTodo(null)}> 73 | close 74 | 75 | 76 | 77 | {selectedTodo && 78 | 81 | } 82 | 83 | 84 | 85 | 92 | 93 | 96 | 97 | 98 | 99 | ); 100 | } -------------------------------------------------------------------------------- /src/pages/List/index.scss: -------------------------------------------------------------------------------- 1 | #list-page { 2 | max-width: 100%; 3 | 4 | .mdc-layout { 5 | flex: 1; 6 | } 7 | 8 | .mdc-side-sheet { 9 | top: 64px; 10 | padding: 1rem; 11 | } 12 | 13 | .todo-list { 14 | margin: 1rem 1rem .25rem; 15 | } 16 | 17 | .todo-form { 18 | margin: .25rem 1rem 1rem; 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/store/Provider.jsx: -------------------------------------------------------------------------------- 1 | import React, { useReducer, useMemo } from 'react'; 2 | 3 | import StoreContext from 'contexts/store'; 4 | import { bindActions } from './utils'; 5 | 6 | export default function Provider({ initialState, reducer, actions, children }) { 7 | const [state, dispatch] = useReducer(reducer, initialState); 8 | 9 | const memoizedActions = useMemo(() => bindActions(actions, dispatch), [dispatch, actions]); 10 | 11 | const memoizedStore = useMemo(() => ({ 12 | state, 13 | actions: memoizedActions 14 | }), [state, memoizedActions]); 15 | 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | } -------------------------------------------------------------------------------- /src/store/actions.js: -------------------------------------------------------------------------------- 1 | import * as api from '../api'; 2 | 3 | /* Auth */ 4 | export function logInUser(email, password) { 5 | return api.logInUser(email, password).then(() => ({})); 6 | } 7 | 8 | export function signOutUser() { 9 | return api.signOutUser().then(() => ({})); 10 | } 11 | 12 | export function registerUser(email, password) { 13 | return api.registerUser(email, password).then(() => ({})); 14 | } 15 | 16 | export function initAuth() { 17 | return dispatch => api.initAuth(user => { 18 | return user ? dispatch({ 19 | type: 'LOGIN_USER', 20 | payload: { 21 | user 22 | } 23 | }) : dispatch({ 24 | type: 'LOGOUT_USER' 25 | }); 26 | }); 27 | } 28 | 29 | 30 | /* DB */ 31 | export function getLists() { 32 | return api.getLists() 33 | .then(lists => ({ 34 | type: 'GET_LISTS', 35 | payload: { 36 | lists 37 | } 38 | })); 39 | } 40 | 41 | export function getTodos() { 42 | return api.getTodos() 43 | .then(todos => ({ 44 | type: 'GET_TODOS', 45 | payload: { 46 | todos 47 | } 48 | })); 49 | } 50 | 51 | export function getListTodos(listId) { 52 | return api.getListTodos(listId) 53 | .then(todos => ({ 54 | type: 'GET_LIST_TODOS', 55 | payload: { 56 | todos 57 | } 58 | })); 59 | } 60 | 61 | export function createTodo(data) { 62 | return api.createTodo(data) 63 | .then(todo => ({ 64 | type: 'CREATE_TODO', 65 | payload: { 66 | todo 67 | } 68 | })); 69 | } 70 | 71 | export function updateTodo(todoId, data) { 72 | return api.updateTodo(todoId, data) 73 | .then(todo => ({ 74 | type: 'UPDATE_TODO', 75 | payload: { 76 | todo 77 | } 78 | })); 79 | } 80 | 81 | export function deleteTodo(todoId) { 82 | return api.deleteTodo(todoId) 83 | .then(todoId => ({ 84 | type: 'DELETE_TODO', 85 | payload: { 86 | todoId 87 | } 88 | })); 89 | } -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import * as actions from './actions'; 2 | 3 | export { default as Provider } from './Provider'; 4 | export { default as reducer } from './reducer'; 5 | export { default as initialState } from './state'; 6 | export { actions }; -------------------------------------------------------------------------------- /src/store/reducer.js: -------------------------------------------------------------------------------- 1 | export default function reducer(state, action) { 2 | switch (action.type) { 3 | case 'LOGIN_USER': 4 | return { 5 | ...state, 6 | user: action.payload.user 7 | }; 8 | 9 | case 'LOGOUT_USER': 10 | return { 11 | ...state, 12 | user: null 13 | }; 14 | 15 | case 'GET_LISTS': 16 | return { 17 | ...state, 18 | lists: action.payload.lists 19 | }; 20 | 21 | case 'GET_TODOS': 22 | return { 23 | ...state, 24 | todos: action.payload.todos 25 | }; 26 | 27 | case 'GET_LIST_TODOS': 28 | return { 29 | ...state, 30 | todos: action.payload.todos 31 | } 32 | 33 | case 'CREATE_TODO': 34 | return { 35 | ...state, 36 | todos: state.todos.push(action.payload.todo) 37 | } 38 | 39 | case 'UPDATE_TODO': 40 | return { 41 | ...state, 42 | todos: state.todos.map(todo => { 43 | if (todo.id === action.payload.todo.id) { 44 | return { 45 | ...todo, 46 | ...action.payload.todo 47 | } 48 | } 49 | 50 | return todo 51 | }) 52 | } 53 | 54 | case 'DELETE_TODO': 55 | return { 56 | ...state, 57 | todos: state.todos.filter(todo => todo !== action.payload.todoId) 58 | } 59 | 60 | default: 61 | return state; 62 | } 63 | } -------------------------------------------------------------------------------- /src/store/state.js: -------------------------------------------------------------------------------- 1 | export default { 2 | user: null, 3 | lists: [], 4 | todos: [] 5 | }; -------------------------------------------------------------------------------- /src/store/utils.js: -------------------------------------------------------------------------------- 1 | export function bindActions(actions, dispatch) { 2 | return Object.entries(actions).reduce((result, [key, fn]) => { 3 | result[key] = (...args) => { 4 | const action = fn(...args); 5 | 6 | if (typeof action.then === 'function') { 7 | action.then(dispatch); 8 | } else if (typeof action === 'function') { 9 | action(dispatch); 10 | } else if (action.type) { 11 | dispatch(action); 12 | } 13 | 14 | return action; 15 | }; 16 | 17 | return result; 18 | }, {}); 19 | } 20 | 21 | export function combineReducers(reducers) { 22 | return function(state, action) { 23 | return Object.entries(reducers).reduce((newState, [key, reducer]) => { 24 | newState[key] = reducer(state[key], action); 25 | 26 | return newState; 27 | }, {}); 28 | }; 29 | } -------------------------------------------------------------------------------- /storage.rules: -------------------------------------------------------------------------------- 1 | service firebase.storage { 2 | match /b/{bucket}/o { 3 | match /{allPaths=**} { 4 | allow read, write: if request.auth!=null; 5 | } 6 | } 7 | } 8 | --------------------------------------------------------------------------------