From a48b8139f689fdfbccc344440f1187365be193e7 Mon Sep 17 00:00:00 2001 From: Gana016 <jayam.ganapathi12@gmail.com> Date: Sat, 6 Mar 2021 13:09:26 +0530 Subject: [PATCH] updated loading screen and power button bug --- digital-course-file/package-lock.json | 21 +++++++++++++++++++++ digital-course-file/package.json | 1 + digital-course-file/src/App.css | 8 ++++++++ digital-course-file/src/index.js | 1 + digital-course-file/src/user/Hero.js | 13 ++++++++++++- 5 files changed, 43 insertions(+), 1 deletion(-) diff --git a/digital-course-file/package-lock.json b/digital-course-file/package-lock.json index 49a1ce8..d704cbe 100644 --- a/digital-course-file/package-lock.json +++ b/digital-course-file/package-lock.json @@ -22,6 +22,7 @@ "react-github-login-button": "^1.0.1", "react-google-button": "^0.7.2", "react-icons": "^4.2.0", + "react-loader-spinner": "^4.0.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.2", "web-vitals": "^1.1.0" @@ -15612,6 +15613,18 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "node_modules/react-loader-spinner": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz", + "integrity": "sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "*", + "react-dom": "*" + } + }, "node_modules/react-overlays": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz", @@ -34020,6 +34033,14 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-loader-spinner": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/react-loader-spinner/-/react-loader-spinner-4.0.0.tgz", + "integrity": "sha512-RU2vpEej6G4ECei0h3q6bgLU10of9Lw5O+4AwF/mtkrX5oY20Sh/AxoPJ7etbrs/7Q3u4jN5qwCwGLRKCHpk6g==", + "requires": { + "prop-types": "^15.7.2" + } + }, "react-overlays": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-4.1.1.tgz", diff --git a/digital-course-file/package.json b/digital-course-file/package.json index f787749..9f134ac 100644 --- a/digital-course-file/package.json +++ b/digital-course-file/package.json @@ -18,6 +18,7 @@ "react-github-login-button": "^1.0.1", "react-google-button": "^0.7.2", "react-icons": "^4.2.0", + "react-loader-spinner": "^4.0.0", "react-router-dom": "^5.2.0", "react-scripts": "4.0.2", "web-vitals": "^1.1.0" diff --git a/digital-course-file/src/App.css b/digital-course-file/src/App.css index 67d9866..e9587fd 100644 --- a/digital-course-file/src/App.css +++ b/digital-course-file/src/App.css @@ -128,3 +128,11 @@ body { padding-top: 10px; text-align: center; } + +.centered { + position: fixed; + top: 50%; + left: 50%; + margin-top: -50px; + margin-left: -100px; +} diff --git a/digital-course-file/src/index.js b/digital-course-file/src/index.js index c801aa0..b140998 100644 --- a/digital-course-file/src/index.js +++ b/digital-course-file/src/index.js @@ -3,5 +3,6 @@ import ReactDOM from 'react-dom'; // import './styles.css'; import Routes from "./Routes" import "bootstrap/dist/css/bootstrap.min.css" +import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"; ReactDOM.render(<Routes/>,document.getElementById("root")); \ No newline at end of file diff --git a/digital-course-file/src/user/Hero.js b/digital-course-file/src/user/Hero.js index 552cccf..4272da3 100644 --- a/digital-course-file/src/user/Hero.js +++ b/digital-course-file/src/user/Hero.js @@ -8,10 +8,21 @@ import Deffolders from './Deffolders' import { useParams } from 'react-router-dom' import copyright from './copyright' import { Link } from 'react-router-dom' +import Loader from "react-loader-spinner"; const Hero = ({ handleLogout }) => { const { folderId } = useParams() const { folder, childFolders } = useFolder(folderId) + console.log(folder); + if (!folder) { + return <><div className='centered'><Loader + type="Puff" + color="#00BFFF" + height={100} + width={100} + timeout={3000} //3 secs + /></div></> + } return ( <> @@ -31,7 +42,7 @@ const Hero = ({ handleLogout }) => { <div className='d-flex align-items-center'> <FolderNav currentFolder={folder} /> <AddFolder currentFolder={folder} /> - {childFolders.length == 0 && <Deffolders currentFolder={folder} />} + {(childFolders.length == 0 && folder.id==null) && <Deffolders currentFolder={folder} />} </div> {childFolders.length > 0 && ( -- GitLab