Commit e5c83406 authored by Kacprzak, Izabella's avatar Kacprzak, Izabella
Browse files

Added Loading.. message while waiting for database [IK]

parent f23e5ce6
Pipeline #201907 passed with stages
in 2 minutes and 30 seconds
{
"files": {
"main.css": "/static/react/css/main.953731b2.chunk.css",
"main.js": "/static/react/js/main.f940880a.chunk.js",
"main.js.map": "/static/react/js/main.f940880a.chunk.js.map",
"main.js": "/static/react/js/main.f0aa117c.chunk.js",
"main.js.map": "/static/react/js/main.f0aa117c.chunk.js.map",
"runtime-main.js": "/static/react/js/runtime-main.2ec97bd9.js",
"runtime-main.js.map": "/static/react/js/runtime-main.2ec97bd9.js.map",
"js/2.d9c95973.chunk.js": "/static/react/js/2.d9c95973.chunk.js",
......@@ -17,6 +17,6 @@
"js/runtime-main.2ec97bd9.js",
"js/2.d9c95973.chunk.js",
"css/main.953731b2.chunk.css",
"js/main.f940880a.chunk.js"
"js/main.f0aa117c.chunk.js"
]
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/static/react/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/static/react/logo192.png"/><link rel="manifest" href="/static/react/manifest.json"/><title>React App</title><script>window.token="{{DRP_token}}"</script><link href="/static/react/css/main.953731b2.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,u,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)u=i[s],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&p.push(o[u][0]),o[u]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return a.push.apply(a,l||[]),t()}function t(){for(var e,r=0;r<a.length;r++){for(var t=a[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(a.splice(r--,1),e=u(u.s=t[0]))}return e}var n={},o={1:0},a=[];function u(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,u),t.l=!0,t.exports}u.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var a,i=document.createElement("script");i.charset="utf-8",i.timeout=120,u.nc&&i.setAttribute("nonce",u.nc),i.src=function(e){return u.p+"js/"+({}[e]||e)+"."+{3:"b496c8d9"}[e]+".chunk.js"}(e);var c=new Error;a=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+a+")",c.name="ChunkLoadError",c.type=n,c.request=a,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){a({type:"timeout",target:i})}),12e4);i.onerror=i.onload=a,document.head.appendChild(i)}return Promise.all(r)},u.m=e,u.c=n,u.d=function(e,r,t){u.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,r){if(1&r&&(e=u(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(u.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)u.d(t,n,function(r){return e[r]}.bind(null,n));return t},u.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(r,"a",r),r},u.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},u.p="/static/react/",u.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpinaglobe-dashboard"]=this["webpackJsonpinaglobe-dashboard"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="/static/react/js/2.d9c95973.chunk.js"></script><script src="/static/react/js/main.f940880a.chunk.js"></script></body></html>
\ No newline at end of file
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/static/react/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/static/react/logo192.png"/><link rel="manifest" href="/static/react/manifest.json"/><title>React App</title><script>window.token="{{DRP_token}}"</script><link href="/static/react/css/main.953731b2.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,u,i=r[0],c=r[1],l=r[2],s=0,p=[];s<i.length;s++)u=i[s],Object.prototype.hasOwnProperty.call(o,u)&&o[u]&&p.push(o[u][0]),o[u]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(e[n]=c[n]);for(f&&f(r);p.length;)p.shift()();return a.push.apply(a,l||[]),t()}function t(){for(var e,r=0;r<a.length;r++){for(var t=a[r],n=!0,i=1;i<t.length;i++){var c=t[i];0!==o[c]&&(n=!1)}n&&(a.splice(r--,1),e=u(u.s=t[0]))}return e}var n={},o={1:0},a=[];function u(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,u),t.l=!0,t.exports}u.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var a,i=document.createElement("script");i.charset="utf-8",i.timeout=120,u.nc&&i.setAttribute("nonce",u.nc),i.src=function(e){return u.p+"js/"+({}[e]||e)+"."+{3:"b496c8d9"}[e]+".chunk.js"}(e);var c=new Error;a=function(r){i.onerror=i.onload=null,clearTimeout(l);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),a=r&&r.target&&r.target.src;c.message="Loading chunk "+e+" failed.\n("+n+": "+a+")",c.name="ChunkLoadError",c.type=n,c.request=a,t[1](c)}o[e]=void 0}};var l=setTimeout((function(){a({type:"timeout",target:i})}),12e4);i.onerror=i.onload=a,document.head.appendChild(i)}return Promise.all(r)},u.m=e,u.c=n,u.d=function(e,r,t){u.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},u.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},u.t=function(e,r){if(1&r&&(e=u(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(u.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)u.d(t,n,function(r){return e[r]}.bind(null,n));return t},u.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return u.d(r,"a",r),r},u.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},u.p="/static/react/",u.oe=function(e){throw console.error(e),e};var i=this["webpackJsonpinaglobe-dashboard"]=this["webpackJsonpinaglobe-dashboard"]||[],c=i.push.bind(i);i.push=r,i=i.slice();for(var l=0;l<i.length;l++)r(i[l]);var f=c;t()}([])</script><script src="/static/react/js/2.d9c95973.chunk.js"></script><script src="/static/react/js/main.f0aa117c.chunk.js"></script></body></html>
\ No newline at end of file
......@@ -9,7 +9,7 @@ const AddProjectTask = () => {
const [priority, setPriority] = useState(1);
const [completed, setCompleted] = useState(false);
const { id } = useParams();
const { data: project, error } = useFetch("/projects/" + id)
const { data: project, error, isPending } = useFetch("/projects/" + id)
const history = useHistory();
......@@ -36,7 +36,8 @@ const AddProjectTask = () => {
return (
<div className="add-project-task">
<h2>Add a new task</h2>
<form onSubmit={handleSubmit}>
{ isPending && <h2>Loading...</h2> }
{ project && <form onSubmit={handleSubmit}>
<label>Description</label>
<input
type="text"
......@@ -71,7 +72,7 @@ const AddProjectTask = () => {
<option value="Completed">Completed</option>
</select>
<button>Add task</button>
</form>
</form> }
</div>
);
}
......
......@@ -4,7 +4,7 @@ import useFetch from './useFetch'
const EditProject = () => {
const { id } = useParams();
const { data: {name, description, status, location, tag, files}, error } = useFetch("/projects/" + id)
const { data: {name, description, status, location, tag, files}, error, isPending } = useFetch("/projects/" + id)
const history = useHistory();
const oldProjectDetails = {
......@@ -33,7 +33,8 @@ const EditProject = () => {
return (
<div className="edit-project">
<h2>Edit project</h2>
<form onSubmit={handleSubmit(onSubmit)}>
{ isPending && <h2>Loading...</h2> }
{ name && <form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="name">Project name</label>
<input {...register("name")}
// type="text"
......@@ -67,7 +68,7 @@ const EditProject = () => {
<label>Google Drive folder</label>
<textarea {...register("files")} name="files" placeholder="Insert Google Drive Folder link here"></textarea>
<button type="submit">Save project details</button>
</form>
</form> }
</div>
);
}
......
......@@ -5,7 +5,7 @@ import useFetch from './useFetch'
const EditUser = () => {
const { username } = useParams();
const { data: {firstname, surname, password, title, email, bio, joined,
location, availability, partnership_opportunities, interests}, error } = useFetch("/users/" + username)
location, availability, partnership_opportunities, interests}, error, isPending } = useFetch("/users/" + username)
const history = useHistory();
const oldUserDetails = {
......@@ -39,7 +39,8 @@ const EditUser = () => {
return (
<div className="edit-user">
<h2>Edit user</h2>
<form onSubmit={handleSubmit(onSubmit)}>
{ isPending && <h2>Loading...</h2> }
{ firstname && <form onSubmit={handleSubmit(onSubmit)}>
<label htmlFor="firstname">Firstname</label>
<input {...register("firstname")}
placeholder="Input your first name here"
......@@ -98,7 +99,7 @@ const EditUser = () => {
placeholder="What are your hobbies?"
/>
<button type="submit">Save user details</button>
</form>
</form> }
</div>
);
}
......
......@@ -4,18 +4,20 @@ import useFetch from './useFetch'
const Home = () => {
const {data: projects, error1} = useFetch("/projects")
const {data: todos, error2} = useFetch("/todos")
const {data: projects, errorProjects, isPendingProjects} = useFetch("/projects")
const {data: todos, errorTodos, isPendingTodos} = useFetch("/todos")
return (
<div className="home">
<h1>Dashboard</h1>
<div className="home-projects" style={{float: "left", width: "600px"}}>
<ProjectList projects={projects} title="All Projects"/>
<ProjectList projects={projects.filter(project => project.status === "Completed")} title="Completed Projects"/>
{ isPendingProjects && <h2>Loading...</h2> }
{ projects && <ProjectList projects={projects} title="All Projects"/> }
{ projects && <ProjectList projects={projects.filter(project => project.status === "Completed")} title="Completed Projects"/> }
</div>
<div className="homeTodos">
<PersonalToDo todos={todos.filter(todo => todo.username === "john34")} title="Personal ToDo items"/>
{ isPendingTodos && <h2>Loading...</h2> }
{ todos && <PersonalToDo todos={todos.filter(todo => todo.username === "john34")} title="Personal ToDo items"/> }
</div>
</div>
......
......@@ -5,25 +5,23 @@ const MyProfile = () => {
const {username} = useParams();
const history = useHistory();
const {data: user, error} = useFetch("/users/john34")
const {data: user, error, isPending} = useFetch("/users/john34")
return (
<div className="my-profile">
{user && <h2>{user.firstname + " " + user.surname}</h2>}
{user && <h1>{"Username: " + user.username}</h1>}
{user && <h1>{"Title: " + user.title}</h1>}
{user && <h1>{"Email: " + user.email}</h1>}
{user && <h1>{"Bio: " + user.bio}</h1>}
{user && <h1>{"Joined: " + user.joined}</h1>}
{user && <h1>{"Location: " + user.location}</h1>}
{user && <h1>{"Availability: " + user.availability}</h1>}
{user && <h1>{"Partnership Opportunities: " + user.partnership_opportunities}</h1>}
{user && <h1>{"Interests: " + user.interests}</h1>}
</div>
{ isPending && <h2>Loading...</h2> }
{ user && <h2>{user.firstname + " " + user.surname}</h2> }
{ user && <h1>{"Username: " + user.username}</h1> }
{ user && <h1>{"Title: " + user.title}</h1> }
{ user && <h1>{"Email: " + user.email}</h1> }
{ user && <h1>{"Bio: " + user.bio}</h1> }
{ user && <h1>{"Joined: " + user.joined}</h1> }
{ user && <h1>{"Location: " + user.location}</h1> }
{ user && <h1>{"Availability: " + user.availability}</h1> }
{ user && <h1>{"Partnership Opportunities: " + user.partnership_opportunities}</h1> }
{ user && <h1>{"Interests: " + user.interests}</h1> }
</div>
);
}
......
......@@ -7,7 +7,7 @@ const PersonalToDo = ({ todos, title }) => {
document.getElementsByClassName("add-todo-form")[0].style.display = "block";
}
const { data: users, error } = useFetch("/users")
const { data: users, error, isPending } = useFetch("/users")
const [todo_desc, setTodoDesc] = useState("");
const [priority, setPriority] = useState(1);
......@@ -45,8 +45,10 @@ const PersonalToDo = ({ todos, title }) => {
<button onClick={openTaskForm}>Add a personal task</button>
</div>
{ isPending && <h2>Loading...</h2> }
<div className="add-todo-form">
<form onSubmit={handleSubmit}>
{ users && <form onSubmit={handleSubmit}>
<label>Task description</label>
<textarea value={todo_desc} onChange={(e) => setTodoDesc(e.target.value)} required placeholder="Add some awesome description!" ></textarea>
<label>Priority level</label>
......@@ -68,7 +70,7 @@ const PersonalToDo = ({ todos, title }) => {
{users.map(user => <option value={user.username}>{user.username}</option>)}
</select>
<button>Save task</button>
</form>
</form> }
</div>
<div className="personal-todos">
......
......@@ -6,7 +6,7 @@ const ProjectDetails = () => {
const { id } = useParams();
const history = useHistory();
const { data: project, error } = useFetch("/projects/" + id)
const { data: project, error, isPending } = useFetch("/projects/" + id)
const handleRemove = e => {
e.preventDefault()
......@@ -16,40 +16,41 @@ const ProjectDetails = () => {
return (
<div className="project-details">
{project && <h2>{project.name}</h2>}
{project && <button style={{
{ isPending && <h2>Loading...</h2> }
{ project && <h2>{project.name}</h2> }
{ project && <button style={{
fontSize: '20px',
color: '#fff',
marginBottom: '30px',
marginright: '10px',
borderRadius: '8px',
backgroundColor: '#f1b535'
}}>Status: {project.status}</button>}
{project && <button style={{
}}>Status: {project.status}</button> }
{ project && <button style={{
fontSize: '20px',
color: '#fff',
marginBottom: '30px',
marginRight: '10px',
borderRadius: '8px',
backgroundColor: '#595bc0'
}}>{project.tag}</button>}
{project && <h4>Location: {project.location}</h4>}
{project && <button onClick={(e) => {
}}>{project.tag}</button> }
{ project && <h4>Location: {project.location}</h4> }
{ project && <button onClick={(e) => {
e.preventDefault();
window.open(project.files, "_blank");
}}>Documents</button>}
{project && <p>{project.description}</p>}
}}>Documents</button> }
{ project && <p>{project.description}</p> }
<div className="project-tasks">
{project && <Link to={`/projects/${project.id}/tasks`} className="view-tasks-button">View Tasks</Link>}
{ project && <Link to={`/projects/${project.id}/tasks`} className="view-tasks-button">View Tasks</Link> }
{project && <Link to={`/projects/${project.id}/add-task`} className="add-task-button">Add Task</Link>}
{ project && <Link to={`/projects/${project.id}/add-task`} className="add-task-button">Add Task</Link> }
</div>
<div>
{project && <button onClick={handleRemove}>Delete project</button>}
{ project && <button onClick={handleRemove}>Delete project</button> }
{project && <Link to={`/edit-project/${project.id}`} className="edit-project-button">Edit project</Link>}
{ project && <Link to={`/edit-project/${project.id}`} className="edit-project-button">Edit project</Link> }
</div>
</div>
......
......@@ -6,20 +6,21 @@ import { Link } from "react-router-dom"
const ProjectTasks = () => {
const { id } = useParams();
const { data: project, error } = useFetch("/projects/" + id)
const { data: project, errorProject, isPendingProject } = useFetch("/projects/" + id)
const { data: project_tasks, error2 } = useFetch("/projects/" + id + "/tasks");
const { data: project_tasks, errorTasks, isPendingTasks } = useFetch("/projects/" + id + "/tasks");
return (
<div className="project-tasks">
{project_tasks && <h1>{project.name}: tasks</h1>}
{ project && <h1>{project.name}: tasks</h1>}
<h2>Ongoing Project Tasks</h2>
{project_tasks && <ProjectTaskList project_tasks={project_tasks.filter(task => !task.completed)} />}
{ isPendingTasks && <h2>Loading...</h2> }
{ project_tasks && <ProjectTaskList project_tasks={project_tasks.filter(task => !task.completed)}/> }
<h2>Completed Project Tasks</h2>
{project_tasks && <ProjectTaskList project_tasks={project_tasks.filter(task => task.completed)} />}
{ project_tasks && <ProjectTaskList project_tasks={project_tasks.filter(task => task.completed)}/> }
<div className="add-task-button-wrapper">
{project_tasks && <Link to={`/projects/${project.id}/add-task`} className="add-task-button">Add Task</Link>}
{ project_tasks && <Link to={`/projects/${project.id}/add-task`} className="add-task-button">Add Task</Link> }
</div>
</div>
);
......
......@@ -6,7 +6,7 @@ const User = () => {
const {username} = useParams();
const history = useHistory();
const {data: user, error} = useFetch("/users/" + username)
const {data: user, error, isPending} = useFetch("/users/" + username)
const handleRemove = e => {
e.preventDefault()
......@@ -16,39 +16,40 @@ const User = () => {
return (
<div className="user">
<div>
{user && <h2>{user.firstname + " " + user.surname}</h2>}
</div>
{ isPending && <h2>Loading...</h2> }
{ user && <div>
<h2>{user.firstname + " " + user.surname}</h2>
</div> }
<div>
{user && <h3><strong>Username: </strong>{user.username}</h3>}
{user && <h3><strong>Email: </strong>{user.email}</h3>}
{user && <h3><strong>Title: </strong>{user.title}</h3>}
{user && <h3><strong>Joined: </strong>{user.joined}</h3>}
{user && <h3><strong>Location: </strong>{user.location}</h3>}
{user && <h3><strong>Availability: </strong>{user.availability}</h3>}
</div>
{ user && <div>
<h3><strong>Username: </strong>{user.username}</h3>
<h3><strong>Email: </strong>{user.email}</h3>
<h3><strong>Title: </strong>{user.title}</h3>
<h3><strong>Joined: </strong>{user.joined}</h3>
<h3><strong>Location: </strong>{user.location}</h3>
<h3><strong>Availability: </strong>{user.availability}</h3>
</div> }
<br />
<div>
{user && <label><strong>Bio</strong></label>}
{user && <p>{user.bio}</p>}
</div>
{ user && <div>
<label><strong>Bio</strong></label>
<p>{user.bio}</p>
</div> }
<div>
{user && <label><strong>Partnership Opportunities</strong></label>}
{user && <p>{user.partnership_opportunities}</p>}
</div>
{ user && <div>
<label><strong>Partnership Opportunities</strong></label>
<p>{user.partnership_opportunities}</p>
</div> }
<div>
{user && <label><strong>Interests</strong></label>}
{user && <p>{user.interests}</p>}
</div>
{ user && <div>
<label><strong>Interests</strong></label>
<p>{user.interests}</p>
</div> }
{user && <button onClick={handleRemove}>Delete user</button>}
{ user && <button onClick={handleRemove}>Delete user</button> }
{user && <Link to={`/edit-user/${username}`} className="edit-user-button">Edit details</Link>}
{ user && <Link to={`/edit-user/${username}`} className="edit-user-button">Edit details</Link> }
</div>
);
}
......
......@@ -3,12 +3,13 @@ import useFetch from './useFetch'
const Users = () => {
const {data: users, error2} = useFetch("/users")
const {data: users, error, isPending} = useFetch("/users")
return (
<div className="users">
<h1>Users</h1>
<UserList users={users} title="All Users"/>
{ isPending && <h2>Loading...</h2> }
{ users && <UserList users={users} title="All Users"/> }
</div>
);
}
......
......@@ -3,6 +3,7 @@ import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState([]);
const [error, setError] = useState(null);
const [isPending, setIsPending] = useState(true);
useEffect(() => {
fetch(url)
......@@ -14,8 +15,8 @@ const useFetch = (url) => {
})
.then(data => {
setData(data);
setIsPending(false);
setError(null);
console.log({data})
})
.catch(err => {
// auto catches network / connection error
......@@ -23,7 +24,7 @@ const useFetch = (url) => {
})
}, [url])
return { data, error };
return { data, error, isPending };
}
export default useFetch;
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment