Implement POST functionality

backend/src/main/java/org/example/backend/Vocab.java

@@ -1,9 +1,11 @@
 package org.example.backend;
 
+import org.springframework.data.annotation.Id;
+
 import java.util.Date;
 import java.util.List;
 
-public record Vocab(String _id,
+public record Vocab(@Id String _id,
                     String word,
                     String translation,
                     String info,

backend/src/main/java/org/example/backend/VocabController.java

@@ -24,6 +24,11 @@ public Vocab getVocab(@PathVariable String _id){
         return vocabService.getVocab(_id);
     }
 
+    @PostMapping
+    public Vocab createVocab(@RequestBody VocabDTO vocabDTO){
+        return vocabService.createVocab(vocabDTO);
+    }
+
     @ResponseStatus(HttpStatus.NOT_FOUND)
     @ExceptionHandler(NoSuchElementException.class)
     public ErrorMessage handleElementNotFoundException(){

backend/src/main/java/org/example/backend/VocabDTO.java

@@ -0,0 +1,13 @@
+package org.example.backend;
+
+import java.util.Date;
+import java.util.List;
+
+public record VocabDTO(
+        String word,
+        String translation,
+        String info,
+        String language,
+        List<Date> reviewDates) {
+}
+

backend/src/main/java/org/example/backend/VocabService.java

@@ -17,4 +17,10 @@ public List<Vocab> getAllVocabs() {
     public Vocab getVocab(String id){
         return vocabRepo.findById(id).orElseThrow();
     }
+
+    public Vocab createVocab(VocabDTO vocabDTO){
+        Vocab newVocab = new Vocab(null, vocabDTO.word(), vocabDTO.translation(),
+                vocabDTO.info(), vocabDTO.language(), vocabDTO.reviewDates());
+        return vocabRepo.save(newVocab);
+    }
 }

backend/src/test/java/org/example/backend/VocabControllerTest.java

@@ -4,14 +4,16 @@
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.boot.test.autoconfigure.web.servlet.AutoConfigureMockMvc;
 import org.springframework.boot.test.context.SpringBootTest;
+import org.springframework.http.MediaType;
 import org.springframework.test.annotation.DirtiesContext;
+import org.springframework.test.web.client.match.MockRestRequestMatchers;
 import org.springframework.test.web.servlet.MockMvc;
 import org.springframework.test.web.servlet.request.MockMvcRequestBuilders;
+import org.springframework.test.web.servlet.result.MockMvcResultMatchers;
 
 import java.util.List;
 
-import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.content;
-import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.*;
 
 
 @SpringBootTest
@@ -60,5 +62,24 @@ void getVocab_ShouldTriggerNotFoundStatus_whenCalledWithNonexistentID() throws E
                 .andExpect(status().isNotFound());
     }
 
+    @DirtiesContext
+    @Test
+    void createVocab_shouldReturnNewVocabObject_whenCalledWithVocabDTO() throws Exception {
+        VocabDTO testDTO = new VocabDTO("la prueba", "test",
+                "", "Spanish", List.of());
+        mvc.perform(MockMvcRequestBuilders.post("/api/vocab")
+                        .contentType(MediaType.APPLICATION_JSON)
+                        .content("""
+{ "word":"la prueba", "translation":"test",
+                                          "info":"", "language":"Spanish", "reviewDates":[]}
+"""))
+                .andExpect(status().isOk())
+                .andExpect(content().json("""
+{ "word":"la prueba", "translation":"test",
+                                          "info":"", "language":"Spanish", "reviewDates":[]}
+"""))
+                .andExpect(jsonPath("$._id").isNotEmpty());
+
+    }
 
 }

backend/src/test/java/org/example/backend/VocabServiceTest.java

@@ -42,4 +42,17 @@ void getVocab_shouldThrowNoSuchElementException_whenCalledWithNonexistentId() {
         assertThrows(NoSuchElementException.class, () -> mockVocabRepo.findById("000"));
         verify(mockVocabRepo).findById("000");
     }
+
+    @Test
+    void createVocab_shouldReturnNewVocabObject_whenCalledWithVocabDTO()  {
+        VocabDTO testDTO = new VocabDTO("la prueba", "test",
+                "", "Spanish", List.of());
+        Vocab testVocab = new Vocab("Id generated by MongoDB", "la prueba", "test",
+                "", "Spanish", List.of());
+        when(mockVocabRepo.save(any(Vocab.class))).thenReturn(testVocab);
+        Vocab actual = vocabService.createVocab(testDTO);
+        Vocab expected = testVocab;
+        assertEquals(expected, actual);
+        verify(mockVocabRepo).save(any(Vocab.class));
+    }
 }

frontend/src/App.tsx

@@ -10,6 +10,7 @@ import CalendarPage
     from "./pages/CalendarPage/CalendarPage.tsx";
 import axios from "axios";
 import {useEffect} from "react";
+import Form from "./components/Form/Form.tsx";
 
 function App() {
 
@@ -19,12 +20,15 @@ function App() {
             .catch(error => console.error(error))
     }
 
-    useEffect(() => {
-        getVocab("670bc0ba64630f6a589cd2bf")
-    }, []);
+    // useEffect(() => {
+    //     getVocab("670bc0ba64630f6a589cd2bf")
+    // }, []);
+
+
 
     return (
         <>
+            <Form/>
             <BrowserRouter>
             <Routes>
                 <Route path={"/"} element={<HomePage/>}></Route>

frontend/src/components/Form/Form.css

@@ -0,0 +1 @@
+#form {display: flex; flex-direction: column;}

frontend/src/components/Form/Form.tsx

@@ -0,0 +1,38 @@
+import './Form.css'
+import {Vocab} from "../../types/Vocab.ts";
+import axios from "axios";
+
+
+export default function Form() {
+    function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+        event.preventDefault()
+        const newVocab: Vocab = {
+            id: null,
+            word: event.target.word.value,
+            translation: event.target.translation.value,
+            info: event.target.info.value,
+            language: "Spanish",
+            reviewDates: []
+        }
+        createVocab(newVocab)
+    }
+
+    function createVocab(newVocab:Vocab):void {
+        axios.post("/api/vocab", newVocab)
+            .then(() => console.log("New vocab was successfully created."))
+            .catch(error => console.log(error))
+    }
+
+    return (
+        <form id={"form"} onSubmit={handleSubmit}>
+            <label>Word</label>
+            <input name={"word"}/>
+            <label>Translation</label>
+            <input name={"translation"}/>
+            <label>Additional info, e.g.
+                "colloquial"</label>
+            <input name={"info"}/>
+            <button>Submit</button>
+        </form>
+    )
+}

frontend/src/pages/CalendarPage/CalendarPage.tsx

@@ -9,7 +9,7 @@ export default function CalendarPage( ){
 
     function getAllVocabs() {
         axios.get("/api/vocab")
-            .then(response => setVocabs(response.data))
+            .then(response => console.log(response.data))
             .catch(error => console.error(error))
     }
 

frontend/src/types/Vocab.ts

@@ -1,5 +1,5 @@
 export type Vocab = {
-    id: string,
+    id: string | null,
     word: string,
     translation: string,
     info: string,