Code-250 · Code-250 · Feb 19, 2022 · Feb 21, 2022 · Feb 22, 2022 · Feb 22, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/admin/admin.html b/admin/admin.html
@@ -4,6 +4,10 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+    <link rel="manifest" href="/site.webmanifest">
   <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -95,15 +99,15 @@ <h2 class="create-article">Create Article</h2>
               <span class="title-error error-message"></span>
             </div>
             <div class="upload-article-image">
-              <input type="file" name="file" class="article-picture" accept="image/x-jpeg,image/x-png">
+              <input type="file" name="imageUrl" class="article-picture">
 
             </div>
             <div class="preview-picture">
               <img id="image-preview" src="" width="100%" height="100%"alt=""/>
               <span class="preview-picture-alt">Image Preview</span>
             </div>
             <div class="article-content">
-              <textarea name="description" id="" cols="30" rows="10" placeholder="article description" class="detailed-article-description ckeditor"></textarea>
+              <textarea name="content" id="" cols="30" rows="10" placeholder="article description" class="detailed-article-description ckeditor"></textarea>
               <span class="detailed-description error-message"></span>
             </div>
             <div class="position-content">
@@ -133,15 +137,15 @@ <h2 class="create-article">Update Article</h2>
               <span class="title-update-error error-message hidden">title is required</span>
             </div>
             <div class="upload-article-image">
-              <input type="file" class="article-picture-update" accept="image/x-jpeg,image/x-png">
+              <input type="file" name="imageUrl" class="article-picture-update"/>
 
             </div>
             <div class="preview-picture">
               <img id="image-preview-update" src="" width="100%" height="100%"alt=""/>
               <span class="preview-picture-alt">Image Preview</span>
             </div>
             <div class="article-content">
-              <textarea name="description" id="" cols="30" rows="10" placeholder="article description" class="detailed-update-description"></textarea>
+              <textarea name="content" id="" cols="30" rows="10" placeholder="article description" class="detailed-update-description"></textarea>
               <span class="detailed-update-description error-message hidden">Body is required</span>
             </div>
             <div class="position-content">
@@ -178,6 +182,8 @@ <h2 class="create-article">Update Article</h2>
         <div class="section-title">
           <h1 class="title-article">Articles</h1>
         </div>
+
+      <div class="input-field popupCreate"></div>
         <section class="section-content">
 
 
@@ -364,7 +370,7 @@ <h3 class="name-skill">CSS</h3>
   <script src="./js/model.js"></script>
   <script src="./js/skillsModel.js"></script>
   <script src="./js/adminHambuger.js"></script>
-  <script src="js/blogs.js"></script>
+  <script src="./js/blogs.js"></script>
   <script>
     const logoutBtn = document.querySelector(".logout-btn");
     logoutBtn.addEventListener("click", (e) => {

diff --git a/admin/contacts.html b/admin/contacts.html
@@ -4,6 +4,10 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <link rel="manifest" href="/site.webmanifest">
   <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
@@ -79,6 +83,8 @@ <h1 class="title">My-brand</h1>
         <div class="section-title">
           <h1 class="title-article">Contact Messages</h1>
         </div>
+
+      <div class="input-field popupCreate"></div>
         <section class="section-content">
         </section>
       </content>

diff --git a/admin/js/blogs.js b/admin/js/blogs.js
@@ -1,7 +1,10 @@
 // populating data  in the dashboard
+const popCreate = document.querySelector(".popupCreate");
 
 const newCredentials = localStorage.getItem("loginCredentials");
-if (!newCredentials) {
+const loginData = JSON.parse(newCredentials);
+
+if (loginData?.role !== "Admin") {
   window.location.replace("../login.html");
 }
 const deleteBlo = document.querySelector("#my-delete-model");
@@ -33,14 +36,12 @@ function update(id) {
     const reader = new FileReader();
     reader.onload = () => {
       const imageUrls = reader.result;
-      console.log(imageUrls);
       if (imageUrls === null) {
         return "image is required";
       } else {
         localStorage.setItem("recent-image", imageUrls);
         localStorage.setItem("save", imageUrls);
         const imagePreviewUpdate = localStorage.getItem("recent-image");
-        console.log(imagePreviewUpdate);
 
         document
           .querySelector("#image-preview-update")
@@ -50,7 +51,62 @@ function update(id) {
     };
     reader.readAsDataURL(imageUpdate.files[0]);
   });
-  RetrievedObj.forEach((article) => {
+
+  fetch(`https://my-brand-server.herokuapp.com/api/v1/posts/${id}`, {
+    method: "get",
+    headers: {
+      "Access-Control-Cross-origin": "*",
+      "content-Type": "application/json",
+    },
+  })
+    .then((res) => res.json())
+    .then((data) => {
+      if (!newCredentials) {
+        console.log("you are not logged in please loggIn");
+      } else {
+        const title = (document.querySelector(".title-update").value =
+          data.data[0].title);
+        const content = (document.querySelector(
+          ".detailed-update-description"
+        ).value = data.data[0].content);
+        const image = document
+          .querySelector("#image-preview-update")
+          .setAttribute("src", data.data[0].imageUrl);
+        const filesUpdate = document.querySelector(".article-picture-update");
+
+        const updated = document.querySelector(".submit-update-btn");
+        updated.addEventListener("click", () => {
+          const title = document.querySelector(".title-update").value;
+          const content = document.querySelector(
+            ".detailed-update-description"
+          ).value;
+          const updateData = new FormData();
+          updateData.append("title", title);
+          updateData.append("content", content);
+          updateData.append("imageUrl", filesUpdate.files[0]);
+          const idUpdate = data.data[0]._id;
+          console.log(loginData.token);
+          console.log(idUpdate);
+          fetch(
+            `https://my-brand-server.herokuapp.com/api/v1/posts/${idUpdate}`,
+            {
+              method: "put",
+              headers: {
+                authorization: `Bearer ${loginData.token}`,
+              },
+              body: updateData,
+            }
+          )
+            .then((res) => res.json())
+            .then((data) => {
+              console.log("log to the console the updated data", data);
+              window.location.reload();
+            });
+        });
+      }
+    })
+    .catch((err) => console.log(err));
+  RetrievedObj?.forEach((article) => {
     if (article.id == id) {
       const title = (document.querySelector(".title-update").value =
         article.title);
@@ -111,12 +167,29 @@ function update(id) {
 const getData = JSON.parse(localStorage.getItem("blogList"));
 console.log(getData);
 let blogCardElement = document.querySelector(".section-content");
-getData?.forEach((element) => {
-  let body = element?.description.slice(0, 120) + "....";
-
-  blogCardElement.innerHTML += `
-  <div class="article-card">
-              <a href="../article.html?id=${element.id}" data-id="${element.id}">
+fetch("https://my-brand-server.herokuapp.com/api/v1/posts", {
+  method: "get",
+  headers: {
+    "Access-Control-Cross-origin": "*",
+    "content-Type": "application/json",
+  },
+})
+  .then((res) => res.json())
+  .then((data) => {
+    console.log(data);
+    popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+    setTimeout(() => {
+      const removeElement = document.querySelector(".success");
+      removeElement.remove();
+      // window.location.reload();
+    }, 3000);
+    data?.data?.forEach((element) => {
+      let body = element?.content?.slice(0, 120) + "....";
+      const id = element._id;
+      console.log(id);
+      blogCardElement.innerHTML += `
+            <div class="article-card">
+              <a href="../article.html?id=${element._id}" data-id="${element._id}">
               <div class="article-owner-image">
                 <img src="${element.imageUrl}" alt="importance of reading" width="400" height="350"/>
               </div>
@@ -131,11 +204,15 @@ getData?.forEach((element) => {
             </a>
                <div class="edit-delete">
                 <div class="edit-skill-article" id="edit-skill">
-                  <i onclick="update(${element.id})" class="fas fa-pen update"></i>
+                  <i onclick="update(id)" class="fas fa-pen update"></i>
                 </div>
                 <div class="delete-blog">
-                  <i onclick="deleteArticle(${element.id})" class="fas fa-trash-alt delete"></i>
+                  <i onclick="deleteArticle(${element._id})" class="fas fa-trash-alt delete"></i>
                 </div>
               </div>
             </div>`;
-});
+    });
+  })
+  .catch((err) => console.log(err));
+
+// fetch();
diff --git a/admin/js/model.js b/admin/js/model.js
@@ -39,10 +39,10 @@ const handleCreateArticle = (e) => {
   e.preventDefault();
 
   const formData = new FormData(articleForm).entries();
-  const { title, description } = Object.fromEntries(formData);
+  const { title, content } = Object.fromEntries(formData);
 
   const titleErrorMessage = validateTitle(title);
-  const descriptionErrorMessage = validateDescription(description);
+  const descriptionErrorMessage = validateDescription(content);
 
   if (titleErrorMessage) {
     const titleErrorMessageElement = document.querySelector(
@@ -70,11 +70,31 @@ const handleCreateArticle = (e) => {
     descriptionErrorMessageElement.style.display = "none";
 
     const imageUrl = localStorage.getItem("save");
+    const loginCredentials = JSON.parse(
+      localStorage.getItem("loginCredentials")
+    );
+    console.log(loginCredentials);
+    const files = document.querySelector(".article-picture");
+    const dataFormatted = new FormData();
+    dataFormatted.append("title", title);
+    dataFormatted.append("content", content);
+    dataFormatted.append("imageUrl", files.files[0]);
+
+    fetch("https://my-brand-server.herokuapp.com/api/v1/posts", {
+      method: "post",
+      headers: {
+        authorization: `Bearer ${loginCredentials.token}`,
+      },
+      body: dataFormatted,
+    })
+      .then((res) => res.json())
+      .then((data) => console.log(data))
+      .catch((err) => console.log(err));
     const blog = {
       id: Date.now(),
       imageUrl,
       title,
-      description,
+      content,
       like: 0,
       comments: [],
       numberOfComments: 0,
@@ -89,7 +109,7 @@ const handleCreateArticle = (e) => {
       localStorage.removeItem("save");
       document.querySelector("form").reset();
       model.style.display = "none";
-      window.location.reload();
+      // window.location.reload();
     } else {
       blogList.push(blog);
       console.log(blogList);
@@ -108,19 +128,17 @@ const handleCreateArticle = (e) => {
   }
 };
 
-
-
- const validateTitle = (title) => {
-   if (!title.trim()) return "Title of the article is required";
-   if (title.trim().length < 8) return "Title must be atleast 8 character long";
-   return " ";
- };
- const validateDescription = (description) => {
-   if (!description.trim()) return "decription of the article is required";
-   if (description.trim().length < 20)
-     return "article description must be atleast 20 character long";
-   return " ";
- };
+const validateTitle = (title) => {
+  if (!title.trim()) return "Title of the article is required";
+  if (title.trim().length < 8) return "Title must be atleast 8 character long";
+  return " ";
+};
+const validateDescription = (content) => {
+  if (!content.trim()) return "decription of the article is required";
+  if (content.trim().length < 6)
+    return "article description must be atleast 20 character long";
+  return " ";
+};
 
 
 

diff --git a/admin/js/queryMesssage.js b/admin/js/queryMesssage.js
@@ -1,17 +1,45 @@
+const popCreate = document.querySelector(".popupCreate");
+
 const newCredentials = localStorage.getItem("loginCredentials");
 const cred = JSON.parse(newCredentials);
-if (cred.isLoggedIn === false) {
+if (cred?.role !== "Admin") {
   window.location.replace("../login.html");
 }
 
 const contacts = localStorage.getItem("contact-message");
 const section = document.querySelector(".section-content");
 const contact = JSON.parse(contacts);
-console.log(contact);
-contact?.forEach((message) => {
-  section.innerHTML += `<div class="message-card">
+const getQueries = async () => {
+  const res = await fetch(
+    "https://my-brand-server.herokuapp.com/api/v1/queries/all-messages",
+    {
+      method: "get",
+      headers: {
+        "content-Type": "application/json",
+        authorization: `Bearer ${cred.token}`,
+      },
+    }
+  );
+  const data = await res.json();
+  if (data.status !== 200) {
+    popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+    setTimeout(() => {
+      const removeElement = document.querySelector(".success");
+      removeElement.remove();
+      // window.location.reload();
+    }, 3000);
+  } else {
+    popCreate.innerHTML = `<div class="success"><p class="fade-out ">${data.message}</p></div>`;
+    setTimeout(() => {
+      const removeElement = document.querySelector(".success");
+      removeElement.remove();
+      // window.location.reload();
+    }, 3000);
+    data.data.forEach((message) => {
+      console.log(message);
+      section.innerHTML += `<div class="message-card">
               <div class="article-title-date">
-                <h3 class="title-articles">${message.name}</h3>
+                <h3 class="title-articles">${message.guestName}</h3>
                 <p class="date-article">${message.email}</p>
                 <div class="article-line"></div>
               </div>
@@ -23,9 +51,11 @@ contact?.forEach((message) => {
                   <i class="fas fa-reply"></i>
                 </div>
                 <div class="location">
-                  ${message.userLocation}
+                  Kigali-Rwanda
                 </div>
               </div>
             </div>`;
-  console.log(message);
-});
+    });
+  }
+};
+getQueries();