UI for creating folders

frontend/src/HomePage/Folders.jsx

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { folderService } from '@/_services';
+import { toast } from 'react-toastify';
+
+export const Folders = function Folders({
+  
+}) {
+
+  const [isLoading, setLoadingStatus] = useState(false);
+  const [showForm, setShowForm] = useState(false);
+  const [isCreating, setCreationStatus] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
+
+  function saveFolder() {
+    setCreationStatus(true);
+    folderService.create(newFolderName).then(() => {
+      toast.info('folder created.', {
+        hideProgressBar: true,
+        position: 'top-left'
+      });
+      setCreationStatus(false);
+      setShowForm(false);
+      setNewFolderName('');
+    })
+  }
+
+  return (<div className="w-100 mt-4 px-3 card">
+    {isLoading && (
+      <div className="p-5">
+        <center>
+          <div class="spinner-border text-azure" role="status"></div>
+        </center>
+      </div>
+    )}
+
+    {!isLoading && (
+      <div class="list-group list-group-transparent mb-3">
+
+        <a class="list-group-item list-group-item-action d-flex align-items-center active" href="#">
+          All applications
+            <small class="text-muted ms-auto">
+            {/* <span class="badge bg-azure-lt">{meta.count}</span> */}
+          </small>
+        </a>
+        {!showForm &&
+          <a class="list-group-item list-group-item-action d-flex align-items-center" onClick={() => setShowForm(true)}>
+            + Folder
+          </a>
+        }
+        {showForm && 
+          <div className="p-2 row">
+            <div className="col">
+              <input
+                onClick={() => onComponentClick(id, component)}
+                type="text"
+                type="text"
+                onChange={(e) => setNewFolderName(e.target.value)}
+                className="form-control"
+                placeholder="folder name"
+                disabled={isCreating}
+              />
+            </div>
+            <div className="col-auto">
+              <button className={`btn btn-primary ${isCreating ? 'btn-loading' : ''}`} onClick={saveFolder}>
+                Save
+              </button>
+            </div>
+          </div>
+        }
+      </div>
+    )}
+  </div>)
+}

frontend/src/HomePage/HomePage.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { appService, authenticationService } from '@/_services';
 import { Link } from 'react-router-dom';
-import Skeleton from 'react-loading-skeleton';
 import { history } from '@/_helpers';
 import { Pagination } from '@/_components';
+import { Folders } from './Folders';
 
 class HomePage extends React.Component {
   constructor(props) {
@@ -158,32 +158,7 @@ class HomePage extends React.Component {
             <div className="row">              
               <div className="col-3">
                 <br />
-              <div className="w-100 mt-4 px-3 card">
-
-                {isLoading && (
-                  <div className="p-5">
-                    <center>
-                      <div class="spinner-border text-azure" role="status"></div>
-                    </center>
-                  </div>
-                )}
-
-                {!isLoading && (
-                  <div class="list-group list-group-transparent mb-3">
-
-                    <a class="list-group-item list-group-item-action d-flex align-items-center active" href="#">
-                      All applications
-                      <small class="text-muted ms-auto">
-                        <span class="badge bg-azure-lt">{meta.count}</span>
-                      </small>
-                    </a>
-                    <a class="list-group-item list-group-item-action d-flex align-items-center" href="#">
-                      + Folder
-                    </a>
-                  </div>
-                )}
-                </div>
-
+                <Folders/>
               </div>
 
               <div className="col-md-9">
@@ -191,7 +166,7 @@ class HomePage extends React.Component {
                     <div className="w-100 mb-5">
                       <div className="row align-items-center">
                         <div className="col">
-                          <h2 className="page-title">Your applications</h2>
+                          <h2 className="page-title">App applications</h2>
                         </div>
                       <div className="col-auto ms-auto d-print-none">
                         <button className={`btn btn-primary ${ creatingApp ? 'btn-loading' : ''}`} onClick={this.createApp}>+ App</button>

frontend/src/_services/folder.service.js

@@ -0,0 +1,16 @@
+import config from 'config';
+import { authHeader, handleResponse } from '@/_helpers';
+
+export const folderService = {
+  create,
+};
+
+
+function create(name) {
+  const body = {
+    name
+  };
+
+  const requestOptions = { method: 'POST', headers: authHeader(), body: JSON.stringify(body) };
+  return fetch(`${config.apiUrl}/folders`, requestOptions).then(handleResponse);
+}

frontend/src/_services/index.js

@@ -7,3 +7,4 @@ export * from './organization.service';
 export * from './appVersion.service';
 export * from './organization_user.service';
 export * from './openapi.service';
+export * from './folder.service';