From 1891a6f3963d3ddeae0ea093f9a7e3608a97b4d7 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Thu, 13 May 2021 16:35:01 +0200
Subject: ui: Simplify projects page

This change simplifies the logic and components of the projects page and
reduces its dependency on Redux for simple operations.
---
 .../src/containers/projects/NewProjectContainer.js | 33 ++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js

(limited to 'opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
new file mode 100644
index 00000000..5a8a2dcf
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
@@ -0,0 +1,33 @@
+import React, { useState } from 'react'
+import { useDispatch } from 'react-redux'
+import { addProject } from '../../actions/projects'
+import TextInputModal from '../../components/modals/TextInputModal'
+import { Button } from 'reactstrap'
+
+/**
+ * A container for creating a new project.
+ */
+const NewProjectContainer = () => {
+    const [isVisible, setVisible] = useState(false)
+    const dispatch = useDispatch()
+    const callback = (text) => {
+        if (text) {
+            dispatch(addProject(text))
+        }
+        setVisible(false)
+    }
+
+    return (
+        <>
+            <div className="bottom-btn-container">
+                <Button color="primary" className="float-right" onClick={() => setVisible(true)}>
+                    <span className="fa fa-plus mr-2" />
+                    New Project
+                </Button>
+            </div>
+            <TextInputModal title="New Project" label="Project title" show={isVisible} callback={callback} />
+        </>
+    )
+}
+
+export default NewProjectContainer
-- 
cgit v1.2.3


From d9e65dceb38cdb8dc4e464d388755f9456620566 Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Sun, 16 May 2021 17:07:58 +0200
Subject: ui: Restructure OpenDC frontend

This change updates the structure of the OpenDC frontend in order to
improve the maintainability of the frontend.
---
 opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
index 5a8a2dcf..a0e607b2 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useDispatch } from 'react-redux'
-import { addProject } from '../../actions/projects'
+import { addProject } from '../../redux/actions/projects'
 import TextInputModal from '../../components/modals/TextInputModal'
 import { Button } from 'reactstrap'
 
-- 
cgit v1.2.3


From 53623fad76274e39206b8e073e371775ea96946b Mon Sep 17 00:00:00 2001
From: Fabian Mastenbroek <mail.fabianm@gmail.com>
Date: Mon, 17 May 2021 12:16:10 +0200
Subject: ui: Migrate to FontAwesome 5 React library

This change updates the frontend to use the FontAwesome 5 React library
that renders SVG icons as opposed to CSS icon fonts. This migration
resolves a couple of issues we had with server-side rendering of the
previous FontAwesome icons.
---
 .../opendc-web-ui/src/containers/projects/NewProjectContainer.js      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js')

diff --git a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
index a0e607b2..e03b5c07 100644
--- a/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
+++ b/opendc-web/opendc-web-ui/src/containers/projects/NewProjectContainer.js
@@ -3,6 +3,8 @@ import { useDispatch } from 'react-redux'
 import { addProject } from '../../redux/actions/projects'
 import TextInputModal from '../../components/modals/TextInputModal'
 import { Button } from 'reactstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
 /**
  * A container for creating a new project.
@@ -21,7 +23,7 @@ const NewProjectContainer = () => {
         <>
             <div className="bottom-btn-container">
                 <Button color="primary" className="float-right" onClick={() => setVisible(true)}>
-                    <span className="fa fa-plus mr-2" />
+                    <FontAwesomeIcon icon={faPlus} className="mr-2" />
                     New Project
                 </Button>
             </div>
-- 
cgit v1.2.3