Development laptop - User auth

client/components/article/ArticleAdd.vue

@@ -54,7 +54,7 @@ import { QuillEditor, Delta, Quill } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import { ADD_ARTICLE_RAW } from '../../graphql/articles';
 
-const isReadOnly = true;
+const isReadOnly = false;
 
 const articleState = reactive({
   title: '',
@@ -90,45 +90,44 @@ const props = defineProps(["categories", "authors"]);
 
 const handleArticleAdd = async (e: Event) => {
   e.preventDefault();
-  // const formData = {
-  //   title: articleState.title,
-  //   content: state.content,
-  //   category: articleState.category,
-  //   author: articleState.author,
-  //   link: articleState.link,
-  // };
-  const formData = new FormData();
-
-
-  const myHeaders = new Headers();
-  myHeaders.append("Cookie", "csrftoken=ccS5qh2RZofjzKhe6KeN51RMYOGQAb5t");
-
-  const newImgFile = uploadedImg.value as File;
-
-  const operations = {
-    query: ADD_ARTICLE_RAW,
-    variables: {
-      title: articleState.title,
-      content: state.content,
-      thumbnail: null, // You may need to handle thumbnail separately based on your requirements
-      authorId: articleState.author,
-      categoryId: articleState.category,
-    },
-  };
-
-  formData.set("operations", JSON.stringify(operations));
-  formData.set("map", "{\n  \"0\": [\"variables.thumbnail\"]\n}");
-  formData.set("0", newImgFile);
-
-  const response = await fetch("http://localhost:8000/graphql/", {
-    method: 'POST',
-    headers: myHeaders,
-    body: formData,
-    redirect: 'follow'
-  });
-
-  console.log(response);
-
+  try {
+    const formData = new FormData();
+
+
+    const myHeaders = new Headers();
+    myHeaders.append("Cookie", "csrftoken=ccS5qh2RZofjzKhe6KeN51RMYOGQAb5t");
+
+    const newImgFile = uploadedImg.value as File;
+
+    const operations = {
+      query: ADD_ARTICLE_RAW,
+      variables: {
+        title: articleState.title,
+        content: state.content,
+        thumbnail: null, // You may need to handle thumbnail separately based on your requirements
+        // authorId: articleState.author,
+        authorId: 1,
+        categoryId: articleState.category,
+      },
+    };
+
+    formData.set("operations", JSON.stringify(operations));
+    formData.set("map", "{\n  \"0\": [\"variables.thumbnail\"]\n}");
+    formData.set("0", newImgFile);
+
+    const response = await fetch("http://localhost:8000/graphql/", {
+      method: 'POST',
+      headers: myHeaders,
+      body: formData,
+      redirect: 'follow'
+    });
+
+    console.log(response);
+  } catch (error) {
+    console.log("Error adding article", error);
+
+  }
+
 };
 
 const handleFileChange = (e: Event) => {

client/components/category/CategoryAdd.vue

@@ -1,3 +1,36 @@
 <template>
     <h1>Category Add</h1>
-</template>
+    <form v-on:submit.prevent="handleCategoryAdd">
+      <input type="text" v-model="categoryName" class="border border gray-300 p-2" />
+      <button class="bg-gray-900 text-gray-100 p-2" type="submit">Add Category</button>
+    </form>
+  </template>
+
+  <script setup lang="ts">
+  import { ref } from 'vue';
+//   import { useMutation, gql } from '@urql/vue';
+
+  const categoryName = ref('');
+
+  const ADD_CATEGORY = gql`
+    mutation AddCategory($name: String!) {
+      createOrUpdateCategory(name: $name) {
+        category {
+          id
+          name
+        }
+      }
+    }
+  `;
+
+  const { mutate: addCategory } = useMutation(ADD_CATEGORY);
+
+  const handleCategoryAdd = async () => {
+    try {
+      const categoryRes = await addCategory({ name: categoryName.value });
+      console.log({ categoryRes });
+    } catch (error) {
+      console.error('Error adding category:', error);
+    }
+  };
+  </script>

client/components/home/Home.vue

@@ -9,7 +9,7 @@
         </div>
       </section>
 
-      <Posts v-bind:allArticles="data.allArticles" v-bind:firstArticle="data.allArticles[0]" />
+      <Posts v-if="data.allArticles && data.allArticles.length > 0" v-bind:allArticles="data.allArticles" v-bind:firstArticle="data.allArticles[0]" />
     </div>
   </template>
 
@@ -48,6 +48,6 @@
 
   const variables = { limit: 20 };
   const { data } = await useAsyncQuery<ArticlesResult>(query, variables);
-  // console.log({ allArticles: data.value.allArticles });
+  console.log({ allArticles: data.value.allArticles });
   </script>