Fixed UI bugs (load anim), improved file upload screen, added new queries alongside better contact screen for a given person, added more padding in home screen to avoid bottom nav from overlapping images, fixed some errors due to react keys in arrays.

barbarebelge · barbarebelge · commit 64fd39713d0c · 2021-07-23T17:41:54.000+02:00
diff --git a/src/App.css b/src/App.css
@@ -21,6 +21,7 @@
 
 .app-div
 {
+  position: absolute;
   margin: 0;
   padding: 0;
   width: 100%;
@@ -37,7 +38,9 @@
 
 .content
 {
-  padding: 20px;
+  height:  100%;
+  width: 100%;
+  padding: 20px 20px 70px 20px; /* slightly more at bottom, account for bottom nav*/
 }
 
 
diff --git a/src/App.js b/src/App.js
@@ -162,8 +162,9 @@ function BottomNavBar(props)
     let gotoScreen = props.gotoScreen;
     let [location, setLocation] = useState("/");
 
-    const handleChange = async (event, newValue) => {await setLocation(newValue); await gotoScreen(newValue)};
-
+    // NOTICE: we false as last parameter of gotoScreen, because we consider all the navigation tabs independent
+    // and as such we want hidden parameters to be updated after the screen change to not cause errors
+    const handleChange = async (event, newValue) => {await setLocation(newValue); await gotoScreen(newValue, null, false)};
 
     return(
         <BottomNavigation className={classes.appBar} value={location} onChange={handleChange}
@@ -181,7 +182,7 @@ function BottomNavBar(props)
 function Home(props)
 {
     let [notifMsg, setNotifMsg] = useState("");
-    let [notifType, setNotifType] = useState("");
+    let [notifType, setNotifType] = useState("info");
     let [loadingAnim, setLoadingAnim] = useState(false); // when first loading, show anim
     let [urlHiddenParams, setUrlHiddenParams] = useState([]);
 
@@ -205,19 +206,35 @@ function Home(props)
     };
 
 
-    async function gotoScreen(screenPath, hiddenParams = null)
+    async function gotoScreen(screenPath, hiddenParams = null, updateHiddenParamsBefore=true)
     {
         console.log(`goto ${screenPath} ...`);
         console.log(`hidden params:\n`, hiddenParams);
-        await setUrlHiddenParams(hiddenParams);
+
+        // By default, we update the hidden params before redirecting.
+        // This way, the newpage will have the proper parameters set before rendering
+        if (updateHiddenParamsBefore)
+        {
+            await setUrlHiddenParams(hiddenParams);
+        }
+        await setLoadingAnim(false); // always cancel loading anim when switching screen
         history.push(`${screenPath}`);
+
+        // Some screens rely on hidden params as props, hence they will show an error
+        // if we change the hidden param before changing location (since everything is reference in JS).
+        // In that case, we can avoid the problem by setting updateHiddenParamsBefore to false,
+        // hence updating such prop after the screen change.
+        if (! updateHiddenParamsBefore)
+        {
+            await setUrlHiddenParams(hiddenParams);
+        }
     }
 
     function showLoadingAnimation()
     {
         if (loadingAnim)
         {
-            return <CircularProgress size={100} style={{zIndex: 1600, position: "fixed", color: '#1a90ff'}}/>
+            return <CircularProgress color="secondary" size={100} style={{zIndex: 1700, opacity: ".7", position: "fixed", top: "45vh"}}/>
         }
     }
 
@@ -242,12 +259,15 @@ function Home(props)
     }
 
     return (<>
+            {showLoadingAnimation()}
             <MenuBar classes={classes} history={history} gotoScreen={gotoScreen}/>
             <Notification notifMsg={notifMsg} notifType={notifType}/>
-            {showLoadingAnimation()}
             <div className="content">
                 {/*</div>*/}
                 <Switch>
+                    <Route exact path="/redirect">
+                        <h1>Redirecting...</h1>
+                    </Route>
                     <Route exact path="/upload">
                         <FileUpload explorerPath={explorerPath} setNotifMsg={setNotifMsg}
                         setNotifType={setNotifType} setLoadingAnim={setLoadingAnim}/>
diff --git a/src/ContactDetails.js b/src/ContactDetails.js
@@ -1,31 +1,90 @@
 
 import React, {useState, useEffect} from "react";
 import {executeQuery} from "./rdf";
+import {getPODUrlFromWebId} from './pod';
+import {useSession} from "@inrupt/solid-ui-react";
 
+// using person file as source
+const getWebIdFromPersonFileQuery = "SELECT ?o WHERE { ?s <http://www.w3.org/2006/vcard/ns#value> ?o }";
+// using webid as source
+const getRoleQuery = "SELECT ?o WHERE { ?s <http://www.w3.org/2006/vcard/ns#role> ?o }";
+const getPODProviderUrlQuery = "SELECT ?o WHERE { ?s <http://www.w3.org/ns/solid/terms#oidcIssuer> ?o }";
+const getEmailCardUrlQuery = "SELECT ?o WHERE { ?s <http://www.w3.org/2006/vcard/ns#hasEmail> ?o }";
+// using email card url
+const getEmailFromEmailCardUrlQuery = "SELECT ?o WHERE { ?s <http://www.w3.org/2006/vcard/ns#value> ?o }";
 
 function ContactDetails(props)
 {
 	console.log("data:", props);
-	let username = props.realProps.match.params.username; //data.public;
-	let personFileUrl = props.urlHiddenParams[0]; //data.hidden;
+	let contactUsername = props.realProps.match.params.username; //data.public;
+	let contactPersonFileUrl = props.urlHiddenParams[0]; //data.hidden;
+	let [contactWebId,setContactWebId] = useState("");
+	let [contactPodUrl, setContactPodUrl] = useState("");
+	let [role, setRole] = useState("");
+	let [email, setEmail] = useState("");
 
-	// TODO: set the web id of the contact in useEffect()
-	// let [contactWebId, setContactWebId] = useState(""); 
-	// useEffect(() => {
+	const { session } = useSession();
+
+	function parseSingleResult(bindings)
+	{
+		return bindings[0]['_root'].entries[0][1]['id'].replace(/['"]+/g, '');
+	}
+
+	async function getContactDetailsFromPersonFile()
+	{
+		let resBindings = await executeQuery(getWebIdFromPersonFileQuery, [contactPersonFileUrl], session);
+		let parsedWebId = parseSingleResult(resBindings);
+		console.log("parsed contact webid:", parsedWebId);
+		setContactWebId(parsedWebId);
+		let newContactPodUrl =  getPODUrlFromWebId(parsedWebId);
+		setContactPodUrl(newContactPodUrl);
+		resBindings = await executeQuery(getRoleQuery, [parsedWebId], session);
+		console.log("role res:", resBindings);
+		if (resBindings.length > 0)
+		{
+			let parsedRole = parseSingleResult(resBindings);
+			setRole(parsedRole);
+		}
+		resBindings = await executeQuery(getEmailCardUrlQuery, [parsedWebId], session);
+		console.log("email card url res:", resBindings);
+		if (resBindings.length > 0)
+		{
+			let parsedEmailCardUrl = parseSingleResult(resBindings);
+			resBindings = await executeQuery(getEmailFromEmailCardUrlQuery, [parsedEmailCardUrl], session);
+			console.log("email res:", resBindings);
+			if (resBindings.length > 0)
+			{
+				let parsedEmail = parseSingleResult(resBindings);
+				setEmail(parsedEmail);
+			}
+		}
+		// let email = 
+	}
+
+	useEffect(() => {
+		getContactDetailsFromPersonFile();
+	}, [contactPersonFileUrl]);
+
+	
+	function showField(field)
+	{
+		return (<p>{field ? field : "-"}</p>);
+	}
 
-	// }, [username]);
 
 	return (
 		<>
-			<h1>Contact page of {username}</h1>
+			<h1>Contact page of {contactUsername}</h1>
 			<h4>Person file url:</h4>
-			<p>{personFileUrl}</p>
+			{showField(contactPersonFileUrl)}
 			<h4>WebId:</h4>
-			<p>todo</p>
+			{showField(contactWebId)}
+			<h4>POD url</h4>
+			{showField(contactPodUrl)}
 			<h4>Email:</h4>
-			<p>todo</p>
-			<h4>Nickname:</h4>
-			<p>todo</p>
+			{showField(email)}
+			<h4>Role</h4>
+			{showField(role)}
 		</>
 	);
 }
diff --git a/src/Contacts.css b/src/Contacts.css
@@ -1,10 +1,25 @@
 
 .contact {
+	margin:  0;
+	padding: 10px;
+	max-width: 600px;
 	display: flex;
-	flex-direction:  row;
+	flex-direction: row;
+	/*box-sizing: border-box;  allow the borders to consider */
+	
 }
 
 
+.contact:not(:first-child){
+	border-top: 1px solid grey;
+}
+
+.contact:last-child{
+	border-bottom: 1px solid grey;
+}
+
+
+
 .contact-name
 {
 	padding-left: 5px;
@@ -14,5 +29,6 @@
 {
 	/*border-left: 3px solid cyan;*/
 	color: cyan;
+	background-color:  red;
 }
 
diff --git a/src/Contacts.js b/src/Contacts.js
@@ -3,9 +3,7 @@
 import { useState,React, useEffect } from "react";
 import {executeQuery} from "./rdf";
 import "./Contacts.css";
-import {
-    useSession,
-  } from "@inrupt/solid-ui-react";
+import {useSession} from "@inrupt/solid-ui-react";
 
 import PersonIcon from '@material-ui/icons/Person';
 
@@ -61,7 +59,7 @@ function Contacts(props)
   	function Contact(props)
   	{
   		let binding = props.binding;
-  		const boundVariables = binding['_root'].entries.map(e => e[0]);
+  		// const boundVariables = binding['_root'].entries.map(e => e[0]);
 
   		let username = binding['_root'].entries[1][1]['id'].replace(/['"]+/g, '');
   		// username = username.replace("/(\"|\"$)/", '');
@@ -81,8 +79,8 @@ function Contacts(props)
 	
 	return (
 		<div>
-          {bindings.map(binding => {
-          		console.log("Binding:", binding); return (<Contact binding={binding}/>)
+          {bindings.map((binding, idx) => {
+          		console.log("Binding:", binding); return (<Contact key={idx} binding={binding}/>)
           	}) }
       	</div>
 	);
diff --git a/src/FileExplorer.js b/src/FileExplorer.js
@@ -106,7 +106,7 @@ function FileExplorer(props) {
         getFilesFromResourceURL(POD_URL).then((fileArray) => {
             setCurrentPath(POD_URL);
             setFiles(fileArray);
-            setLoadingAnim(false);
+            // setLoadingAnim(false);
         });
         
     }
diff --git a/src/FileUpload.css b/src/FileUpload.css
@@ -0,0 +1,5 @@
+
+.upload-section
+{
+	margin-top: 15px;
+}
diff --git a/src/FileUpload.js b/src/FileUpload.js
@@ -1,3 +1,6 @@
+
+import "./FileUpload.css"
+
 import React, {useState} from "react"
 
 // Import from "@inrupt/solid-client"
@@ -10,6 +13,10 @@ import {
     fetch
 } from '@inrupt/solid-client-authn-browser';
 
+import Button from '@material-ui/core/Button';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import SendIcon from '@material-ui/icons/Send';
+
 
 function FileUpload(props) {
     let currentPath = props.explorerPath;
@@ -35,7 +42,7 @@ function FileUpload(props) {
             // promise is undefined if the upload wasn't sucessful
             if (! res)
             {
-                errorMsg += "Could not upload '" + selectedFiles[i].name + "', the file might already exist.\n";
+                errorMsg += "'" + selectedFiles[i].name + "'";
             }
            
         }
@@ -44,7 +51,7 @@ function FileUpload(props) {
         if (errorMsg !== "")
         {
             await setNotifType("error");
-            await setNotifMsg(errorMsg);
+            await setNotifMsg("Could not upload file(s), they might already exist: " + errorMsg);
         }
         else if (selectedFiles.length > 0)
         {
@@ -93,32 +100,38 @@ function FileUpload(props) {
 
     function selectedFilesToReact() {
         let res = [];
-
+        let i = 0;
         // selectedFiles is iterable but not an array, 
         // so map() and forEach() functions don't work
         for (let file of selectedFiles) {
-            res.push(<li>{file.name}</li>);
+            res.push(<li key={i}>{file.name}</li>);
+            ++i;
         }
 
         return res;
     }
 
-    function showSelectedFiles() {
+    function showUploadSection() {
         return (
-            <div className="SelectedFilesDiv">
-                <p>Selected files:</p>
+            <div className="upload-section">
+                <h4>Selected files:</h4>
                 <ul>{selectedFilesToReact()}</ul>
+                <Button variant="contained" color="primary" onClick={upload}
+                endIcon={<SendIcon/>}>Upload</Button>
             </div>
         );
     }
 
     return (
         <div>
             <h1>Upload files</h1>
-            <p>Current path: {currentPath}</p>
-            <button className="Button" onClick={openFileSelectionWindow}>Add file(s)</button>
-            {showSelectedFiles()}
-            <button className="Button" onClick={upload}>Upload</button>
+            <h4>Destination:</h4>
+            <p>{currentPath}</p>
+            <Button variant="contained" color="primary" onClick={openFileSelectionWindow}
+            startIcon={<CloudUploadIcon/>}>
+                Select file(s)
+            </Button>
+            {selectedFiles.length > 0 ? showUploadSection() : null}
             <input id="file-input" type="file" multiple="multiple"
                 name="fileUploadInput"
                 className="file-selection"
diff --git a/src/GridView.js b/src/GridView.js

Original file line number	Diff line number	Diff line change
`@@ -21,6 +21,7 @@`
`21`	`21`
`22`	`22`	`.app-div`
`23`	`23`	`{`
	`24`	`+ position: absolute;`
`24`	`25`	`margin: 0;`
`25`	`26`	`padding: 0;`
`26`	`27`	`width: 100%;`
`@@ -37,7 +38,9 @@`
`37`	`38`
`38`	`39`	`.content`
`39`	`40`	`{`
`40`		`- padding: 20px;`
	`41`	`+ height: 100%;`
	`42`	`+ width: 100%;`
	`43`	`+ padding: 20px 20px 70px 20px; /* slightly more at bottom, account for bottom nav*/`
`41`	`44`	`}`
`42`	`45`
`43`	`46`
Original file line number	Diff line number	Diff line change
`@@ -106,7 +106,7 @@ function FileExplorer(props) {`
`106`	`106`	`getFilesFromResourceURL(POD_URL).then((fileArray) => {`
`107`	`107`	`setCurrentPath(POD_URL);`
`108`	`108`	`setFiles(fileArray);`
`109`		`- setLoadingAnim(false);`
	`109`	`+ // setLoadingAnim(false);`
`110`	`110`	`});`
`111`	`111`
`112`	`112`	`}`