Improved performance

Changed the way that pages are imported in App.js to a more efficient, where the content is loaded only when needed. Changed the way that images are imported, using webp to decrease resources size when available. Removed unused dependencies and files. PWA implemented (turned off by default because of precaching).

src/App.js

@@ -16,8 +16,90 @@ GNU Affero General Public License for more details.
 You should have received a copy of the GNU Affero General Public License
 along with Plataforma Integrada MEC.  If not, see <http://www.gnu.org/licenses/>.*/
 
+// const = React.lazy(() => import());
+
 import React, { useContext, useEffect, useState } from "react";
 import { Store } from './Store'
+import LoadingSpinner from './Components/LoadingSpinner';
+import { BrowserRouter, Switch, Route, Redirect } from "react-router-dom";
+import Header from "./Components/Header";
+import createBrowserHistory from 'history/createBrowserHistory'
+
+const Unauthorized = React.lazy(() => import('./Admin/Components/Components/Unauthorized'));
+const Home = React.lazy(() => import('./Pages/HomeFunction'));
+const Search = React.lazy(() => import("./Pages/Search"));
+const EcFooter = React.lazy(() => import("./Components/EcFooter"));
+const GNUAGPLfooter = React.lazy(() => import("./Components/AGPLFooter"));
+const UserPage = React.lazy(() => import("./Pages/UserPage"));
+const UserTerms = React.lazy(() => import("./Pages/UserTerms"));
+const Contact = React.lazy(() => import("./Pages/Contact"));
+const Teste = React.lazy(() => import("./Pages/Teste"));
+const AboutPage = React.lazy(() => import("./Pages/AboutPage"));
+const HelpCenter = React.lazy(() => import("./Pages/HelpCenter"));
+const TabResoursePub = React.lazy(() => import("./Pages/TabsHelp/TabResoursePub"));
+const TabResourseFind = React.lazy(() => import("./Pages/TabsHelp/TabResourseFind"));
+const TabNetPart = React.lazy(() => import("./Pages/TabsHelp/TabNetPart"));
+const TabManageAc = React.lazy(() => import("./Pages/TabsHelp/TabManageAc"));
+const PasswordRecoveryPage = React.lazy(() => import("./Pages/PasswordRecoveryPage.js"));
+const PageProfessor = React.lazy(() => import("./Pages/PageProfessor.js"));
+const ResourcePage = React.lazy(() => import("./Pages/ResourcePage"));
+const TermsPage = React.lazy(() => import("./Pages/TermsPage.js"));
+const PublicationPermissionsPage = React.lazy(() => import("./Pages/PublicationPermissionsPage.js"));
+const TabPlataformaMEC = React.lazy(() => import("./Pages/TabsHelp/TabPlataformaMEC"));
+const ItemStore = React.lazy(() => import("./Pages/ItemStore.js"));
+const EditProfilePage = React.lazy(() => import("./Pages/EditProfilePage.js"));
+const PublicUserPage = React.lazy(() => import("./Pages/PublicUserPage.js"));
+const UploadPage = React.lazy(() => import("./Pages/UploadPage.js"));
+const EditLearningObjectPage = React.lazy(() => import("./Pages/EditLearningObjectPage.js"));
+const SiteMap = React.lazy(() => import("./Pages/SiteMap"));
+const Accessibility = React.lazy(() => import("./Pages/Accessibility"));
+const CollectionPage = React.lazy(() => import("./Pages/CollectionPage.js"));
+const FormationMaterialPage = React.lazy(() => import("./Pages/FormationMaterialPage.js"));
+const FormationMaterialIframe = React.lazy(() => import("./Pages/FormationMaterialIframe.js"));
+const MaterialPage = React.lazy(() => import("./Pages/MaterialPage"));
+const PageNotFound = React.lazy(() => import("./Pages/PageNotFound.js"));
+const NoteVariables = React.lazy(() => import("./Admin/Pages/Pages/SubPages/NoteVariables"));
+const Institution = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Institutions"));
+const SendEmail = React.lazy(() => import("./Admin/Pages/Pages/SubPages/SendEmail"));
+const Inframe = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Inframe"));
+const Languages = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Languages"));
+const Activity = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Activity"));
+const InstitutionCard = React.lazy(() => import("./Admin/Components/Components/DataCards/InstitutionsCard"));
+const InstitutionsInput = React.lazy(() => import("./Admin/Components/Components/Inputs/IntitutionsInputs"));
+const CreateInstitution = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateInstitution"));
+const NoteVarCard = React.lazy(() => import("./Admin/Components/Components/DataCards/NoteVarCard"));
+const NoteVarInputs = React.lazy(() => import("./Admin/Components/Components/Inputs/NoteVarInputs"));
+const EditLanguage = React.lazy(() => import("./Admin/Components/Components/Inputs/EditLanguage"));
+const CreateLanguage = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateLanguage"));
+const ActivityCard = React.lazy(() => import("./Admin/Components/Components/DataCards/ActivityCard"));
+const CommunityQuestions = React.lazy(() => import("./Admin/Pages/Pages/SubPages/CommunityQuestions"));
+const CommunityCard = React.lazy(() => import("./Admin/Components/Components/DataCards/CommunityQuestionCard"));
+const Collections = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Collections"));
+const CollectionCard = React.lazy(() => import("./Admin/Components/Components/DataCards/CollectionCard"));
+const EditCollection = React.lazy(() => import("./Admin/Components/Components/Inputs/EditCollection"));
+const Ratings = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Rating"));
+const RatingCard = React.lazy(() => import("./Admin/Components/Components/DataCards/RatingCard"));
+const EditRating = React.lazy(() => import("./Admin/Components/Components/Inputs/EditRating"));
+const CreateRating = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateRating"));
+const Questions = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Questions"));
+const CreateQuestions = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateQuestion"));
+const EducationalObject = React.lazy(() => import("./Admin/Pages/Pages/SubPages/EducationalObjects"));
+const EducationalObjectCard = React.lazy(() => import("./Admin/Components/Components/DataCards/EducationalObjectsCard"));
+const EducationalObjectEdit = React.lazy(() => import("./Admin/Components/Components/Inputs/EditEducationalObect"));
+const Complaints = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Complaints"));
+const ComplaintCard = React.lazy(() => import("./Admin/Components/Components/DataCards/ComplaintsCard"));
+const AproveTeacher = React.lazy(() => import("./Admin/Pages/Pages/SubPages/AproveTeacher"));
+const UserCard = React.lazy(() => import("./Admin/Components/Components/DataCards/UserCard"));
+const EditUser = React.lazy(() => import("./Admin/Components/Components/Inputs/EditUser"));
+const UserList = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Users"));
+const UserPermissions = React.lazy(() => import("./Admin/Pages/Pages/SubPages/Permissions"));
+const EditRole = React.lazy(() => import("./Admin/Components/Components/Inputs/EditRoles"));
+const CreateRole = React.lazy(() => import("./Admin/Components/Components/Inputs/CreateRole"));
+const BlockedUser = React.lazy(() => import("./Admin/Pages/Pages/SubPages/BlockedUsers"));
+const AppBarAdmin = React.lazy(() => import('./Admin/Components/Components/AppBar'));
+
+
+/*
 import Unauthorized from './Admin/Components/Components/Unauthorized'
 import Home from "./Pages/HomeFunction";
 import Search from "./Pages/Search";
@@ -94,374 +176,387 @@ import CreateRole from "./Admin/Components/Components/Inputs/CreateRole";
 import BlockedUser from "./Admin/Pages/Pages/SubPages/BlockedUsers";
 import AppBarAdmin from './Admin/Components/Components/AppBar'
 import createBrowserHistory from 'history/createBrowserHistory'
+*/
 
 export default function App() {
-  // eslint-disable-next-line
-  const { state, dispatch } = useContext(Store);
-  const [hideFooter, setHideFooter] = useState(false);
-  const PiwikReactRouter = require('piwik-react-router');
-  const piwik = PiwikReactRouter({
-    url: '//piwik.c3sl.ufpr.br/',
-    siteId: 5
-  });
-  const customHistory = createBrowserHistory()
+    // eslint-disable-next-line
+    const { state, dispatch } = useContext(Store);
+    const [hideFooter, setHideFooter] = useState(false);
+    const PiwikReactRouter = require('piwik-react-router');
+    const piwik = PiwikReactRouter({
+        url: '//piwik.c3sl.ufpr.br/',
+        siteId: 5
+    });
+    const customHistory = createBrowserHistory()
 
-  const CheckUserPermission = () => {
-    let canUserEdit = false;
+    const CheckUserPermission = () => {
+        let canUserEdit = false;
 
-    if (state.userIsLoggedIn) {
-      const roles = [...state.currentUser.roles];
-      for (let i = 0; i < roles.length; i++)
-        if (roles[i].name === 'admin' || roles[i].name === 'editor')
-          canUserEdit = true;
-    }
-    else {
-      canUserEdit = false;
-    }
+        if (state.userIsLoggedIn) {
+            const roles = [...state.currentUser.roles];
+            for (let i = 0; i < roles.length; i++)
+                if (roles[i].name === 'admin' || roles[i].name === 'editor')
+                canUserEdit = true;
+        }
+        else {
+        canUserEdit = false;
+        }
 
-    return canUserEdit;
-  }
+        return canUserEdit;
+    }
 
-  useEffect(() => {
-    setHideFooter(String(window.location.href).includes("iframe-colecao"));
-  }, [window.location.href]);
+    useEffect(() => {
+        setHideFooter(String(window.location.href).includes("iframe-colecao"));
+    }, [window.location.href]);
 
-  useEffect(() => {
-    dispatch({
-      type: "WINDOW_SIZE",
-      innerWindow: {
-        width: window.innerWidth,
-        height: window.innerHeight,
-      },
-    });
-  }, []);
+    useEffect(() => {
+        dispatch({
+            type: "WINDOW_SIZE",
+            innerWindow: {
+                width: window.innerWidth,
+                height: window.innerHeight,
+            },
+        });
+    }, []);
 
-  useEffect(() => {
-    const setWindowSize = () => {
-      dispatch({
-        type: "WINDOW_SIZE",
-        innerWindow: {
-          width: window.innerWidth,
-          height: window.innerHeight,
-        },
-      });
-    };
+    useEffect(() => {
+        const setWindowSize = () => {
+            dispatch({
+                type: "WINDOW_SIZE",
+                innerWindow: {
+                    width: window.innerWidth,
+                    height: window.innerHeight,
+                },
+            });
+        };
 
-    window.addEventListener("resize", setWindowSize);
+        window.addEventListener("resize", setWindowSize);
 
-    return () => window.removeEventListener("resize", setWindowSize);
-  }, [window.innerWidth, window.innerHeight]);
+        return () => window.removeEventListener("resize", setWindowSize);
+    }, [window.innerWidth, window.innerHeight]);
 
-  const AdminTemplate = (props) => {
-    if (CheckUserPermission())
-      return (
-          <div style={{ backgroundColor: "	#D3D3D3" }}>
-            <AppBarAdmin />
-            <div style={{ padding: "2em" }}>
-              {props.inner}
+    const AdminTemplate = (props) => {
+        if (CheckUserPermission())
+            return (
+            <div style={{ backgroundColor: "	#D3D3D3" }}>
+                <AppBarAdmin />
+                <div style={{ padding: "2em" }}>
+                    {props.inner}
+                </div>
             </div>
-          </div>
-        )
-    else
-      return (
-        <div style={{ backgroundColor: "	#D3D3D3" }}>
-            <div style={{ padding: "2em" }}>
-              <Unauthorized />
+            )
+        else
+            return (
+            <div style={{ backgroundColor: "	#D3D3D3" }}>
+                <div style={{ padding: "2em" }}>
+                    <Unauthorized />
+                </div>
             </div>
-          </div>
-      )
-  }
+        )
+    }
+
+  const LoadingScreen = () => (
+    <div style={{
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: "translate(-50%, -50%)"
+    }}>
+        <LoadingSpinner/>
+    </div>
+  );
 
   return (
     // add piwik later
     // history={piwik.connectToHistory(customHistory)}
-    <BrowserRouter>
-      <Header />
-      <div
-        style={{
-          backgroundImage:
-            "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)",
-          height: "5px",
-        }}
-      ></div>
-      <link
-        href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
-        rel="stylesheet"
-      />
-      <Switch>
-        <Redirect from="/home" to="/" />
-        <Route path="/" exact={true} component={Home} />
-        <Route path="/busca" component={Search} />
-        <Route path="/perfil" component={UserPage} />
-        <Route path="/editarperfil" component={EditProfilePage} />
-        <Route path="/recurso/:recursoId" component={ResourcePage} />
-        <Route path="/termos-publicar-recurso" component={TermsPage} />
-        <Route path="/permission" component={PublicationPermissionsPage} />
-        {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
-        <Route path="/ajuda" component={HelpCenter} />
-        <Route path="/contato" component={Contact} />
-        <Route path="/termos" component={UserTerms} />
-        <Route path="/teste" component={Teste} />
-        <Route path="/sobre" component={AboutPage} />
-        <Route path="/mapa-site" component={SiteMap} />
-        <Route path="/acessibilidade" component={Accessibility} />
-        <Route path="/publicando-recurso" component={TabResoursePub} />
-        <Route path="/encontrando-recurso" component={TabResourseFind} />
-        <Route path="/participando-da-rede" component={TabNetPart} />
-        <Route path="/gerenciando-conta" component={TabManageAc} />
-        <Route path="/plataforma-mec" component={TabPlataformaMEC} />
-        <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
-        <Route path="/usuario-publico/:userId" component={PublicUserPage} />
-        <Route
-          path="/editar-recurso/:recursoId"
-          component={EditLearningObjectPage}
-        />
-        <Route path="/professor" component={PageProfessor} />
-        <Route path="/upload" component={UploadPage} />
-        <Route path="/loja" component={ItemStore} />
-        <Route path="/colecao-do-usuario/:id" component={CollectionPage} />
-        <Route path="/colecao" component={FormationMaterialPage} />
-        <Route path="/topico" component={FormationMaterialPage} />
-        <Route path="/iframe-colecao" component={FormationMaterialIframe} />
-        <Route path="/material-formacao" component={MaterialPage} />
-        
-        <Route 
-          path="/admin/home" 
-          exact={true} 
-          render={() => {
-            return <AdminTemplate inner={<Inframe/>}/>
-          }} 
-        />
-        <Route 
-          path="/admin/institutions" 
-          render={() => {
-            return <AdminTemplate inner={<Institution />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/institution" 
-          render={() => {
-            return <AdminTemplate inner={<InstitutionCard />}/>
-          }} 
-        />
-        <Route
-          path="/admin/institutionEdit"
-          render={() => {
-            return <AdminTemplate inner={<InstitutionsInput />}/>
-          }}
-        />
-        <Route
-          path="/admin/InstitutionCreate"
-          render={() => {
-            return <AdminTemplate inner={<CreateInstitution />}/>
-          }}
-        />
-        <Route 
-          path="/admin/noteVars" 
-          render={() => {
-            return <AdminTemplate inner={<NoteVariables />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/noteVar" 
-          render={() => {
-            return <AdminTemplate inner={<NoteVarCard />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/noteVarEdit" 
-          render={() => {
-            return <AdminTemplate inner={<NoteVarInputs />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/languages" 
-          render={() => {
-            return <AdminTemplate inner={<Languages />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/languageEdit" 
-          render={() => {
-            return <AdminTemplate inner={<EditLanguage />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/languageCreate" 
-          render={() => {
-            return <AdminTemplate inner={<CreateLanguage />}/>
-          }} 
-        />
-        <Route
-          path="/admin/CommunityQuestions"
-          render={() => {
-            return <AdminTemplate inner={<CommunityQuestions />}/>
-          }}
-        />
-        <Route
-          path="/admin/CommunityQuestion"
-          render={() => {
-            return <AdminTemplate inner={<CommunityCard />}/>
-          }}
-        />
-        <Route 
-          path="/admin/Collections" 
-          render={() => {
-            return <AdminTemplate inner={<Collections />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/Collection" 
-          render={() => {
-            return <AdminTemplate inner={<CollectionCard />}/>
-          }} 
-        />
-        <Route
-          path="/admin/EditCollection"
-          render={() => {
-            return <AdminTemplate inner={<EditCollection />}/>
-          }}
-        />
-        <Route 
-          path="/admin/Ratings" 
-          render={() => {
-            return <AdminTemplate inner={<Ratings />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/Rating" 
-          render={() => {
-            return <AdminTemplate inner={<RatingCard />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/EditRating" 
-          render={() => {
-            return <AdminTemplate inner={<EditRating />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/CreateRating" 
-          render={() => {
-            return <AdminTemplate inner={<CreateRating />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/Questions" 
-          render={() => {
-            return <AdminTemplate inner={<Questions />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/CreateQuestion" 
-          render={() => {
-            return <AdminTemplate inner={<CreateQuestions />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/activities" 
-          render={() => {
-            return <AdminTemplate inner={<Activity />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/activity" 
-          render={() => {
-            return <AdminTemplate inner={<ActivityCard />}/>
-          }} 
-        />
-        <Route
-          path="/admin/learningObjects"
-          render={() => {
-            return <AdminTemplate inner={<EducationalObject />}/>
-          }} 
-        />
-        <Route
-          path="/admin/learningObject"
-          render={() => {
-            return <AdminTemplate inner={<EducationalObjectCard />}/>
-          }} 
-        />
-        <Route
-          path="/admin/learningObjectEdit"
-          render={() => {
-            return <AdminTemplate inner={<EducationalObjectEdit />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/complaints" 
-          render={() => {
-            return <AdminTemplate inner={<Complaints />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/complaint" 
-          render={() => {
-            return <AdminTemplate inner={<ComplaintCard />}/>
-          }} 
-        />
-        <Route
-          path="/admin/users/teacher_requests"
-          render={() => {
-            return <AdminTemplate inner={<AproveTeacher />}/> 
-          }} />
-        <Route 
-          path="/admin/usersList" 
-          render={() => {
-            return <AdminTemplate inner={<UserList />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/user" 
-          render={() => {
-            return <AdminTemplate inner={<UserCard />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/EditUser" 
-          render={() => {
-            return <AdminTemplate inner={<EditUser />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/permissions" 
-          render={() => {
-            return <AdminTemplate inner={<UserPermissions />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/EditPermissions" 
-          render={() => {
-            return <AdminTemplate inner={<EditRole />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/CreateRole" 
-          render={() => {
-            return <AdminTemplate inner={<CreateRole />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/BlockedUsers" 
-          render={() => {
-            return <AdminTemplate inner={<BlockedUser />}/>
-          }} 
-        />
-        <Route 
-          path="/admin/sendEmail" 
-          render={() => {
-            return <AdminTemplate inner={<SendEmail />}/>
-          }} 
-        />
-
-        <Route path='*' component={PageNotFound} />
-      </Switch>
-      {!hideFooter && (
-        <div>
-          <EcFooter />
-          <GNUAGPLfooter />
-        </div>
-      )}
-    </BrowserRouter>
+    <React.Suspense fallback={<LoadingScreen/>}>
+        <BrowserRouter>
+            <Header />
+            <div
+                style={{
+                backgroundImage:
+                    "linear-gradient(to right,#ff7f00,#e81f4f,#673ab7,#00bcd4)",
+                height: "5px",
+                }}
+            ></div>
+            <link
+                href="https://fonts.googleapis.com/css?family=Kalam|Pompiere|Roboto&display=swap"
+                rel="stylesheet"
+            />
+            <Switch>
+                <Redirect from="/home" to="/" />
+                <Route path="/" exact={true} component={Home} />
+                <Route path="/busca" component={Search} />
+                <Route path="/perfil" component={UserPage} />
+                <Route path="/editarperfil" component={EditProfilePage} />
+                <Route path="/recurso/:recursoId" component={ResourcePage} />
+                <Route path="/termos-publicar-recurso" component={TermsPage} />
+                <Route path="/permission" component={PublicationPermissionsPage} />
+                {/*<Route path="termos-de-uso#publicacoes-de-usuario" component={}*/}
+                <Route path="/ajuda" component={HelpCenter} />
+                <Route path="/contato" component={Contact} />
+                <Route path="/termos" component={UserTerms} />
+                <Route path="/teste" component={Teste} />
+                <Route path="/sobre" component={AboutPage} />
+                <Route path="/mapa-site" component={SiteMap} />
+                <Route path="/acessibilidade" component={Accessibility} />
+                <Route path="/publicando-recurso" component={TabResoursePub} />
+                <Route path="/encontrando-recurso" component={TabResourseFind} />
+                <Route path="/participando-da-rede" component={TabNetPart} />
+                <Route path="/gerenciando-conta" component={TabManageAc} />
+                <Route path="/plataforma-mec" component={TabPlataformaMEC} />
+                <Route path="/recuperar-senha" component={PasswordRecoveryPage} />
+                <Route path="/usuario-publico/:userId" component={PublicUserPage} />
+                <Route
+                path="/editar-recurso/:recursoId"
+                component={EditLearningObjectPage}
+                />
+                <Route path="/professor" component={PageProfessor} />
+                <Route path="/upload" component={UploadPage} />
+                <Route path="/loja" component={ItemStore} />
+                <Route path="/colecao-do-usuario/:id" component={CollectionPage} />
+                <Route path="/colecao" component={FormationMaterialPage} />
+                <Route path="/topico" component={FormationMaterialPage} />
+                <Route path="/iframe-colecao" component={FormationMaterialIframe} />
+                <Route path="/material-formacao" component={MaterialPage} />
+                
+                <Route 
+                path="/admin/home" 
+                exact={true} 
+                render={() => {
+                    return <AdminTemplate inner={<Inframe/>}/>
+                }} 
+                />
+                <Route 
+                path="/admin/institutions" 
+                render={() => {
+                    return <AdminTemplate inner={<Institution />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/institution" 
+                render={() => {
+                    return <AdminTemplate inner={<InstitutionCard />}/>
+                }} 
+                />
+                <Route
+                path="/admin/institutionEdit"
+                render={() => {
+                    return <AdminTemplate inner={<InstitutionsInput />}/>
+                }}
+                />
+                <Route
+                path="/admin/InstitutionCreate"
+                render={() => {
+                    return <AdminTemplate inner={<CreateInstitution />}/>
+                }}
+                />
+                <Route 
+                path="/admin/noteVars" 
+                render={() => {
+                    return <AdminTemplate inner={<NoteVariables />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/noteVar" 
+                render={() => {
+                    return <AdminTemplate inner={<NoteVarCard />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/noteVarEdit" 
+                render={() => {
+                    return <AdminTemplate inner={<NoteVarInputs />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/languages" 
+                render={() => {
+                    return <AdminTemplate inner={<Languages />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/languageEdit" 
+                render={() => {
+                    return <AdminTemplate inner={<EditLanguage />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/languageCreate" 
+                render={() => {
+                    return <AdminTemplate inner={<CreateLanguage />}/>
+                }} 
+                />
+                <Route
+                path="/admin/CommunityQuestions"
+                render={() => {
+                    return <AdminTemplate inner={<CommunityQuestions />}/>
+                }}
+                />
+                <Route
+                path="/admin/CommunityQuestion"
+                render={() => {
+                    return <AdminTemplate inner={<CommunityCard />}/>
+                }}
+                />
+                <Route 
+                path="/admin/Collections" 
+                render={() => {
+                    return <AdminTemplate inner={<Collections />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/Collection" 
+                render={() => {
+                    return <AdminTemplate inner={<CollectionCard />}/>
+                }} 
+                />
+                <Route
+                path="/admin/EditCollection"
+                render={() => {
+                    return <AdminTemplate inner={<EditCollection />}/>
+                }}
+                />
+                <Route 
+                path="/admin/Ratings" 
+                render={() => {
+                    return <AdminTemplate inner={<Ratings />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/Rating" 
+                render={() => {
+                    return <AdminTemplate inner={<RatingCard />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/EditRating" 
+                render={() => {
+                    return <AdminTemplate inner={<EditRating />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/CreateRating" 
+                render={() => {
+                    return <AdminTemplate inner={<CreateRating />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/Questions" 
+                render={() => {
+                    return <AdminTemplate inner={<Questions />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/CreateQuestion" 
+                render={() => {
+                    return <AdminTemplate inner={<CreateQuestions />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/activities" 
+                render={() => {
+                    return <AdminTemplate inner={<Activity />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/activity" 
+                render={() => {
+                    return <AdminTemplate inner={<ActivityCard />}/>
+                }} 
+                />
+                <Route
+                path="/admin/learningObjects"
+                render={() => {
+                    return <AdminTemplate inner={<EducationalObject />}/>
+                }} 
+                />
+                <Route
+                path="/admin/learningObject"
+                render={() => {
+                    return <AdminTemplate inner={<EducationalObjectCard />}/>
+                }} 
+                />
+                <Route
+                path="/admin/learningObjectEdit"
+                render={() => {
+                    return <AdminTemplate inner={<EducationalObjectEdit />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/complaints" 
+                render={() => {
+                    return <AdminTemplate inner={<Complaints />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/complaint" 
+                render={() => {
+                    return <AdminTemplate inner={<ComplaintCard />}/>
+                }} 
+                />
+                <Route
+                path="/admin/users/teacher_requests"
+                render={() => {
+                    return <AdminTemplate inner={<AproveTeacher />}/> 
+                }} />
+                <Route 
+                path="/admin/usersList" 
+                render={() => {
+                    return <AdminTemplate inner={<UserList />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/user" 
+                render={() => {
+                    return <AdminTemplate inner={<UserCard />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/EditUser" 
+                render={() => {
+                    return <AdminTemplate inner={<EditUser />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/permissions" 
+                render={() => {
+                    return <AdminTemplate inner={<UserPermissions />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/EditPermissions" 
+                render={() => {
+                    return <AdminTemplate inner={<EditRole />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/CreateRole" 
+                render={() => {
+                    return <AdminTemplate inner={<CreateRole />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/BlockedUsers" 
+                render={() => {
+                    return <AdminTemplate inner={<BlockedUser />}/>
+                }} 
+                />
+                <Route 
+                path="/admin/sendEmail" 
+                render={() => {
+                    return <AdminTemplate inner={<SendEmail />}/>
+                }} 
+                />
+                <Route path='*' component={PageNotFound} />
+            </Switch>
+            {!hideFooter && (
+                <div>
+                <EcFooter />
+                <GNUAGPLfooter />
+                </div>
+            )}
+        </BrowserRouter>
+    </React.Suspense>
   );
 }
\ No newline at end of file