Schools Create and Index Page and Fixed Backend Issues

frontend/src/App.js

@@ -11,11 +11,13 @@ import CoursesEditPage from "main/pages/CoursesEditPage";
 
 import AdminUsersPage from "main/pages/AdminUsersPage";
 import AdminJobsPage from "main/pages/AdminJobsPage";
-import SchoolIndexPage from "main/pages/SchoolIndexPage";
 
 import CoursesCreatePage from "main/pages/CoursesCreatePage";
 import CourseIndexPage from "main/pages/CourseIndexPage";
 
+import SchoolCreatePage from "main/pages/SchoolCreatePage";
+import SchoolIndexPage from "main/pages/SchoolIndexPage";
+
 import { hasRole, useCurrentUser } from "main/utils/currentUser";
 import NotFoundPage from "main/pages/NotFoundPage";
 
@@ -45,6 +47,13 @@ function App() {
     </>
   ) : null;
 
+  const schoolRoutes = (hasRole(currentUser, "ROLE_ADMIN") || hasRole(currentUser, "ROLE_INSTRUCTOR")) ? (
+    <>
+      <Route path="/schools/create" element={<SchoolCreatePage />} />
+      <Route path="/schools" element={<SchoolIndexPage />} />
+    </>
+  ) : null;
+
   const homeRoute = (hasRole(currentUser, "ROLE_ADMIN") || hasRole(currentUser, "ROLE_USER")) 
     ? <Route path="/" element={<HomePage />} /> 
     : <Route path="/" element={<LoginPage />} />;
@@ -84,6 +93,7 @@ function App() {
           {adminRoutes}
           {userRoutes}
           {courseRoutes}
+          {schoolRoutes}
           <Route path="*" element={<NotFoundPage />} />
         </Routes>
       )}

frontend/src/main/pages/SchoolCreatePage.js

@@ -0,0 +1,47 @@
+import BasicLayout from "main/layouts/BasicLayout/BasicLayout";
+import SchoolForm from "main/components/School/SchoolForm";
+import { Navigate } from 'react-router-dom'
+import { useBackendMutation } from "main/utils/useBackend";
+import { toast } from "react-toastify";
+
+export default function SchoolCreatePage({storybook=false}) {
+
+
+    const objectToAxiosParams = (school) => ({
+        url: "/api/schools/post",
+        method: "POST",
+        data: school
+    });
+
+    const onSuccess = (school) => {
+        toast(`New school created - id: ${school.abbrev}`);
+    }
+
+    const mutation = useBackendMutation(
+        objectToAxiosParams,
+        { onSuccess }, 
+        // Stryker disable next-line all : hard to set up test for caching
+        ["/api/schools/all"] // mutation makes this key stale so that pages relying on it reload
+        );
+
+    const { isSuccess } = mutation
+
+    const onSubmit = async (data) => {
+        mutation.mutate(data);
+    }
+
+    if (isSuccess && !storybook) {
+        return <Navigate to="/schools" />
+    }
+
+    return (
+        <BasicLayout>
+        <div className="pt-2">
+            <h1>Create New School</h1>
+
+            <SchoolForm submitAction={onSubmit} />
+
+        </div>
+        </BasicLayout>
+    )
+}

frontend/src/stories/pages/CoursesEditPage.stories.js

@@ -6,6 +6,7 @@ import { coursesFixtures } from 'fixtures/coursesFixtures';
 import { rest } from "msw";
 
 import CoursesEditPage from 'main/pages/CoursesEditPage';
+import {schoolsFixtures} from "../../fixtures/schoolsFixtures";
 
 export default {
     title: 'pages/CoursesEditPage',
@@ -26,6 +27,9 @@ Default.parameters = {
         rest.get('/api/courses', (_req, res, ctx) => {
             return res(ctx.json(coursesFixtures.threeCourses[0]));
         }),
+        rest.get('/api/schools/all', (_req, res, ctx) => {
+            return res(ctx.json(schoolsFixtures.threeSchools));
+        }),
         rest.put('/api/courses', async (req, res, ctx) => {
             var reqBody = await req.text();
             window.alert("PUT: " + req.url + " and body: " + reqBody);

frontend/src/stories/pages/SchoolCreatePage.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { apiCurrentUserFixtures } from "fixtures/currentUserFixtures";
+import { systemInfoFixtures } from "fixtures/systemInfoFixtures";
+import { rest } from "msw";
+
+import SchoolCreatePage from "main/pages/SchoolCreatePage";
+
+export default {
+    title: 'pages/SchoolCreatePage',
+    component: SchoolCreatePage
+};
+
+const Template = () => <SchoolCreatePage storybook={true} />;
+
+export const Default = Template.bind({});
+Default.parameters = {
+    msw: [
+        rest.get('/api/currentUser', (_req, res, ctx) => {
+            return res(ctx.json(apiCurrentUserFixtures.userOnly));
+        }),
+        rest.get('/api/systemInfo', (_req, res, ctx) => {
+            return res(ctx.json(systemInfoFixtures.showingNeither));
+        }),
+        rest.post('/api/schools/post', (req, res, ctx) => {
+            window.alert("POST: " + JSON.stringify(req.url));
+            return res(ctx.status(200),ctx.json({}));
+        }),
+    ]
+}

frontend/src/tests/pages/SchoolCreatePage.test.js

@@ -0,0 +1,114 @@
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "react-query";
+import { MemoryRouter } from "react-router-dom";
+import SchoolCreatePage from "main/pages/SchoolCreatePage";
+
+import { apiCurrentUserFixtures } from "fixtures/currentUserFixtures";
+import { systemInfoFixtures } from "fixtures/systemInfoFixtures";
+
+import axios from "axios";
+import AxiosMockAdapter from "axios-mock-adapter";
+
+const mockToast = jest.fn();
+jest.mock('react-toastify', () => {
+    const originalModule = jest.requireActual('react-toastify');
+    return {
+        __esModule: true,
+        ...originalModule,
+        toast: (x) => mockToast(x)
+    };
+});
+
+const mockNavigate = jest.fn();
+jest.mock('react-router-dom', () => {
+    const originalModule = jest.requireActual('react-router-dom');
+    return {
+        __esModule: true,
+        ...originalModule,
+        Navigate: (x) => { mockNavigate(x); return null; }
+    };
+});
+
+describe("SchoolCreatePage tests", () => {
+
+    const axiosMock =new AxiosMockAdapter(axios);
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        axiosMock.reset();
+        axiosMock.resetHistory();
+        axiosMock.onGet("/api/currentUser").reply(200, apiCurrentUserFixtures.userOnly);
+        axiosMock.onGet("/api/systemInfo").reply(200, systemInfoFixtures.showingNeither);
+    });
+
+
+
+    const queryClient = new QueryClient();
+    test("renders without crashing", () => {
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter>
+                    <SchoolCreatePage />
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+    });
+
+    test("on submit, makes request to backend", async () => {
+
+        const queryClient = new QueryClient();
+        const school = {
+            abbrev: "ucsb",
+            name: "UC Santa Barbara",
+            termRegex: "[WSMF]\\d\\d",
+            termDescription: "s24",
+            termError: "test"
+        };
+
+        axiosMock.onPost("/api/schools/post").reply(200, school);
+
+        render(
+            <QueryClientProvider client={queryClient}>
+                <MemoryRouter>
+                    <SchoolCreatePage />
+                </MemoryRouter>
+            </QueryClientProvider>
+        );
+
+
+        expect(await screen.findByText("Create New School")).toBeInTheDocument();
+
+        const abbrevField = screen.getByTestId("SchoolForm-abbrev");
+        const nameField = screen.getByTestId("SchoolForm-name");
+        const termRegexField = screen.getByTestId("SchoolForm-termRegex");
+        const termDescriptionField = screen.getByTestId("SchoolForm-termDescription");
+        const termErrorField = screen.getByTestId("SchoolForm-termError");
+        const submitButton = screen.getByTestId("SchoolForm-submit");
+
+
+        fireEvent.change(abbrevField, { target: { value: 'ucsb' } });
+        fireEvent.change(nameField, { target: { value: 'UC Santa Barbara' } });
+        fireEvent.change(termRegexField, { target: { value: '[WSMF]\\d\\d' } });
+        fireEvent.change(termDescriptionField, { target: { value: 's24' } });
+        fireEvent.change(termErrorField, { target: { value: 'test' } });
+
+
+        fireEvent.click(submitButton);
+
+        await waitFor(() => expect(axiosMock.history.post.length).toBe(1));
+
+        expect(axiosMock.history.post[0].data).toEqual(
+            JSON.stringify({
+                "abbrev": "ucsb",
+                "name": "UC Santa Barbara",
+                "termRegex": "[WSMF]\\d\\d",
+                "termDescription": "s24",
+                "termError": "test"
+        }));
+
+        expect(mockToast).toBeCalledWith("New school created - id: ucsb");
+        expect(mockNavigate).toBeCalledWith({ "to": "/schools" });
+    });
+
+
+});

src/main/java/edu/ucsb/cs156/organic/controllers/SchoolController.java

@@ -86,7 +86,6 @@ public Iterable<School> allSchools() {
     @Operation(summary= "Get a single school by abbreviation")
     @PreAuthorize("hasRole('ROLE_USER')")
     @GetMapping("")
-
     public School getById(
         @Parameter(name="abbrev") @RequestParam String abbrev) {
         Optional<School> schoolOptional = schoolRepository.findById(abbrev);
@@ -112,34 +111,21 @@ public Object deleteSchool(
   @PreAuthorize("hasRole('ROLE_ADMIN')")
     @PostMapping("/post")
     public School postSchool(
-        @Parameter(name="abbrev", description="university domain name", example="ucsb") @RequestParam String abbrev,
-        @Parameter(name="name", description="University name") @RequestParam String name,
-        @Parameter(name="termRegex", description="Format: Example [WSMF]\\d\\d") @RequestParam String termRegex,
-        @Parameter(name="termDescription", description="Enter quarter, e.g. F23, W24, S24, M24") @RequestParam String termDescription,
-        @Parameter(name="termError", description="input error?") @RequestParam String termError)
-        {
-
-        School school = School.builder().build();
-        school.setAbbrev(abbrev);
-        school.setName(name);
-        school.setTermRegex(termRegex);
-        school.setTermDescription(termDescription);
-        school.setTermError(termError);
-
-        if (!termDescription.matches(school.getTermRegex())) {
-            throw new IllegalArgumentException("Invalid termDescription format. It must follow the pattern " + school.getTermRegex());
-        }
+        @Parameter(name = "school", description="school in json format") @RequestBody School school
+        )
+    {
 
-        if (!abbrev.equals(abbrev.toLowerCase())){
+        if (!school.getAbbrev().equals(school.getAbbrev().toLowerCase())){
             throw new IllegalArgumentException("Invalid abbrev format. Abbrev must be all lowercase");
         }
 
+        if (!school.getTermDescription().matches(school.getTermRegex())) {
+            throw new IllegalArgumentException("Invalid termDescription format. It must follow the pattern " + school.getTermRegex());
+        }
+
         School savedSchool = schoolRepository.save(school);
 
         return savedSchool;
     }
 
-
-
-
-}
+}