Merge branch 'main' of https://github.com/TRACE-Digital/TRACE into main

Author: jlmolskness

src/assets/scss/black-dashboard-react/custom/_alerts.scss

@@ -61,7 +61,7 @@
     }
 
     &.alert-with-icon{
-        padding-left: 65px;
+        padding-left: 15px;
     }
 }
 

src/components/AccountCardList/AccountCardList.js

@@ -1,9 +1,10 @@
 import AccountCard from 'components/AccountCard/AccountCard';
 import { rejectAccount } from 'components/AccountCard/AccountCard';
 import { claimAccount } from 'components/AccountCard/AccountCard';
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap';
 import { tags } from 'trace-search';
+import NotificationAlert from "react-notification-alert";
 
 function AccountCardList(props) {
   const [sortMethod, setSortMethod] = useState("new");
@@ -18,6 +19,18 @@ function AccountCardList(props) {
   const selectAll = () => setSelection(props.accounts.map(account => account.id));
   const deselectAll = () => setSelection([]);
 
+  const notificationAlertRef = useRef(null);
+  const toast = (message, type) => {
+    var options = {};
+    options = {
+      place: "bc",
+      message: (<span>{message}</span>),
+      type: type,
+      autoDismiss: 7,
+    };
+    notificationAlertRef.current.notificationAlert(options);
+  }
+
   const claimSelected = async () => {
     let count = 0;
     const selectedAccounts = props.accounts.filter(account => selection.includes(account.id));
@@ -27,7 +40,7 @@ function AccountCardList(props) {
         count++;
       }
     }
-    alert(`Claimed ${count} accounts.`);
+    toast(`Claimed ${count} accounts.`, "success");
     return count;
   };
 
@@ -40,7 +53,7 @@ function AccountCardList(props) {
         count++;
       }
     }
-    alert(`Rejected ${count} accounts.`);
+    toast(`Rejected ${count} accounts.`, "danger");
     return count;
   };
 
@@ -132,6 +145,9 @@ function AccountCardList(props) {
 
   return (
     <>
+      <div className="react-notification-alert-container">
+        <NotificationAlert ref={notificationAlertRef} />
+      </div>
       <span style={{display: "inline", float: "right"}}>
         {/* SORT DROPDOWN */}
         <Dropdown isOpen={sortDropdownOpen} toggle={toggleSortDropdown} style={{display: "inline", marginRight: "10px"}}>

src/components/Graph/Graph.js

@@ -7,6 +7,7 @@ function Graph(props) {
 
   const [data, setData] = useState([]);
   const [labels, setLabels] = useState([]);
+  const [totalData, setTotalData] = useState(0);
 
   var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
   var days = ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"];
@@ -65,6 +66,7 @@ function Graph(props) {
   // Add label logic in here
   const tempLabels = [];
   let count = 0;
+  let total = 0;
   for (const key in analyticsData) {
 
     if (analyticsData.hasOwnProperty(key)) {
@@ -87,7 +89,9 @@ function Graph(props) {
 
 
       if (analyticsData[key].length !== 0) {
-        data.push(analyticsData[key][0].nb_hits);
+        let hits = analyticsData[key][0].nb_hits;
+        data.push(hits);
+        total += hits;
       }
       else {
         data.push(0);
@@ -97,6 +101,7 @@ function Graph(props) {
   }
 
     setLabels(tempLabels);
+    setTotalData(total);
     return data;
   }
 
@@ -152,6 +157,16 @@ function Graph(props) {
 
   return (
     <>
+      {props.dataLabel === "Visitors" && (
+        <h2 style={{position: "absolute", fontWeight: "100", transform: "translate(10px, -57px)"}}>
+          {totalData} Visitors
+        </h2>
+      )}
+      {props.dataLabel === "Clicks" && (
+        <h4 style={{position: "absolute", fontWeight: "100", transform: "translate(10px, -50px)"}}>
+          {totalData} Clicks
+        </h4>
+      )}
       <Line
         data={chart.visitorData}
         options={chart.options}
@@ -195,7 +210,7 @@ let defaultOptions = {
         },
         ticks: {
           suggestedMin: 0,
-          suggestedMax: 5,
+          suggestedMax: 6,
           padding: 20,
           fontColor: "#9a9a9a",
         },

src/components/SiteCard/SiteCard.js

@@ -1,9 +1,10 @@
 import PrivacyBadge from "components/PrivacyBadge/PrivacyBadge";
-import React, { useState } from "react";
+import React, { useState, useRef } from "react";
 import ReactCardFlip from "react-card-flip";
 import { Card, CardBody, Button } from "reactstrap";
 import { IconButton } from "@material-ui/core";
 import { AccountType } from "trace-search";
+import NotificationAlert from "react-notification-alert";
 
 /**
  * Displays a Card with information about the account passed in
@@ -24,7 +25,18 @@ const SiteCard = (props) => {
   const editorColor = props.editorColor;
   const iconColor = props.iconColor;
 
-  
+  const notificationAlertRef = useRef(null);
+  const toast = (message, type) => {
+    var options = {};
+    options = {
+      place: "bc",
+      message: (<span>{message}</span>),
+      type: type,
+      autoDismiss: 7,
+    };
+    notificationAlertRef.current.notificationAlert(options);
+  }
+
   if (!search && !dashboard && !editor) {
     console.warn(
       'WARNING - invalid type passed to SiteCard component. Needs to be "search", "dashboard", or "editor"'
@@ -52,9 +64,9 @@ const SiteCard = (props) => {
     //   async function claimAccount(account) {
     try {
       await account.claim();
-      alert("Account successfully claimed!");
+      toast("Account successfully claimed!", "success");
     } catch (e) {
-      alert("Account has already been claimed!");
+      toast("Account has already been claimed!", "warning");
       console.error(e);
     }
   };
@@ -66,14 +78,18 @@ const SiteCard = (props) => {
     //   async function deleteAccount(account) {
     try {
       await account.reject();
-      alert("Account successfully removed!");
+      toast("Account successfully removed!");
     } catch (e) {
       console.error(e);
     }
   };
 
   return (
     //<Col lg="3" key={account.id}>
+      <>
+      <div className="react-notification-alert-container">
+        <NotificationAlert ref={notificationAlertRef} />
+      </div>
       <ReactCardFlip
         isFlipped={flipped}
         flipSpeedBackToFront=".8"
@@ -86,7 +102,7 @@ const SiteCard = (props) => {
             {/* ICON */}
             <div className="editor">
               {" "}
-              
+
               <i
                 className={account.site.logoClass || 'fas fa-question fa-sm'}
                 style={{ color: (iconColor === "Default") ? account.site.logoColor || null : iconColor }}
@@ -201,6 +217,7 @@ const SiteCard = (props) => {
           <div />
         )}
       </ReactCardFlip>
+      </>
     //</Col>
   );
 };

src/components/SyncToggle/SyncToggle.js

@@ -1,12 +1,25 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
 import ToggleButton from 'react-toggle-button';
 import { setRemoteUser, setupReplication, teardownReplication } from 'trace-search';
 import Auth from "@aws-amplify/auth";
+import NotificationAlert from "react-notification-alert";
 
 function SyncToggle() {
   const [replicate, setReplicate] = useState(false);
   const [isLoggedIn, setIsLoggedIn] = useState(false);
 
+  const notificationAlertRef = useRef(null);
+  const toast = (message, type) => {
+    var options = {};
+    options = {
+      place: "bc",
+      message: (<span>{message}</span>),
+      type: type,
+      autoDismiss: 7,
+    };
+    notificationAlertRef.current.notificationAlert(options);
+  }
+
   useEffect(() => {
     (async () => {
       try {
@@ -23,7 +36,7 @@ function SyncToggle() {
   useEffect(() => {
     async function handleReplication() {
       if (!isLoggedIn && replicate) {
-        alert('You must sign in to use sync!');
+        toast('You must sign in to use sync!', "danger");
         setReplicate(false);
         return;
       }
@@ -36,12 +49,12 @@ function SyncToggle() {
           const replicator = obj.TODO_replication;
 
           replicator.on('error', (e) => {
-            alert(`Replication error: ${e.message || e}`);
+            toast(`Replication error: ${e.message || e}`, "danger");
             console.error(e);
             setReplicate(false);
           });
         } catch(e) {
-          alert(`Replication error: ${e.message || e}`);
+          toast(`Replication error: ${e.message || e}`, "danger");
           console.error(e);
           setReplicate(false);
           return;
@@ -59,15 +72,20 @@ function SyncToggle() {
   }, [replicate, isLoggedIn]);
 
   return(
-    <div style={{ textAlign: 'center' }}>
-      Sync
-        <ToggleButton
-          inactiveLabel={<span>Off</span>}
-          activeLabel={<span>On</span>}
-          value={replicate || false}
-          onToggle={() => setReplicate(prev => !prev) }
-          />
-    </div>
+    <>
+      <div className="react-notification-alert-container">
+        <NotificationAlert ref={notificationAlertRef} />
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        Sync
+          <ToggleButton
+            inactiveLabel={<span>Off</span>}
+            activeLabel={<span>On</span>}
+            value={replicate || false}
+            onToggle={() => setReplicate(prev => !prev) }
+            />
+      </div>
+    </>
   );
 }
 

src/views/Analytics.js

@@ -58,7 +58,7 @@ function Analytics(props) {
                 <Row>
                   <Col className="text-left" sm="6">
                     <h5 className="card-category">Public Profile</h5>
-                    <CardTitle tag="h2">[Data] Visitors</CardTitle>
+                    <CardTitle tag="h2" style={{opacity: "0"}}>placeholder</CardTitle>
                   </Col>
                 </Row>
               </CardHeader>
@@ -78,12 +78,12 @@ function Analytics(props) {
              <Col lg="4" key={account.id}>
               <Card className="card-chart">
                 <CardHeader>
-                  {/* <h5 className="card-category">[Data] Interactions</h5> */}
                   <CardTitle tag="h3">
                     <i className="tim-icons icon-single-02" style={{paddingRight: "5px"}}/>
-                    {account.site.name}
-                    <br/>
+                    {account.site.name} -
                     <a href={account.url}> @{account.userName}</a>
+                    <br/>
+                    <h4 style={{opacity: "0"}}>placeholder</h4>
                   </CardTitle>
                 </CardHeader>
                 <CardBody>