From 4091be42e21a821005cbdf0f643b1a9cdd575b48 Mon Sep 17 00:00:00 2001
From: Vinicius Gabriel Machado <vgm18@inf.ufpr.br>
Date: Wed, 23 Jun 2021 19:34:15 -0300
Subject: [PATCH] Changed the way that pages are imported in App.js to a more
 efficient, where the content is loaded only when needed. Bugs are still
 present, like black background in some components. The next step is to change
 the way that images work.

---
 src/App.js | 799 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 447 insertions(+), 352 deletions(-)

diff --git a/src/App.js b/src/App.js
index b5a80b2f..a6c40111 100644
--- a/src/App.js
+++ b/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
-- 
GitLab