feat: Validate newsfeed post and comment with zod (#221)

* added Zod validation to the newsfeed post and comment

* updated the error message

apps/dashboard/src/lib/components/Course/components/NewsFeed/NewFeedModal.svelte

@@ -11,6 +11,8 @@
     NOTIFICATION_NAME,
     triggerSendEmail
   } from '$lib/utils/services/notification/notification';
+  import { createNewsfeedValidation } from '$lib/utils/functions/validator';
+  import { getTextFromHTML } from '$lib/utils/functions/toHtml';
 
   export let author: Author | any = {};
   export let courseId = '';
@@ -22,9 +24,14 @@
   let newPost = '';
   let isLoading = false;
   let createdFeed;
+  let errors = {};
 
   const onPost = async () => {
-    if (!newPost) return;
+    errors = createNewsfeedValidation(getTextFromHTML(newPost));
+
+    if (Object.keys(errors).length) {
+      return;
+    }
     isLoading = true;
     try {
       if (edit) {
@@ -105,6 +112,9 @@
       placeholder="Share an update with your students"
       maxHeight={400}
     />
+    {#if errors.newPost}
+      <p class="text-sm text-red-500">{errors.newPost}</p>
+    {/if}
     <div class="flex items-center justify-end py-2">
       <div class="flex gap-2">
         <PrimaryButton label="Cancel" variant={VARIANTS.OUTLINED} onClick={resetEditor} />

apps/dashboard/src/lib/components/Course/components/NewsFeed/NewsFeedCard.svelte

@@ -14,6 +14,7 @@
   import { isHtmlValueEmpty } from '$lib/utils/functions/toHtml';
   import pluralize from 'pluralize';
   import { onMount } from 'svelte';
+  import { addNewsfeedCommentValidation } from '$lib/utils/functions/validator';
 
   export let feed: Feed;
   export let editFeed: Feed;
@@ -29,6 +30,7 @@
   let comment = '';
   let areCommentsExpanded = false;
   let isDeleteFeedModal = false;
+  let errors = {};
 
   let reactions = {
     smile: '😀',
@@ -55,9 +57,11 @@
   };
 
   const handleAddNewComment = (event) => {
-    if (!comment) return;
-
     if (event.key === 'Enter' || event.type === 'click') {
+      errors = addNewsfeedCommentValidation(comment);
+      if (Object.keys(errors).length) {
+        return;
+      }
       event.preventDefault();
       addNewComment(comment, feed.id, author.id);
       comment = '';
@@ -226,6 +230,9 @@
         <Send size={24} />
       </button>
     </div>
+    {#if errors.newComment}
+      <p class="text-sm text-red-500">{errors.newComment}</p>
+    {/if}
   </section>
   <DeleteFeedConfirmation bind:openDeleteModal={isDeleteFeedModal} deleteFeed={handleDeleteFeed} />
 </div>

apps/dashboard/src/lib/utils/functions/validator.js

@@ -4,9 +4,13 @@ import { validateEmail } from './validateEmail';
 
 const getOrgNameValidation = () =>
   z.string().min(5, { message: 'Organization must contain 5 or more characters' });
+
 const getSiteNameValidation = () =>
   z.string().min(5, { message: 'Site name must contain 5 or more characters' });
 
+const getNewsfeedValidation = () =>
+  z.string().min(5, { message: 'Field must contain 5 or more characters' });
+
 const createQuizValidationSchema = z.object({
   title: z.string().min(6, {
     message: 'Must be 6 or more characters long',
@@ -199,6 +203,24 @@ export const onboardingValidation = (fields = {}, step) => {
 //   return processErrors(error);
 // };
 
+export const createNewsfeedValidation = (newPost) => {
+  const schema = z.object({
+    newPost: getNewsfeedValidation()
+  });
+  const { error } = schema.safeParse({ newPost });
+
+  return processErrors(error);
+};
+
+export const addNewsfeedCommentValidation = (newComment) => {
+  const schema = z.object({
+    newComment: getNewsfeedValidation()
+  });
+  const { error } = schema.safeParse({ newComment });
+
+  return processErrors(error);
+};
+
 export const createOrgValidation = (fields = {}) => {
   const schema = z.object({
     orgName: getOrgNameValidation(),