Add new feed url

vue/src/components/modal/AddUrl.vue

@@ -1,14 +1,39 @@
 <script setup>
 import { ref } from 'vue';
+import axios from 'axios';
 const props = defineProps({
   show: Boolean
 })
 const submitted = ref(false)
 const url = ref('')
-const processInput = () => {
+const title = ref('')
+const output = ref('')
+
+async function save() {
+  output.value = ''
   submitted.value = true;
   console.log('saved ' + url.value)
-};
+  try {
+    const response = await axios.post("feeds/add", {
+      url: url.value,
+      title: title.value,
+      user_id: parseInt(localStorage.getItem("user-id"))
+    },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          'user-token': localStorage.getItem("user-token")
+        }
+      }
+    )
+
+    console.log(response)
+    output.value = 'saved successfully'
+  } catch (error) {
+    console.error(error.message)
+    output.value = error.message
+  }
+}
 </script>
 
 <template>
@@ -18,17 +43,19 @@ const processInput = () => {
         <div class="modal-header">
           <slot name="header">Add RSS Feed</slot>
         </div>
-        <form @submit.prevent="processInput">
+        <form @submit.prevent="submitForm">
           <label for="name">URL:</label>
           <input v-model="url" id="url" type="text" required />
+          <label for="name">Title:</label>
+          <input v-model="title" id="title" type="text" required />
 
           <div v-if="submitted">
-            <p></p>
+            <p>{{ output }}</p>
           </div>
 
           <div class="modal-footer">
             <slot name="footer">
-              <button type="submit">Save</button>
+              <button type="submit" @click="save">Save</button>
               <button class="modal-default-button" @click="$emit('close')">Close</button>
             </slot>
           </div>