added lazyload for postList , remove support for material-ui, removed…

… repeated code

Client/package.json

@@ -5,8 +5,6 @@
   "dependencies": {
     "@ckeditor/ckeditor5-build-classic": "^22.0.0",
     "@ckeditor/ckeditor5-react": "^2.1.0",
-    "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
@@ -17,6 +15,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-icons": "^3.11.0",
+    "react-lazyload": "^3.0.0",
     "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.3",
     "react-string-replace": "^0.4.4",

Client/src/App.js

@@ -11,6 +11,7 @@ import Post from './components/post';
 import Tag from './components/tag';
 import EditProfile from './components/EditProfile';
 import CreatePost from './components/Create';
+import Loading from './components/Loading';
 
 class App extends React.Component{
 
@@ -77,8 +78,8 @@ class App extends React.Component{
         {
             return(
                 <BrowserRouter>
-                <div>
-                    <h3>Loading....</h3>
+                <div className="d-flex justify-content-center align-items-center">
+                    <Loading />
                 </div>
                 </BrowserRouter>
             )

Client/src/components/AllTags.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+const AllTags = ({ tags }) => {
+
+    return tags.map(tag => (
+        <Link to={'/tags/'+tag.substring(1,tag.length)}>
+            <button 
+            className="btn btn-outline-secondary m-2" 
+            style={{fontFamily:"cursive",color:"black",border:"2px solid black"}}>
+                { tag }
+            </button>
+        </Link>));
+};
+
+export default AllTags;

Client/src/components/Loading.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import loadgif from '../image/loading_gif.gif';
+
+const height = {
+    height : "4rem"
+};
+
+const Loading = () => {
+
+    return <div className="mb-4">
+        <img 
+        style={height}
+        src={ loadgif } 
+        alt="loading gif" /> 
+    </div>
+};
+
+export default Loading;