Connect admin-pages under the same view

frontend/src/components/InputValidationFeedback/index.tsx

@@ -7,6 +7,6 @@ interface InputValidationFeedbackProps {
 
 const InputValidationFeedback: React.FC<InputValidationFeedbackProps> = ({
   error,
-}) => (error ? <div className="input-feedback">{error}</div> : null);
+}) => (error ? <p className="input-feedback">{error}</p> : null);
 
 export default InputValidationFeedback;

frontend/src/components/NavBar/UserInfo.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import styled from "styled-components";
 import { media } from "src/styles/mediaQueries";
 import avatar from "assets/avatar.png";
-import { User } from "src/types";
+import { DjangoUserData } from "src/utils/djangoData";
 
 interface UserInfoProps {
-  user: User;
+  user: DjangoUserData;
 }
 
 const UserInfo: React.FC<UserInfoProps> = ({ user }) => {

frontend/src/components/NavBar/index.tsx

@@ -4,17 +4,17 @@ import UserInfo from "./UserInfo";
 import AbakusLogo from "src/components/AbakusLogo";
 import NavItem from "./NavItem";
 import { media } from "src/styles/mediaQueries";
-import { User } from "src/types";
 import { useParams } from "react-router-dom";
 import { useAdmission } from "src/query/hooks";
+import { DjangoUserData } from "src/utils/djangoData";
 
 interface NavBarProps {
-  user: User;
+  user: DjangoUserData;
   isEditing: boolean;
 }
 
 const NavBar: React.FC<NavBarProps> = ({ user, isEditing }) => {
-  const { admissionSlug } = useParams();
+  const { admissionSlug, ...params } = useParams();
   const { data: admission } = useAdmission(admissionSlug ?? "");
   const isRevy = admissionSlug === "revy";
 
@@ -23,20 +23,20 @@ const NavBar: React.FC<NavBarProps> = ({ user, isEditing }) => {
       <BrandContainer>
         <AbakusLogo />
       </BrandContainer>
-      {!admission?.userdata.has_application || isEditing ? (
-        <NavItemsContainer>
-          <NavItem
-            to={`/${admissionSlug}/velg-grupper`}
-            text={isRevy ? "Velg grupper" : "Velg komiteer"}
-          />
-          <NavItem to={`/${admissionSlug}/min-soknad`} text="Min søknad" />
-        </NavItemsContainer>
-      ) : (
-        <NavItemsContainer>
-          <NavItem to={`/${admissionSlug}/min-soknad`} text="Min søknad" />
-        </NavItemsContainer>
-      )}
-
+      <NavItemsContainer>
+        {params["*"]?.substring(0, 5) !== "admin" && (
+          <>
+            {!admission?.userdata.has_application ||
+              (isEditing && (
+                <NavItem
+                  to={`/${admissionSlug}/velg-grupper`}
+                  text={isRevy ? "Velg grupper" : "Velg komiteer"}
+                />
+              ))}
+            <NavItem to={`/${admissionSlug}/min-soknad`} text="Min søknad" />
+          </>
+        )}
+      </NavItemsContainer>
       <UserInfo user={user} />
     </Container>
   );

frontend/src/containers/AdmissionsContainer/index.tsx

@@ -15,9 +15,9 @@ import SubComponentWrapper from "./SubComponentWrapper";
 import SubComponentHeader from "./SubComponentHeader";
 import { Application } from "src/types";
 import { useState } from "react";
-import { TableWrapper } from "src/routes/AdminPageAbakusLeaderView/Wrapper";
 import styled from "styled-components";
 import Icon from "src/components/Icon";
+import { TableWrapper } from "src/routes/AdmissionAdmin/components/StyledElements";
 
 interface AdmissionsContainerProps {
   applications: Application[];
@@ -32,7 +32,7 @@ export interface AdmissionsTableValues {
   numApplications: number;
   createdAt: string;
   updatedAt: string;
-  text: string;
+  text?: string;
   groupApplications: InnerTableValues[];
 }
 

frontend/src/global.d.ts

@@ -1,12 +1,15 @@
+import { DjangoConfig } from "./utils/config";
+import { DjangoData } from "./utils/djangoData";
+
 declare global {
   namespace NodeJS {
     interface ProcessEnv {
       NODE_ENV: "development" | "production";
     }
   }
   interface Window {
-    __CONFIG__: any;
-    __DJANGO__: any;
+    __CONFIG__: DjangoConfig;
+    __DJANGO__: DjangoData;
   }
 }
 

frontend/src/index.tsx

@@ -60,7 +60,9 @@ const AppRoutes = () =>
       path: "/admin/*",
       element: (
         <RequireAuth
-          auth={djangoData.user.is_staff || djangoData.user.is_member_of_webkom}
+          auth={
+            !!djangoData.user.is_staff || !!djangoData.user.is_member_of_webkom
+          }
         >
           <ManageAdmissions />
         </RequireAuth>

frontend/src/routes/AdminPage/index.tsx → frontend/src/routes/AdmissionAdmin/EditGroup.tsx

@@ -3,21 +3,10 @@ import styled from "styled-components";
 import { useParams } from "react-router-dom";
 import { useAdmission, useApplications } from "src/query/hooks";
 import djangoData from "src/utils/djangoData";
-import { media } from "src/styles/mediaQueries";
-import UserApplication from "src/containers/UserApplication";
 import LoadingBall from "src/components/LoadingBall";
-import EditGroupForm from "./form";
+import EditGroupForm from "./components/EditGroupForm";
 import { replaceQuotationMarks } from "src/utils/methods";
-import {
-  Wrapper,
-  LinkLink,
-  CSVExport,
-  Statistics,
-  StatisticsName,
-  StatisticsWrapper,
-  GroupLogo,
-  GroupLogoWrapper,
-} from "./styles";
+import { Wrapper, GroupLogo, GroupLogoWrapper } from "./components/styles";
 import { Application } from "src/types";
 import {
   AlphabeticalComparatorAsc,
@@ -40,7 +29,7 @@ export interface CsvData {
   phoneNumber: string;
 }
 
-const AdminPage = () => {
+const EditGroup = () => {
   const { admissionSlug } = useParams();
   const [sortedApplications, setSortedApplications] = useState<Application[]>(
     []
@@ -122,20 +111,16 @@ const AdminPage = () => {
     return <div>Feil: klarte ikke laste inn grupper.</div>;
   } else {
     const group = (groups ?? []).find(
-      (group) =>
-        group.name.toLowerCase() ===
-        djangoData.user.representative_of_group.toLowerCase()
+      (group) => group.name === djangoData.user.representative_of_group
     );
     if (!group) return <div>Feil: Ugyldig gruppe</div>;
 
     return (
       <PageWrapper>
-        <PageTitle>Admin Panel</PageTitle>
         <GroupLogoWrapper>
           <GroupLogo src={group.logo} />
           <h2>{djangoData.user.representative_of_group}</h2>
         </GroupLogoWrapper>
-        <LinkLink to="/">Gå til forside</LinkLink>
 
         <Wrapper>
           <EditGroupForm
@@ -144,59 +129,16 @@ const AdminPage = () => {
             group={group}
           />
         </Wrapper>
-        <Wrapper>
-          <Statistics>
-            <StatisticsWrapper>
-              <StatisticsName>Antall søkere</StatisticsName>
-              {numApplicants} {numApplicants == 1 ? "søker" : "søkere"}
-            </StatisticsWrapper>
-            <StatisticsWrapper>
-              <StatisticsName style={{ marginBottom: "1.25em" }}>
-                Sorter etter
-              </StatisticsName>
-              <select onChange={handleSortChange}>
-                {Array.from(stringToComparatorMapper.keys()).map((key) => (
-                  <option key={key} value={key}>
-                    {stringToComparatorMapper.get(key)?.description}
-                  </option>
-                ))}
-              </select>{" "}
-            </StatisticsWrapper>
-          </Statistics>
-          <CSVExport
-            data={csvData}
-            headers={csvHeaders}
-            filename={"applications.csv"}
-            target="_blank"
-          >
-            Eksporter som csv
-          </CSVExport>
-          {sortedApplications.map((userApplication) => (
-            <UserApplication
-              key={userApplication.user.username}
-              {...userApplication}
-            />
-          ))}
-        </Wrapper>
       </PageWrapper>
     );
   }
 };
 
-export default AdminPage;
-
-/** Styles **/
+export default EditGroup;
 
 export const PageWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   min-height: 100vh;
 `;
-
-const PageTitle = styled.h1`
-  ${media.handheld`
-    margin: 0 1em 0 1em;
-    font-size: 2.5rem;
-  `};
-`;