diff --git a/digital-course-file/package-lock.json b/digital-course-file/package-lock.json index 49a1ce8a5baf8ef1db4976648c813960c9a15cfd..d704cbe303be8b01ab0df7c673ba2ee50bbfafaf 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 f787749489d020d2c589a16377f1555809b2783c..9f134ac65a46d08ff1d5680b6e869244ae2c266f 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 67d986617329d1150e44620b0bea8b39dd6faf82..e9587fda0ed805f9ece0be3275f37fd7496222be 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 c801aa0a9b30325b3974d1d848f8430e44ffcfae..b140998e280df0a52cea84584efd4d5b17048312 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 552cccf5b941070fda020565c815dcc51498bcf4..4272da39fb687054086889fcc0f56d5b8ec342af 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 && (