From 622baeb59fe9b5aaba2b81277566e1e59198fa36 Mon Sep 17 00:00:00 2001
From: frikky <fredrik_9490@hotmail.com>
Date: Fri, 14 Jan 2022 23:35:50 +0100
Subject: [PATCH] Added basic reloading UX fixes

---
 frontend/src/views/AngularWorkflow.jsx |   1 +
 frontend/src/views/Apps.jsx            |  36 +++++--
 frontend/src/views/SettingsPage.jsx    |  13 +++
 frontend/src/views/Workflows.jsx       | 126 +++++++++++++------------
 4 files changed, 111 insertions(+), 65 deletions(-)

diff --git a/frontend/src/views/AngularWorkflow.jsx b/frontend/src/views/AngularWorkflow.jsx
index b38dea69..c559b3b8 100644
--- a/frontend/src/views/AngularWorkflow.jsx
+++ b/frontend/src/views/AngularWorkflow.jsx
@@ -11998,6 +11998,7 @@ const AngularWorkflow = (defaultprops) => {
     	      <Button
     	        style={{ borderRadius: "0px" }}
     	        disabled={newVariableName.length === 0}
+							variant="contained"
     	        onClick={() => {
     	          console.log("VARIABLES! ", newVariableName);
     	          if (
diff --git a/frontend/src/views/Apps.jsx b/frontend/src/views/Apps.jsx
index ca789593..75238e70 100644
--- a/frontend/src/views/Apps.jsx
+++ b/frontend/src/views/Apps.jsx
@@ -25,7 +25,9 @@ import {
   DialogActions,
   DialogContent,
   CircularProgress,
+  Zoom,
 } from "@material-ui/core";
+
 import {
   LockOpen as LockOpenIcon,
   OpenInNew as OpenInNewIcon,
@@ -201,6 +203,7 @@ const Apps = (props) => {
 
   const [isDropzone, setIsDropzone] = React.useState(false);
   const upload = React.useRef(null);
+  const [firstLoad, setFirstLoad] = React.useState(true);
   const isCloud =
     window.location.host === "localhost:3002" ||
     window.location.host === "shuffler.io"
@@ -343,7 +346,9 @@ const Apps = (props) => {
           }
         }
 
-        //runAppSearch("")
+				//setTimeout(() => {
+				//	setFirstLoad(false)
+				//}, 5000)
       })
       .catch((error) => {
         alert.error(error.toString());
@@ -435,7 +440,10 @@ const Apps = (props) => {
   };
 
   // dropdown with copy etc I guess
-  const appPaper = (data) => {
+  const AppPaper = (props) => {
+		const { app } = props
+		const data = app
+
     if (data.name === "" && data.id === "") {
       return null;
     }
@@ -1376,6 +1384,7 @@ const Apps = (props) => {
     }
   }, [appValidation, isDropzone]);
 
+	var appDelay = -75 
   const appView = isLoggedIn ? (
     <Dropzone
       style={{ width: viewWidth * 2 + 20, margin: "auto", padding: 20 }}
@@ -1504,13 +1513,28 @@ const Apps = (props) => {
             {apps.length > 0 ? (
               filteredApps.length > 0 ? (
                 <div style={{ height: "75vh", overflowY: "auto" }}>
-                  {filteredApps.map((app) => {
-                    return appPaper(app);
+                  {filteredApps.map((app, index) => {
+										if (firstLoad) {
+											appDelay += 75
+										} else {
+											//return returnData 
+                    	return <AppPaper app={app} />
+										}
+
+                    return (
+											<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
+												<span>
+													<AppPaper app={app} />
+												</span>
+											</Zoom>
+										)
                   })}
                   {cursearch.length > 0
                     ? null
-                    : searchableApps.map((app) => {
-                        return appPaper(app);
+                    : searchableApps.map((app, index) => {
+                        return (
+													<AppPaper app={app} />
+												)
                       })}
                 </div>
               ) : (
diff --git a/frontend/src/views/SettingsPage.jsx b/frontend/src/views/SettingsPage.jsx
index 7f60aef0..2d284e60 100644
--- a/frontend/src/views/SettingsPage.jsx
+++ b/frontend/src/views/SettingsPage.jsx
@@ -727,6 +727,19 @@ const Settings = (props) => {
         <Divider style={{ marginTop: "40px" }} />
         <h2>Platform Earnings</h2>
         <div style={{ display: runFlex ? "flex" : "", width: "100%" }}>
+					<div>
+						<Button
+							style={{ height: 40, marginTop: 10 }}
+							variant="outlined"
+							color="primary"
+							fullWidth={true}
+							onClick={() => {
+								handleEthereumConnection();
+							}}
+						>
+							Connect to Github
+						</Button>
+					</div>
           <div style={{ flex: 1, display: "flex" }}>
             <div>
               {userdata.eth_info !== undefined &&
diff --git a/frontend/src/views/Workflows.jsx b/frontend/src/views/Workflows.jsx
index 072238c6..b1e7f13c 100644
--- a/frontend/src/views/Workflows.jsx
+++ b/frontend/src/views/Workflows.jsx
@@ -2605,7 +2605,6 @@ const Workflows = (props) => {
 
     return (
       <div style={viewStyle}>
-
         <div style={workflowViewStyle}>
           <div style={{ display: "flex" }}>
             <div style={{ flex: 3 }}>
@@ -2724,71 +2723,75 @@ const Workflows = (props) => {
                   data.large_image = theme.palette.defaultImage;
                 }
 
+								const returnData = 
+									<span key={index} style={{ zIndex: 10 }}>
+										<IconButton
+											style={{
+												backgroundColor: "transparent",
+												margin: 0,
+												padding: 12,
+											}}
+											onClick={() => {
+												console.log("FILTER: ", data);
+												addFilter(data.app_name);
+											}}
+										>
+											<Tooltip
+												title={`Filter by ${data.app_name}`}
+												placement="top"
+											>
+												<Badge
+													badgeContent={0}
+													color="secondary"
+													style={{ fontSize: 10 }}
+												>
+													<div
+														style={{
+															height: imgSize,
+															width: imgSize,
+															position: "relative",
+															filter: "brightness(0.6)",
+															backgroundColor: "#000",
+															borderRadius: imgSize / 2,
+															zIndex: 100,
+															overflow: "hidden",
+															display: "flex",
+															justifyContent: "center",
+														}}
+													>
+														<img
+															style={{
+																height: imgSize,
+																width: imgSize,
+																position: "absolute",
+																top: -2,
+																left: -2,
+																cursor: "pointer",
+																zIndex: 99,
+																border: "2px solid rgba(255,255,255,0.7)",
+															}}
+															alt={data.app_name}
+															src={data.large_image}
+														/>
+													</div>
+												</Badge>
+											</Tooltip>
+										</IconButton>
+									</span>
+
 								if (firstLoad) {
 									appDelay += 75
 								} else {
-									appDelay = 0
+									//appDelay = 0
+									return returnData 
 								}
 
                 return (
 									<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
-                  <span key={index} style={{ zIndex: 10 }}>
-                    <IconButton
-                      style={{
-                        backgroundColor: "transparent",
-                        margin: 0,
-                        padding: 12,
-                      }}
-                      onClick={() => {
-                        console.log("FILTER: ", data);
-                        addFilter(data.app_name);
-                      }}
-                    >
-                      <Tooltip
-                        title={`Filter by ${data.app_name}`}
-                        placement="top"
-                      >
-                        <Badge
-                          badgeContent={0}
-                          color="secondary"
-                          style={{ fontSize: 10 }}
-                        >
-                          <div
-                            style={{
-                              height: imgSize,
-                              width: imgSize,
-                              position: "relative",
-                              filter: "brightness(0.6)",
-                              backgroundColor: "#000",
-                              borderRadius: imgSize / 2,
-                              zIndex: 100,
-                              overflow: "hidden",
-                              display: "flex",
-                              justifyContent: "center",
-                            }}
-                          >
-                            <img
-                              style={{
-                                height: imgSize,
-                                width: imgSize,
-                                position: "absolute",
-                                top: -2,
-                                left: -2,
-                                cursor: "pointer",
-                                zIndex: 99,
-                                border: "2px solid rgba(255,255,255,0.7)",
-                              }}
-                              alt={data.app_name}
-                              src={data.large_image}
-                            />
-                          </div>
-                        </Badge>
-                      </Tooltip>
-                    </IconButton>
-                  </span>
+										{returnData}
 									</Zoom>
-                );
-              })}
+              );
+            })}
             </div>
           ) : null}
           {view === "grid" ? (
@@ -2796,11 +2799,16 @@ const Workflows = (props) => {
 							<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
               	<NewWorkflowPaper />
 							</Zoom>
+
               {filteredWorkflows.map((data, index) => {
   							if (firstLoad) {
 									workflowDelay += 75
 								} else {
-									workflowDelay = 0
+									return (
+      							<Grid item xs={4} style={{ padding: "12px 10px 12px 10px" }}>
+											<WorkflowPaper key={index} data={data} />
+      							</Grid>
+									)
 								}
 
                 return (