feat: fix weighted problem in X + added char counter

Author: nevo-david

apps/frontend/src/components/new-launch/editor.tsx

@@ -55,6 +55,7 @@ export const EditorWrapper: FC<{
     setGlobalValue,
     setInternalValue,
     internalFromAll,
+    totalChars
   } = useLaunchStore(
     useShallow((state) => ({
       internal: state.internal.find((p) => p.integration.id === state.current),
@@ -75,6 +76,7 @@ export const EditorWrapper: FC<{
       deleteInternalValue: state.deleteInternalValue,
       setGlobalValue: state.setGlobalValue,
       setInternalValue: state.setInternalValue,
+      totalChars: state.totalChars,
     }))
   );
 
@@ -271,6 +273,7 @@ export const EditorWrapper: FC<{
             autoComplete={canEdit}
             validateChars={true}
             identifier={internalFromAll?.identifier || 'global'}
+            totalChars={totalChars}
           />
         </div>
         <div className="flex flex-col items-center gap-[10px]">
@@ -337,6 +340,7 @@ export const Editor: FC<{
   autoComplete?: boolean;
   validateChars?: boolean;
   identifier?: string;
+  totalChars?: number;
 }> = (props) => {
   const {
     allValues,
@@ -447,6 +451,9 @@ export const Editor: FC<{
           />
         )}
       </div>
+      <div className={clsx("text-end text-sm mt-1", props.value.length > props.totalChars && "!text-red-500")}>
+        {props.value.length}/{props.totalChars}
+      </div>
     </>
   );
 };

apps/frontend/src/components/new-launch/manage.modal.tsx

@@ -176,10 +176,16 @@ export const ManageModal: FC<AddEditModalProps> = (props) => {
 
         const sliceNeeded = checkAllValid.filter((p: any) => {
           return p.values.some((a: any) => {
-            return (
-              countCharacters(a.content, p?.integration?.identifier || '') >
-              (p.maximumCharacters || 1000000)
+            const weightedLength = countCharacters(
+              a.content,
+              p?.integration?.identifier || ''
             );
+            const totalCharacters =
+              weightedLength > a.content.length
+                ? weightedLength
+                : a.content.length;
+
+            return totalCharacters > (p.maximumCharacters || 1000000);
           });
         });
 

apps/frontend/src/components/new-launch/providers/high.order.provider.tsx

@@ -4,6 +4,7 @@ import React, {
   FC,
   forwardRef,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
 } from 'react';
@@ -59,6 +60,8 @@ export const withProvider = function <T extends object>(
       isGlobal,
       tab,
       setTab,
+      setTotalChars,
+      justCurrent,
     } = useLaunchStore(
       useShallow((state) => ({
         date: state.date,
@@ -67,15 +70,39 @@ export const withProvider = function <T extends object>(
         global: state.global,
         internal: state.internal.find((p) => p.integration.id === props.id),
         integrations: state.selectedIntegrations,
+        justCurrent: state.current,
         current: state.current === props.id,
         isGlobal: state.current === 'global',
         setCurrent: state.setCurrent,
+        setTotalChars: state.setTotalChars,
         selectedIntegration: state.selectedIntegrations.find(
           (p) => p.integration.id === props.id
         ),
       }))
     );
 
+    useEffect(() => {
+      if (!setTotalChars) {
+        return;
+      }
+
+      if (isGlobal) {
+        setTotalChars(0);
+      }
+
+      if (current) {
+        setTotalChars(
+          typeof maximumCharacters === 'number'
+            ? maximumCharacters
+            : maximumCharacters(
+                JSON.parse(
+                  selectedIntegration.integration.additionalSettings || '[]'
+                )
+              )
+        );
+      }
+    }, [justCurrent, current, isGlobal, setTotalChars]);
+
     const getInternalPlugs = useCallback(async () => {
       return (
         await fetch(
@@ -207,7 +234,12 @@ export const withProvider = function <T extends object>(
 
             {(tab === 0 || !SettingsComponent) &&
               !value?.[0]?.content?.length && (
-                <div>{t('start_writing_your_post', 'Start writing your post for a preview')}</div>
+                <div>
+                  {t(
+                    'start_writing_your_post',
+                    'Start writing your post for a preview'
+                  )}
+                </div>
               )}
             {(tab === 0 || !SettingsComponent) &&
               !!value?.[0]?.content?.length &&

apps/frontend/src/components/new-launch/store.ts

@@ -27,6 +27,7 @@ interface StoreState {
   date: dayjs.Dayjs;
   repeater?: number;
   isCreateSet: boolean;
+  totalChars: number;
   tags: { label: string; value: string }[];
   tab: 0 | 1;
   current: string;
@@ -100,11 +101,13 @@ interface StoreState {
   setRepeater: (repeater: number) => void;
   setTags: (tags: { label: string; value: string }[]) => void;
   setIsCreateSet: (isCreateSet: boolean) => void;
+  setTotalChars?: (totalChars: number) => void;
 }
 
 const initialState = {
   date: dayjs(),
   tags: [] as { label: string; value: string }[],
+  totalChars: 0,
   tab: 0 as 0,
   isCreateSet: false,
   current: 'global',
@@ -445,4 +448,8 @@ export const useLaunchStore = create<StoreState>()((set) => ({
           : item
       ),
     })),
+  setTotalChars: (totalChars: number) =>
+    set((state) => ({
+      totalChars,
+    })),
 }));