Adding article properly

MdSamsuzzohaShayon · Dec 29, 2023 · bd053cb · bd053cb
1 parent 66682c7
commit bd053cb
Show file tree

Hide file tree

Showing 16 changed files with 183 additions and 130 deletions.
diff --git a/client/.Dockerfile.dev → client/Dockerfile.dev b/client/.Dockerfile.dev → client/Dockerfile.dev
diff --git a/client/components/article/Article.vue b/client/components/article/Article.vue
@@ -1,5 +1,6 @@
 <template>
-  <!-- <NuxtLink to="/posts/postid">
+  <ClientOnly>
+    <!-- <NuxtLink to="/posts/postid">
     <div
       v-bind:class="{`max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900 ${props.first ? 'block gap-3 sm:max-w-full lg:grid lg:grid-cols-12' : ''}`}"
     >
@@ -16,26 +17,36 @@
       </div>
     </div>
   </NuxtLink> -->
-  <NuxtLink rel="noopener noreferrer" v-bind:to="'http://localhost:3000/' + article.link"
-    class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
-    <CldImage v-if="article.thumbnail && article.thumbnail !== ''" v-bind:src="article.thumbnail" width="400" height="400" class="object-cover w-full rounded h-44 dark:bg-gray-500"
-      v-bind:alt="article.title" />
-    <img v-else class="object-cover w-full rounded h-44 dark:bg-gray-500"
-      src="https://source.unsplash.com/random/480x360?1" />
-    <div class="p-6 space-y-2">
-      <h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">{{ article.title }}</h3>
-      <span class="text-xs dark:text-gray-400">{{ article.createdAt }}</span>
-      <p>
-        {{ article.content }}
-      </p>
-    </div>
-  </NuxtLink>
+    <NuxtLink rel="noopener noreferrer" v-bind:to="'http://localhost:3000/' + article.link"
+      class="max-w-sm mx-auto group hover:no-underline focus:no-underline dark:bg-gray-900">
+      <CldImage v-if="article.thumbnail && article.thumbnail !== ''" v-bind:src="article.thumbnail" width="400"
+        height="400" class="object-cover w-full rounded h-44 dark:bg-gray-500" v-bind:alt="article.title" />
+      <img v-else class="object-cover w-full rounded h-44 dark:bg-gray-500"
+        src="https://source.unsplash.com/random/480x360?1" />
+      <div class="p-6 space-y-2">
+        <h3 class="text-2xl font-semibold group-hover:underline group-focus:underline">{{ article.title }}</h3>
+        <span class="text-xs dark:text-gray-400">{{ article.createdAt }}</span>
+        <p v-html="truncateContent(article.content, 100)"></p>
+      </div>
+    </NuxtLink>
+  </ClientOnly>
 </template>
 
 <script setup lang="ts">
 // import { IArticleProps } from "../../types";
+import DOMPurify from 'dompurify';
 const props = defineProps(["first", "article"]);
 // console.log(props.article);
 // {FRONTEND_URL} + 
 
+// Method to truncate HTML content while preserving structure
+const truncateContent = (html: string, maxLength: number) => {
+  const purifiedHTML = DOMPurify.sanitize(html, { USE_PROFILES: { html: true } });
+  const truncatedText = purifiedHTML.length > maxLength
+    ? purifiedHTML.slice(0, maxLength) + '...'
+    : purifiedHTML;
+
+  return truncatedText;
+};
+
 </script>
diff --git a/client/components/article/ArticleAdd.vue b/client/components/article/ArticleAdd.vue
@@ -10,12 +10,12 @@
         <label for="thumbnail">Thumbnail</label>
         <input type="file" class="border outline-none bg-gray-300" name="thumbnail" id="thumbnail"
           v-on:change="handleFileChange" />
-          <img v-if="imgUrl" v-bind:src="imgUrl" class="w-full h-36 object-cover object-center" />
+        <img v-if="imgUrl" v-bind:src="imgUrl" class="w-full h-36 object-cover object-center" />
       </div>
       <div class="input-group mb-3">
         <label for="content">Content</label>
-        <QuillEditor v-model:content="state.content" theme="snow" :options="options" @editorChange="handleContentChange"
-          contentType="delta" />
+        <QuillEditor v-model:content="state.content" :options="options" theme="snow" @editorChange="handleContentChange"
+          contentType="html" />
         <!-- <div class="border border-green-500">
           <h2>Display content</h2>
           <QuillEditor v-model="initialContent" :options="options" />
@@ -52,6 +52,7 @@
 // @ts-ignore
 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;
 
@@ -75,59 +76,59 @@ const options = {
   theme: "snow",
 };
 
-const initialContent = new Delta([
-  {
-    insert: "sdsdssdds\n\nhhg\nhello\n\n\nho\n\ngoal",
-  },
-  {
-    attributes: {
-      list: "ordered",
-    },
-    insert: "\n",
-  },
-  {
-    insert: "sure",
-  },
-  {
-    attributes: {
-      list: "ordered",
-    },
-    insert: "\n",
-  },
-  {
-    insert: "be",
-  },
-  {
-    attributes: {
-      list: "ordered",
-    },
-    insert: "\n",
-  },
-  {
-    insert: "wit",
-  },
-  {
-    insert: "\n",
-    attributes: {
-      list: "ordered",
-    },
-  },
-]);
+const initialContent = `
+  <h1>Main Title</h1>
+  <h2>Subheading 1</h2>
+  <p>Content...</p>
+  <h2>Subheading 2</h2>
+  <p>Content...</p>
+`;
 
 
 const state = reactive({ content: initialContent });
 const props = defineProps(["categories", "authors"]);
 
-const handleArticleAdd = (e: Event) => {
+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 = {
+  //   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,
+    },
   };
-  console.log(formData);
+
+  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);
+  
 };
 
 const handleFileChange = (e: Event) => {

diff --git a/client/components/article/ArticleExpand.vue b/client/components/article/ArticleExpand.vue
@@ -2,10 +2,10 @@
   <main className="continer mx-auto px-4">
     <div class="relative w-full h-80" v-if="data?.articleByLink">
       <div class="static h-full">
-        <CldImage v-if="data?.articleByLink && data.articleByLink.thumbnail && data.articleByLink.thumbnail !== ''" v-bind:src="data.articleByLink.thumbnail" width="400"
-          height="400" class="w-full h-full object-cover object-center" v-bind:alt="data.articleByLink.title" />
-        <img
-          v-else
+        <CldImage v-if="data?.articleByLink && data.articleByLink.thumbnail && data.articleByLink.thumbnail !== ''"
+          v-bind:src="data.articleByLink.thumbnail" width="400" height="400"
+          class="w-full h-full object-cover object-center" v-bind:alt="data.articleByLink.title" />
+        <img v-else
           src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
           alt="thumbnail" class="w-full h-full object-cover object-center" />
       </div>
@@ -18,18 +18,19 @@
         <p className="font-semibold text-gray-200 text-sm">{{ data.articleByLink.author.name }}</p>
         <p className="font-semibold text-gray-400 text-xs">{{ data.articleByLink?.createdAt }}</p>
       </div>
+      <div v-html="data.articleByLink.content"></div>
     </div>
     <div class="no-article-found" v-else>
       <p class="text-text-red-700">No article found!</p>
     </div>
-    <!-- <p>{{ data.articleByLink.content }}</p> -->
-    <!-- <QuillEditor v-model="initialContent" :options="options" /> -->
+    <!-- <QuillEditor v-model="state.content" theme="snow" :options="options" /> -->
   </main>
 </template>
 
 <script lang="ts" setup>
 // @ts-ignore
-// import {Delta} from '@vueup/vue-quill';
+import { Delta, QuillEditor } from '@vueup/vue-quill';
+import "@vueup/vue-quill/dist/vue-quill.snow.css";
 import type { IArticle } from "../../types/Article";
 
 const props = defineProps(["postLink"]);
@@ -55,57 +56,6 @@ const query = gql`
   }
 `;
 
-const isReadOnly = true;
-
-// const options = {
-//   debug: "info",
-//   modules: {
-//     toolbar: isReadOnly ? false : ["bold", "italic", "underline"],
-//   },
-//   placeholder: "Compose an epic...",
-//   readOnly: true,
-//   theme: "snow",
-// };
-
-// const initialContent = new Delta([
-//   {
-//     insert: "sdsdssdds\n\nhhg\nhello\n\n\nho\n\ngoal",
-//   },
-//   {
-//     attributes: {
-//       list: "ordered",
-//     },
-//     insert: "\n",
-//   },
-//   {
-//     insert: "sure",
-//   },
-//   {
-//     attributes: {
-//       list: "ordered",
-//     },
-//     insert: "\n",
-//   },
-//   {
-//     insert: "be",
-//   },
-//   {
-//     attributes: {
-//       list: "ordered",
-//     },
-//     insert: "\n",
-//   },
-//   {
-//     insert: "wit",
-//   },
-//   {
-//     insert: "\n",
-//     attributes: {
-//       list: "ordered",
-//     },
-//   },
-// ]);
-
 type ArticlesResult = {
   articleByLink: IArticle;
 };

diff --git a/client/components/graphql/category.ts b/client/components/graphql/category.ts
diff --git a/client/graphql/articles.ts b/client/graphql/articles.ts
@@ -27,4 +27,26 @@ const GET_ARTICLES = gql`
   }
 `;
 
-export { GET_ARTICLES };
+
+const ADD_ARTICLE_RAW = `
+mutation ($title: String!, $content: String!, $thumbnail: Upload!, $authorId: ID!, $categoryId: ID!, $id: ID) {
+    createOrUpdateArticle(title: $title, content: $content, thumbnail: $thumbnail, authorId: $authorId, categoryId: $categoryId, id: $id) {
+      article {
+        id
+        title
+        content
+        thumbnail
+        author {
+          id
+          name
+        }
+        category {
+          id
+          name
+        }
+      }
+    }
+  }
+`;
+
+export { GET_ARTICLES, ADD_ARTICLE_RAW };
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
@@ -53,7 +53,7 @@ export default defineNuxtConfig({
     clients: {
       default: {
         httpEndpoint: "http://localhost:8000/graphql/",
-        httpLinkOptions: { credentials: "include" },
+        // httpLinkOptions: { credentials: "include" },
       },
     },
   },

diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -13,6 +13,7 @@
     "@nuxt/devtools": "latest",
     "@nuxtjs/apollo": "^5.0.0-alpha.8",
     "@nuxtjs/tailwindcss": "^6.9.4",
+    "@types/dompurify": "^3.0.5",
     "autoprefixer": "^10.4.16",
     "nuxt": "^3.8.0",
     "postcss": "^8.4.31",
@@ -25,6 +26,7 @@
   },
   "dependencies": {
     "@nuxtjs/cloudinary": "^2.5.1",
-    "@vueup/vue-quill": "^1.2.0"
+    "@vueup/vue-quill": "^1.2.0",
+    "dompurify": "^3.0.6"
   }
 }