Todo message

app.js

@@ -0,0 +1,180 @@
+function App() {
+    const { Container, Row, Col } = ReactBootstrap;
+    return (
+        <Container>
+            <Row>
+                <Col md={{ offset: 3, span: 6 }}>
+                    <TodoListCard />
+                </Col>
+            </Row>
+        </Container>
+    );
+}
+
+function TodoListCard() {
+    const [items, setItems] = React.useState(null);
+
+    React.useEffect(() => {
+        fetch('/items')
+            .then(r => r.json())
+            .then(setItems);
+    }, []);
+
+    const onNewItem = React.useCallback(
+        newItem => {
+            setItems([...items, newItem]);
+        },
+        [items],
+    );
+
+    const onItemUpdate = React.useCallback(
+        item => {
+            const index = items.findIndex(i => i.id === item.id);
+            setItems([
+                ...items.slice(0, index),
+                item,
+                ...items.slice(index + 1),
+            ]);
+        },
+        [items],
+    );
+
+    const onItemRemoval = React.useCallback(
+        item => {
+            const index = items.findIndex(i => i.id === item.id);
+            setItems([...items.slice(0, index), ...items.slice(index + 1)]);
+        },
+        [items],
+    );
+
+    if (items === null) return 'Loading...';
+
+    return (
+        <React.Fragment>
+            <AddItemForm onNewItem={onNewItem} />
+            {items.length === 0 && (
+                <p className="text-center">You have no todo items yet! Add one today!</p>                
+            )}
+            {items.map(item => (
+                <ItemDisplay
+                    item={item}
+                    key={item.id}
+                    onItemUpdate={onItemUpdate}
+                    onItemRemoval={onItemRemoval}
+                />
+            ))}
+        </React.Fragment>
+    );
+}
+
+function AddItemForm({ onNewItem }) {
+    const { Form, InputGroup, Button } = ReactBootstrap;
+
+    const [newItem, setNewItem] = React.useState('');
+    const [submitting, setSubmitting] = React.useState(false);
+
+    const submitNewItem = e => {
+        e.preventDefault();
+        setSubmitting(true);
+        fetch('/items', {
+            method: 'POST',
+            body: JSON.stringify({ name: newItem }),
+            headers: { 'Content-Type': 'application/json' },
+        })
+            .then(r => r.json())
+            .then(item => {
+                onNewItem(item);
+                setSubmitting(false);
+                setNewItem('');
+            });
+    };
+
+    return (
+        <Form onSubmit={submitNewItem}>
+            <InputGroup className="mb-3">
+                <Form.Control
+                    value={newItem}
+                    onChange={e => setNewItem(e.target.value)}
+                    type="text"
+                    placeholder="New Item"
+                    aria-describedby="basic-addon1"
+                />
+                <InputGroup.Append>
+                    <Button
+                        type="submit"
+                        variant="success"
+                        disabled={!newItem.length}
+                        className={submitting ? 'disabled' : ''}
+                    >
+                        {submitting ? 'Adding...' : 'Add Task'}
+                    </Button>
+                </InputGroup.Append>
+            </InputGroup>
+        </Form>
+    );
+}
+
+function ItemDisplay({ item, onItemUpdate, onItemRemoval }) {
+    const { Container, Row, Col, Button } = ReactBootstrap;
+
+    const toggleCompletion = () => {
+        fetch(`/items/${item.id}`, {
+            method: 'PUT',
+            body: JSON.stringify({
+                name: item.name,
+                completed: !item.completed,
+            }),
+            headers: { 'Content-Type': 'application/json' },
+        })
+            .then(r => r.json())
+            .then(onItemUpdate);
+    };
+
+    const removeItem = () => {
+        fetch(`/items/${item.id}`, { method: 'DELETE' }).then(() =>
+            onItemRemoval(item),
+        );
+    };
+
+    return (
+        <Container fluid className={`item ${item.completed && 'completed'}`}>
+            <Row>
+                <Col xs={1} className="text-center">
+                    <Button
+                        className="toggles"
+                        size="sm"
+                        variant="link"
+                        onClick={toggleCompletion}
+                        aria-label={
+                            item.completed
+                                ? 'Mark item as incomplete'
+                                : 'Mark item as complete'
+                        }
+                    >
+                        <i
+                            onClick={toggleCompletion}
+                            className={`far ${
+                                item.completed ? 'fa-check-square' : 'fa-square'
+                            }`}
+                        />
+                    </Button>
+                </Col>
+                <Col xs={10} className="name">
+                    {item.name}
+                </Col>
+                <Col xs={1} className="text-center remove">
+                    <Button
+                        size="sm"
+                        variant="link"
+                        onClick={removeItem}
+                        aria-label="Remove Item"
+                    >
+                        <i className="fa fa-trash text-danger" />
+                    </Button>
+                </Col>
+            </Row>
+        </Container>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));

app/Dockerfile

@@ -1,13 +1,23 @@
 # Base image 
-FROM node:10-alpine
+FROM node:18-alpine
+
+# Install build dependencies
+RUN apk add --no-cache libc6-compat build-base
 
 # Create a directory to hold the application code inside the image
 WORKDIR /app
 
-COPY . .
+# Copy package.json and yarn.lock first to leverage Docker caching
+COPY package.json yarn.lock ./
 
 # Install app dependencies
 RUN yarn install --production
 
-#ENTRYPOINT ["tail", "-f", "/dev/null"]
-CMD ["node", "/app/src/index.js"]
+# Copy the rest of the application code
+COPY . .
+
+# Expose the application port
+EXPOSE 3000
+
+# Start the application
+CMD ["node", "/app/src/index.js"]

app/docker-compose.yml

@@ -0,0 +1,27 @@
+version: "3.7"
+
+services:
+  app:
+    image: node:18-alpine
+    command: sh -c "yarn install && yarn run dev"
+    ports:
+      - 3000:3000
+    working_dir: /app
+    volumes:
+      - ./:/app
+    environment:
+      MYSQL_HOST: mysql
+      MYSQL_USER: root
+      MYSQL_PASSWORD: secret
+      MYSQL_DB: todos
+
+  mysql:
+    image: mysql:8.0
+    volumes:
+      - todo-mysql-data:/var/lib/mysql
+    environment: 
+      MYSQL_ROOT_PASSWORD: secret
+      MYSQL_DATABASE: todos
+
+volumes:
+  todo-mysql-data: