update to context of messages

Author: SanderCokart

assets/js/components/AddTodo.js

@@ -26,10 +26,7 @@ const AddTodo = () => {
         if (event !== undefined) event.preventDefault();
 
 
-        context.createTodo(event, {
-            task:        state.task,
-            description: state.description,
-        });
+        context.createTodo(event, state);
 
         setState(initialState);
     };

assets/js/components/Router.js

@@ -9,19 +9,19 @@ import Redirect from 'react-router-dom/Redirect';
 import {makeStyles} from '@material-ui/core/styles';
 //CUSTOM COMPONENTS
 import NotFound from './NotFound';
-import TodoContextProvider from '../contexts/TodoContext';
 import AppSnackbar from './AppSnackbar';
 import Navigation from './Navigation';
 import TodoTable from './TodoTable';
+import TagTable from './tables/tag/TagTable';
+import Providers from '../contexts/Providers';
 
 const TodoList = () => (
-    <TodoContextProvider>
+    <div>
         <AppSnackbar/>
         <TodoTable/>
-    </TodoContextProvider>
+    </div>
 );
 
-
 const useStyles = makeStyles(theme => ({
     divider: theme.mixins.toolbar,
 }));
@@ -30,14 +30,16 @@ const Router = () => {
     const classes = useStyles();
     return (
         <BrowserRouter>
-            <Navigation/>
-            <div className={classes.divider}/>
-            <Switch>
-                <Redirect exact from="/" to="/todo-list"/>
-                <Route exact path="/todo-list" component={TodoList}/>
-                <Route exact path="/tag-list" component={null}/>
-                <Route component={NotFound}/>
-            </Switch>
+            <Providers>
+                <Navigation/>
+                <div className={classes.divider}/>
+                <Switch>
+                    <Redirect exact from="/" to="/todo-list"/>
+                    <Route exact path="/todo-list" component={TodoList}/>
+                    <Route exact path="/tag-list" component={TagTable}/>
+                    <Route component={NotFound}/>
+                </Switch>
+            </Providers>
         </BrowserRouter>
     );
 };

assets/js/components/functions/ExtractTextFromMessage.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ExtractTextFromMessage = (array) => {
+    const textCollection = [];
+    array.forEach(message => textCollection.push(message.text));
+    return textCollection;
+};
+
+export default ExtractTextFromMessage;

assets/js/components/tables/tag/AddTag.js

@@ -0,0 +1,60 @@
+//REACT
+import React, {useContext, useState} from 'react';
+//CONTEXT
+import {TagContext} from '../../../contexts/TagContext';
+//MUI COMPONENTS
+import {Grid, TextField, Box, IconButton} from '@material-ui/core';
+//MUI ICONS
+import {Add as AddIcon} from '@material-ui/icons';
+
+
+const AddTag = () => {
+    const context = useContext(TagContext);
+
+    const initialState = {
+        name: '',
+    };
+
+    const [state, setState] = useState(initialState);
+
+    const handleChange = (e) => {
+        setState({
+            ...state,
+            [e.target.name]: e.target.value,
+        });
+    };
+
+    const onSubmit = (e) => {
+        e.preventDefault();
+        context.create(state);
+        setState(initialState);
+    };
+
+    return (
+        <form noValidate onSubmit={onSubmit}>
+            <Grid spacing={2} alignItems="center" justify="flex-end" container>
+                <Grid item xs={12} sm={11}>
+                    <TextField variant="outlined"
+                               size="small"
+                               type="text"
+                               value={state.name}
+                               label="Tag Name"
+                               name="name"
+                               fullWidth
+                               autoFocus
+                               onChange={handleChange}
+                    />
+                </Grid>
+                <Grid item xs={12} sm={1}>
+                    <Box textAlign="right">
+                        <IconButton type="submit" color="primary" onClick={onSubmit}>
+                            <AddIcon/>
+                        </IconButton>
+                    </Box>
+                </Grid>
+            </Grid>
+        </form>
+    );
+};
+
+export default AddTag;

assets/js/components/tables/tag/DeleteButton.js

@@ -0,0 +1,32 @@
+//REACT
+import React, {useContext} from 'react';
+import PropTypes from 'prop-types';
+//MUI COMPONENTS
+import IconButton from '@material-ui/core/IconButton';
+//MUI ICONS
+import {Delete as DeleteIcon} from '@material-ui/icons';
+//CONTEXT
+import {TagContext} from '../../../contexts/TagContext';
+
+const DeleteButton = props => {
+    const context = useContext(TagContext);
+
+    const onClick = (e) => {
+        e.preventDefault();
+        context.delete(props.entity);
+    };
+
+    return (
+        <IconButton color="secondary" onClick={onClick}>
+            <DeleteIcon/>
+        </IconButton>
+    );
+};
+
+DeleteButton.propTypes = {
+    entity: PropTypes.shape({
+        id: PropTypes.number.isRequired,
+    }).isRequired,
+};
+
+export default DeleteButton;

assets/js/components/tables/tag/TagTable.js

@@ -0,0 +1,90 @@
+//REACT
+import React, {useContext, useEffect, useState} from 'react';
+//MUI COMPONENTS
+import {
+    Table,
+    TableHead,
+    TableBody,
+    TableRow,
+    TableCell,
+    Typography,
+    IconButton,
+    TableContainer, Paper,
+} from '@material-ui/core';
+//MUI ICONS
+import {Edit as EditIcon, Done as DoneIcon, Close as CloseIcon} from '@material-ui/icons';
+//CONTEXTS
+import {TagContext} from '../../../contexts/TagContext';
+//CUSTOM COMPONENTS
+import AddTag from './AddTag';
+import DeleteButton from './DeleteButton';
+import ExtractTextFromMessage from '../../functions/ExtractTextFromMessage';
+
+
+const TagTable = () => {
+    const context = useContext(TagContext);
+    const {tags, message} = context;
+
+    const initialState = {tagEditId: null};
+
+    const [state, setState] = useState(initialState);
+
+    const setEdit = (e) => {
+        setState({tagEditId: e.target.name ? e.target.name : null});
+    };
+
+    useEffect(() => {
+        if (!context.tags) context.read();
+    }, [context]);
+
+    console.log(message);
+
+    return (
+        <TableContainer component={Paper}>
+            <Table size="small">
+                <TableHead>
+                    <TableRow>
+                        <TableCell colSpan={2}>
+                            <AddTag/>
+                        </TableCell>
+                    </TableRow>
+                    <TableRow>
+                        <TableCell>{message.level === 'error' ? message.text.join('\n') : 'Tag Name'}</TableCell>
+                        <TableCell align="right">Actions</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {tags ? tags.map((tag, index) => (
+                        <TableRow key={tag.id}>
+                            <TableCell><Typography>{tag.name}</Typography></TableCell>
+                            <TableCell align="right">
+                                {state.tagEditId !== tag.id ?
+                                    <>
+                                        <IconButton color="primary" name={tag.id} onClick={setEdit}>
+                                            <EditIcon/>
+                                        </IconButton>
+                                        <DeleteButton entity={tag}/>
+                                    </>
+                                    :
+                                    <>
+                                        <IconButton color="primary">
+                                            <DoneIcon/>
+                                        </IconButton>
+                                        <IconButton color="secondary" onClick={setEdit}>
+                                            <CloseIcon/>
+                                        </IconButton>
+                                    </>
+                                }
+                            </TableCell>
+                        </TableRow>
+                    )) : null}
+
+                    {context.isLoading &&
+                     <TableRow><TableCell><Typography>Loading...</Typography></TableCell></TableRow>}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+};
+
+export default TagTable;

assets/js/contexts/Providers.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import TodoContextProvider from './TodoContext';
+import TagContextProvider from './TagContext';
+
+const Providers = (props) => {
+    return (
+        <TodoContextProvider>
+            <TagContextProvider>
+                {props.children}
+            </TagContextProvider>
+        </TodoContextProvider>
+    );
+};
+
+export default Providers;

assets/js/contexts/TagContext.js

@@ -0,0 +1,110 @@
+import React, {createContext} from 'react';
+import axios from 'axios';
+
+export const TagContext = createContext();
+
+class TagContextProvider extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tags:      null,
+            isLoading: false,
+            message:   {
+                text:  '',
+                level: null,
+            },
+
+            read:   this.read.bind(this),
+            create: this.create.bind(this),
+            delete: this.delete.bind(this),
+        };
+    }
+
+    //create
+    /**
+     * @param data {object}
+     * @param data.name {string}
+     */
+    async create(data) {
+        this.setState({isLoading: true});
+        try {
+            const r = await axios.post('/api/tag/create', data);
+            const {createdTag, message} = r.data;
+
+            if (message.level === 'error') {
+                this.setState({
+                    message:   message.text,
+                    isLoading: false,
+                });
+            } else {
+                this.setState({
+                    tags:      [...this.state.tags, createdTag],
+                    isLoading: false,
+                });
+            }
+
+        } catch (e) {
+            this.setState({
+                errors:    e,
+                isLoading: false,
+            });
+        }
+
+    }
+
+    //read
+    async read() {
+        if (this.state.isLoading) return;
+
+        this.setState({isLoading: true});
+
+        try {
+            const r = await axios.get('/api/tag/read');
+            this.setState({
+                tags:      r.data,
+                isLoading: false,
+            });
+        } catch (e) {
+            this.setState({
+                errors:    e,
+                isLoading: false,
+            });
+        }
+    };
+
+    //update
+
+    /**
+     * delete
+     * @param data {object}
+     * @param data.id {number}
+     * @param data.name {string}
+     */
+    async delete(data) {
+        try {
+            const r = await axios.delete('/api/tag/delete/' + data.id);
+            const newTags = [...this.state.tags].filter(tag => tag.id !== data.id);
+
+            this.setState({
+                tags: newTags,
+            });
+
+        } catch (e) {
+            this.setState({
+                error: e,
+            });
+        }
+    }
+
+    render() {
+        return (
+            <TagContext.Provider value={{
+                ...this.state,
+            }}>
+                {this.props.children}
+            </TagContext.Provider>
+        );
+    }
+}
+
+export default TagContextProvider;