From 5eb8882969d6711929433dc885a114848674b0e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Nejedl=C3=BD?= <jsmesami@gmail.com>
Date: Sat, 2 Mar 2024 15:08:00 +0100
Subject: [PATCH] Implement alerts

---
 package-lock.json                             | 10 +++++++
 package.json                                  |  1 +
 tumbs/static/js/cms/components/Alerts.js      | 23 ++++++++++++++++
 tumbs/static/js/cms/components/App.js         |  2 ++
 .../js/cms/components/NewWebsiteModal.js      |  6 ++---
 tumbs/static/js/cms/network.js                |  4 +--
 tumbs/static/js/cms/slices/alerts.js          | 26 +++++++++++++++++++
 tumbs/static/js/cms/store.js                  |  6 +++--
 tumbs/static/sass/project.scss                |  5 ++++
 tumbs/templates/base.html                     | 12 ++++-----
 10 files changed, 81 insertions(+), 14 deletions(-)
 create mode 100644 tumbs/static/js/cms/components/Alerts.js
 create mode 100644 tumbs/static/js/cms/slices/alerts.js

diff --git a/package-lock.json b/package-lock.json
index f5362c9..5b57931 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,6 +22,7 @@
         "css-loader": "^6.5.1",
         "mini-css-extract-plugin": "^2.4.5",
         "node-sass-tilde-importer": "^1.0.2",
+        "object-hash": "^3.0.0",
         "postcss": "^8.3.11",
         "postcss-loader": "^8.1.0",
         "postcss-preset-env": "^9.0.0",
@@ -6395,6 +6396,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
diff --git a/package.json b/package.json
index ffa6f6d..bb43641 100644
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
     "css-loader": "^6.5.1",
     "mini-css-extract-plugin": "^2.4.5",
     "node-sass-tilde-importer": "^1.0.2",
+    "object-hash": "^3.0.0",
     "postcss": "^8.3.11",
     "postcss-loader": "^8.1.0",
     "postcss-preset-env": "^9.0.0",
diff --git a/tumbs/static/js/cms/components/Alerts.js b/tumbs/static/js/cms/components/Alerts.js
new file mode 100644
index 0000000..33ba3bd
--- /dev/null
+++ b/tumbs/static/js/cms/components/Alerts.js
@@ -0,0 +1,23 @@
+import React from "react";
+import * as R from "ramda";
+import { useDispatch, useSelector } from "react-redux";
+import { actions as alertsActions } from "../slices/alerts";
+import Alert from "react-bootstrap/Alert";
+
+const Alerts = () => {
+  const dispatch = useDispatch();
+  const alerts = useSelector((state) => state.alerts.list);
+  const dismiss = (id) => dispatch(alertsActions.removeAlert(id));
+
+  return (
+    <div className="alerts row container-md">
+      {R.reverse(alerts).map(({ id, content, severity }) => (
+        <Alert key={id} variant={severity} dismissible onClose={() => dismiss(id)}>
+          {content}
+        </Alert>
+      ))}
+    </div>
+  );
+};
+
+export default Alerts;
diff --git a/tumbs/static/js/cms/components/App.js b/tumbs/static/js/cms/components/App.js
index a483976..bba1730 100644
--- a/tumbs/static/js/cms/components/App.js
+++ b/tumbs/static/js/cms/components/App.js
@@ -2,6 +2,7 @@ import React from "react";
 import { useDispatch } from "react-redux";
 import { actions as newWebsiteActions } from "../slices/newWebsiteModal";
 import Button from "react-bootstrap/Button";
+import Alerts from "./Alerts";
 import NewWebsiteModal from "./NewWebsiteModal";
 import SelectWebsite from "./SelectWebsite";
 
@@ -11,6 +12,7 @@ const App = () => {
 
   return (
     <>
+      <Alerts />
       <SelectWebsite />
       <Button variant="primary" onClick={showNewWebsiteModal}>
         Create site
diff --git a/tumbs/static/js/cms/components/NewWebsiteModal.js b/tumbs/static/js/cms/components/NewWebsiteModal.js
index ce90e37..cb1d76d 100644
--- a/tumbs/static/js/cms/components/NewWebsiteModal.js
+++ b/tumbs/static/js/cms/components/NewWebsiteModal.js
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { actions as alertsActions } from "../slices/alerts";
 import { actions as newWebsiteActions } from "../slices/newWebsiteModal";
 import { actions as websitesActions } from "../slices/websites";
 import Button from "react-bootstrap/Button";
@@ -30,12 +31,11 @@ const NewWebsiteModal = () => {
         setStatus("success");
         dispatch(websitesActions.addWebsite(data));
         dispatch(websitesActions.setCurrent(data.id));
-        // TODO: display success notification
         hideModal();
       },
-      onError: (_err) => {
+      onError: (err) => {
         setStatus("error");
-        // TODO: display error notification
+        dispatch(alertsActions.addAlert({ content: `Could not add website: ${err}`, severity: "danger" }));
         // TODO: notify Sentry
         hideModal();
       },
diff --git a/tumbs/static/js/cms/network.js b/tumbs/static/js/cms/network.js
index 8ade06c..1534fa8 100644
--- a/tumbs/static/js/cms/network.js
+++ b/tumbs/static/js/cms/network.js
@@ -11,9 +11,7 @@ export const request = (endpoint, { payload = {}, onSuccess = null, onError = nu
   })
     .then((response) => {
       if (response.ok) return response.json();
-
-      onError && onError(`${response.status} ${response.statusText}`);
-      return Promise.reject(response);
+      return Promise.reject(response.statusText);
     })
     .then((data) => {
       onSuccess && onSuccess(data);
diff --git a/tumbs/static/js/cms/slices/alerts.js b/tumbs/static/js/cms/slices/alerts.js
new file mode 100644
index 0000000..89a03ee
--- /dev/null
+++ b/tumbs/static/js/cms/slices/alerts.js
@@ -0,0 +1,26 @@
+import { createSlice } from "@reduxjs/toolkit";
+import * as R from "ramda";
+import hash from "object-hash";
+
+export const slice = createSlice({
+  name: "alerts",
+  initialState: {
+    list: [],
+  },
+  reducers: {
+    addAlert: (state, { payload }) => {
+      const id = hash.MD5(payload);
+      const exists = R.find(R.propEq(id, "id"))(state.list);
+      if (!exists) state.list.push({ id: id, ...payload });
+    },
+    removeAlert: (state, { payload }) => {
+      state.list = R.reject(R.propEq(payload, "id"))(state.list);
+    },
+    removeAll: (state) => {
+      state.list = [];
+    },
+  },
+});
+
+export const actions = slice.actions;
+export const reducer = slice.reducer;
diff --git a/tumbs/static/js/cms/store.js b/tumbs/static/js/cms/store.js
index 19a99af..257a8cd 100644
--- a/tumbs/static/js/cms/store.js
+++ b/tumbs/static/js/cms/store.js
@@ -1,6 +1,7 @@
 import { configureStore } from "@reduxjs/toolkit";
-import { reducer as websitesReducer } from "./slices/websites";
+import { reducer as alertsReducer } from "./slices/alerts";
 import { reducer as newWebsiteReducer } from "./slices/newWebsiteModal";
+import { reducer as websitesReducer } from "./slices/websites";
 
 const container = document.getElementById("cms");
 const initData = JSON.parse(container.dataset.init);
@@ -11,7 +12,8 @@ export const ENDPOINTS = initData.endpoints;
 
 export default configureStore({
   reducer: {
-    websites: websitesReducer,
+    alerts: alertsReducer,
     newWebsiteModal: newWebsiteReducer,
+    websites: websitesReducer,
   },
 });
diff --git a/tumbs/static/sass/project.scss b/tumbs/static/sass/project.scss
index 9a84aad..479dcaf 100644
--- a/tumbs/static/sass/project.scss
+++ b/tumbs/static/sass/project.scss
@@ -1 +1,6 @@
 @import 'bs';
+
+.alerts {
+  position: fixed;
+  bottom: 0;
+}
diff --git a/tumbs/templates/base.html b/tumbs/templates/base.html
index a072cd3..fa41555 100644
--- a/tumbs/templates/base.html
+++ b/tumbs/templates/base.html
@@ -12,7 +12,7 @@
             <a class="nav-link {% block websites_active %}{% endblock websites_active %}"
                href="{% url "websites:websites_cms" %}">{% trans "My Site" %}</a>
           </li>
-          
+
           <li class="nav-item dropdown">
             <a class="nav-link dropdown-toggle" role="button" id="customerDropdownButton"
                data-bs-toggle="dropdown" aria-label="{% trans 'Customer' %}" aria-expanded="false">
@@ -23,16 +23,16 @@
               <li><a class="dropdown-item" href="{% url "accounts:sign_out" %}">{% trans "Sign out" %}</a></li>
             </ul>
           </li>
-          
+
         {% else %}
-          
+
           <li class="nav-item">
             <a class="nav-link" href="{% url "accounts:sign_up" %}">{% trans "Sign up" %}</a>
           </li>
           <li class="nav-item">
             <a class="btn btn-outline-light" href="{% url "accounts:sign_in" %}">{% trans "Sign in" %}</a>
           </li>
-          
+
         {% endif %}
       </ul>
     </div>
@@ -40,8 +40,8 @@
 
   <div class="container-fluid">
     {% if messages %}
-      <div class="alerts">
-        {% for message in messages %}
+      <div class="alerts row container-md">
+        {% for message in messages reversed %}
           <div class="alert alert-dismissible {% if message.tags %}alert-{{ message.tags }}{% endif %}">
             {{ message }}
             <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% trans 'Close' %}">