@socialgest/rn-widget 0.0.1

package/src/helpers/utils.helper.ts

@@ -0,0 +1,162 @@
+import moment from 'moment';
+
+export const orderAllmessages = (messages: any[]): any[] => {
+  let orderGroups = orderByDate(messages);
+
+  orderGroups.forEach((element) => {
+    element.messages = orderByDate(element.messages);
+  });
+
+  return orderGroups;
+};
+
+export const wc_hex_is_light = (color: string): boolean => {
+  const hex = color.replace('#', '');
+  const c_r = parseInt(hex.substring(0, 0 + 2), 16);
+  const c_g = parseInt(hex.substring(2, 2 + 2), 16);
+  const c_b = parseInt(hex.substring(4, 4 + 2), 16);
+  const brightness = (c_r * 299 + c_g * 587 + c_b * 114) / 1000;
+  return brightness > 155;
+};
+
+export const orderByDate = (mesagesGroup: any[]): any[] => {
+  return mesagesGroup.sort((a, b) => {
+    a = Date.parse(a.date);
+    b = Date.parse(b.date);
+    if (a > b) {
+      return 1;
+    }
+    if (a < b) {
+      return -1;
+    }
+    // a must be equal to b
+    return 0;
+  });
+};
+
+export const orderConversations = (mesagesGroup: any[]): any[] => {
+  var mesagesGroup2 = mesagesGroup.slice().sort((a, b) => {
+    a = Date.parse(a.lastMessage.date);
+    b = Date.parse(b.lastMessage.date);
+    if (a > b) {
+      return -1;
+    }
+    if (a < b) {
+      return 1;
+    }
+    // a must be equal to b
+    return 0;
+  });
+
+  return mesagesGroup2;
+};
+
+export const groupMessagesByDate = (messages: any[]): any[] => {
+  let groupMessges: any[] = [];
+  const messagesObj = messages.reduce((groupsMsj, message) => {
+    const date = message.date.split(' ')[0];
+    if (!groupsMsj[date]) {
+      groupsMsj[date] = [];
+    }
+    groupsMsj[date].push(message);
+    return groupsMsj;
+  }, {});
+
+  for (let [key, value] of Object.entries(messagesObj)) {
+    groupMessges.push({
+      date: key,
+      messages: value,
+    });
+  }
+  return groupMessges;
+};
+
+export const getDate = (propDate: string | null = null): string => {
+  const date = propDate === null ? moment() : moment(propDate);
+  return moment(date).format('YYYY-MM-DD HH:mm:ss');
+};
+
+export const existProp = (obj: object, prop: string): boolean => {
+  return obj.hasOwnProperty(prop);
+};
+
+export const cutLongText = (text: string, lettersCuantity: number): string => {
+  return `${text.split('').slice(0, lettersCuantity).join('')}...`;
+};
+
+// export const setSessionData = (channelId: string, token: string): void => {
+//   // sessionStorage.setItem("token", token);
+//   // sessionStorage.setItem("channelId", channelId);
+// };
+
+export const setSince = (chat: number | string | null = null): number => {
+  if (typeof chat === 'string') {
+    chat = new Date(chat).getTime();
+  }
+  const since = chat !== null ? chat : new Date().getTime();
+
+  return since;
+};
+
+export const getArrayOfRandomItems = (
+  arrayItems: any[],
+  count: number
+): number[] => {
+  let array: number[] = [];
+  if (arrayItems.length <= count) {
+    // @ts-ignore
+    arrayItems.forEach((data, index) => {
+      array.push(index);
+    });
+    return array;
+  }
+
+  let i = 0;
+  while (i < count) {
+    const item = Math.floor(Math.random() * arrayItems.length);
+    if (!array.includes(item)) {
+      array.push(item);
+      i++;
+    }
+  }
+  return array;
+};
+
+// export const getIcon = (file: string, arrayIcons: any[]): any[] => {
+//   return arrayIcons.filter((icon) => {
+//     return icon.path === file;
+//   });
+// };
+
+// export const getIcons = (): any[] => {
+//   const reqSvgs = require("../assets/svg");
+//   return reqSvgs.keys().map((path: any) => ({ path, file: reqSvgs(path) }));
+// };
+
+// export const getIconByName = (iconName: string): any => {
+//   const icons = getIcons();
+//   return icons.filter((icon) => icon.path === `./${iconName}.js`)[0].file;
+// };
+
+// export const getImages = (): any[] => {
+//   const reqSvgs = require.context("../assets/images", true, /\.png$/);
+//   return reqSvgs.keys().map((path) => ({ path, file: reqSvgs(path) }));
+// };
+
+export const makeObjFields = (fieldsArr: any[]): Record<string, string> => {
+  const objFields: Record<string, string> = {};
+  fieldsArr.forEach((field) => {
+    objFields[field.id] = '';
+  });
+  return objFields;
+};
+
+export const isObjEmpty = (obj: object): boolean => {
+  for (var prop in obj) {
+    if (obj.hasOwnProperty(prop)) {
+      return false;
+    }
+  }
+
+  return JSON.stringify(obj) === JSON.stringify({});
+};

package/src/hooks/redux-hooks.ts

@@ -0,0 +1,10 @@
+import {
+  type TypedUseSelectorHook,
+  useDispatch,
+  useSelector,
+} from 'react-redux';
+import type { RootState, AppDispatch } from '../store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

package/src/hooks/useFileHandlers.tsx

@@ -0,0 +1,384 @@
+import { useEffect, useReducer /*useRef*/ } from 'react';
+import { createReducer, createAction } from '@reduxjs/toolkit';
+
+import { getUrlS3Files } from '../services/chat.service';
+
+interface File {
+  file: any;
+  id: number;
+  src?: string | null;
+  loading: boolean;
+  type: string;
+  name?: string;
+  uri?: string;
+}
+
+interface UploadedFile {
+  [id: number]: any;
+}
+
+interface File {}
+
+interface State {
+  files: any[];
+  pending: File[];
+  next: File | null;
+  uploading: boolean;
+  uploaded: UploadedFile;
+  status: string;
+  uploadError?: any;
+}
+
+const api = {
+  uploadFile({ timeout = 550 }: { timeout?: number }) {
+    return new Promise(() => {
+      setTimeout(() => {
+        // resolve();
+      }, timeout);
+    });
+  },
+};
+
+// const logUploadedFile = (/*num: number, color = 'green'*/) => {
+// // const msg = `%cUploaded ${num} files.`;
+// // const style = `color:${color};font-weight:bold;`;
+// };
+
+// Constants
+const LOADED = 'LOADED';
+const INIT = 'INIT';
+const PENDING = 'PENDING';
+const FILES_UPLOADED = 'FILES_UPLOADED';
+const UPLOAD_ERROR = 'UPLOAD_ERROR';
+
+const initialState: State = {
+  files: [],
+  pending: [],
+  next: null,
+  uploading: false,
+  uploaded: {},
+  status: 'idle',
+};
+
+export const loadMoreFiles = createAction<any>('loadMoreFiles');
+export const load = createAction<any>('load');
+export const cleanFiles = createAction<any>('cleanFiles');
+export const deleteFile = createAction<any>('deleteFile');
+export const updateFile = createAction<any>('updateFile');
+export const submit = createAction<any>('submit');
+export const next = createAction<any>('next');
+export const file_uploaded = createAction<any>('file_uploaded');
+export const files_uploaded = createAction<any>('files_uploaded');
+export const set_upload_error = createAction<any>('set_upload_error');
+
+const reducer = createReducer(initialState, (builder) => {
+  builder
+    .addCase(loadMoreFiles, (state, action) => {
+      return {
+        ...state,
+        files: state.files.concat(action.payload.files),
+      };
+    })
+    .addCase(load, (state, action) => {
+      return {
+        ...state,
+        files: action.payload.files,
+        status: LOADED,
+      };
+    })
+    .addCase(cleanFiles, (state) => {
+      return {
+        ...state,
+        files: [],
+      };
+    })
+    .addCase(deleteFile, (state, action) => {
+      const files = state.files.filter(
+        (file) => file.id !== action.payload.fileId
+      );
+      return {
+        ...state,
+        files,
+      };
+    })
+    .addCase(updateFile, (state, action) => {
+      const filesMapped = mapNewFile([...state.files], action.payload);
+      return {
+        ...state,
+        files: filesMapped,
+      };
+    })
+    .addCase(submit, (state) => {
+      return {
+        ...state,
+        uploading: true,
+        pending: state.files,
+        status: INIT,
+      };
+    })
+    .addCase(next, (state, action) => {
+      return {
+        ...state,
+        next: action.payload.next,
+        status: PENDING,
+      };
+    })
+    .addCase(file_uploaded, (state, action) => {
+      return {
+        ...state,
+        next: null,
+        pending: action.payload.pending,
+        uploaded: {
+          ...state.uploaded,
+          [action.payload.prev.id]: action.payload.prev.file,
+        },
+      };
+    })
+    .addCase(files_uploaded, (state) => {
+      return {
+        ...state,
+        uploading: false,
+        status: FILES_UPLOADED,
+      };
+    })
+    .addCase(set_upload_error, (state, action) => {
+      return {
+        ...state,
+        uploadError: action.payload.error,
+        status: UPLOAD_ERROR,
+      };
+    });
+});
+
+const mapNewFile = (files: any, payload: any): any[] => {
+  var files2 = files
+    .filter((file: any) => {
+      if (payload.fileData?.fileName && payload.fileData.type) {
+        return file;
+      }
+      return false;
+    })
+    .map((file: any) => {
+      if (file.file.name === payload.fileData?.fileName) {
+        return {
+          ...file,
+          loading: false,
+          urlUploaded: payload.fileData?.url,
+          type: payload.fileData?.type,
+        };
+      }
+
+      return file;
+    });
+  return files2;
+};
+
+const useFileHandlers = () => {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  const cleanUploadFiles = (files: File[]) => {
+    files.forEach((file) => {
+      deleteFile(file.id);
+    });
+    // dispatch({ type: 'cleanFiles' });
+  };
+
+  const deleteFile = (fileId: number) => {
+    dispatch({
+      type: 'deleteFile',
+      payload: {
+        fileId,
+      },
+    });
+  };
+
+  const onChange = (
+    uploadFiles: File[],
+    tikketiD: string,
+    token: string,
+    channelId: string
+  ) => {
+    if (uploadFiles.length && tikketiD) {
+      const arrFiles = Array.from(uploadFiles);
+      const files = arrFiles.map((file: any, index) => {
+        const src = file.fileCopyUri;
+
+        return {
+          file,
+          id: index,
+          src,
+          loading: true,
+          type: file.type,
+        };
+      });
+
+      dispatch({
+        type: 'load',
+        payload: {
+          files,
+        },
+      });
+      sendFilesToSave(tikketiD, arrFiles, token, channelId);
+    }
+  };
+
+  const loadMoreFiles = (
+    uploadFiles: File[],
+    tikketiD: string,
+    filesCount: number,
+    token: string,
+    channelId: string
+  ) => {
+    if (uploadFiles.length && tikketiD) {
+      const arrFiles = Array.from(uploadFiles);
+
+      const files = arrFiles.map((file: any, index) => {
+        // conectionData.file = file;
+        const src = file.fileCopyUri; // getIconFile(file.type);
+
+        return {
+          file,
+          id: filesCount + index,
+          src,
+          loading: true,
+          type: file.type,
+        };
+      });
+
+      dispatch({
+        type: 'loadMoreFiles',
+        payload: {
+          files,
+        },
+      });
+
+      sendFilesToSave(tikketiD, arrFiles, token, channelId);
+    }
+  };
+
+  const sendFilesToSave = (
+    tikketiD: string,
+    files: File[],
+    token: string,
+    channelId: string
+  ) => {
+    let data: any = {
+      token,
+      channelId,
+      tikketId: tikketiD,
+    };
+
+    files.forEach((file: any) => {
+      data.file = file;
+      data.fileName = file.name;
+      data.type = file.type;
+      try {
+        getUrlS3Files(data)
+          .then(async (resp) => {
+            const localFile = await fetch(file.fileCopyUri);
+
+            const fileBlob = await localFile.blob();
+
+            if (resp.uploadURL) {
+              await fetch(resp.uploadURL, {
+                method: 'PUT',
+                headers: {
+                  'Content-Type': fileBlob && fileBlob.type,
+                },
+                body: fileBlob,
+              })
+                .then(() => {
+                  const fileData = {
+                    url: resp.url,
+                    type: file.type,
+                    fileName: file.name,
+                  };
+                  console.log(fileData, 'fileData');
+
+                  dispatch({
+                    type: 'updateFile',
+                    payload: {
+                      fileData,
+                    },
+                  });
+                })
+                .catch(() => {
+                  dispatch({
+                    type: 'updateFile',
+                    payload: {
+                      fileData: {},
+                    },
+                  });
+                });
+            }
+          })
+          .catch(() => {
+            dispatch({ type: 'updateFile', fileData: {} });
+          });
+      } catch (error) {
+        dispatch({ type: 'updateFile', fileData: {} });
+      }
+    });
+  };
+
+  // Sets the next file when it detects that its ready to go
+  useEffect(() => {
+    if (state.pending.length && state.next == null) {
+      const next = state.pending[0];
+      dispatch({
+        type: 'next',
+        payload: {
+          next,
+        },
+      });
+    }
+  }, [state.next, state.pending]);
+
+  // const countRef = useRef(0);
+
+  // Processes the next pending thumbnail when ready
+  useEffect(() => {
+    if (state.pending.length && state.next) {
+      const { next }: any = state;
+      api
+        .uploadFile(next)
+        .then(() => {
+          const prev = next;
+          // logUploadedFile();
+          const pending = state.pending.slice(1);
+          dispatch({
+            type: 'file-uploaded',
+            payload: {
+              prev,
+              pending,
+            },
+          });
+        })
+        .catch((error) => {
+          dispatch({
+            type: 'set-upload-error',
+            payload: {
+              error,
+            },
+          });
+        });
+    }
+  }, [state]);
+
+  // Ends the upload process
+  useEffect(() => {
+    if (!state.pending.length && state.uploading) {
+      dispatch({ type: 'files-uploaded' });
+    }
+  }, [state.pending.length, state.uploading]);
+
+  return {
+    ...state,
+    cleanUploadFiles,
+    onChange,
+    deleteFile,
+    loadMoreFiles,
+  };
+};
+
+export default useFileHandlers;

package/src/index.ts

@@ -0,0 +1,85 @@
+// Store
+import store from './store';
+
+// Actions
+import {
+  initChat,
+  setFloatMessage,
+  updateFormUser,
+} from './redux/actions/app.actions';
+import { setTextBoxMessage } from './redux/actions/chat.actions';
+import { setOpenClosed, setView } from './redux/actions/storage.actions';
+
+// Components
+import WidgetTikket from './components/App';
+import { changeView } from './redux/actions/chatBoard.actions';
+import { searchCoversation } from './components/conversations/conversationItem/ConversationItem';
+import { existProp } from './helpers/utils.helper';
+
+export { WidgetTikket };
+
+export function getToken(): Promise<string> {
+  var token = store.getState().app.token;
+  return Promise.resolve(token);
+}
+
+export function init(props: any) {
+  store.dispatch(initChat(props));
+}
+
+export function openOrClosedChat(props: any) {
+  store.dispatch(setOpenClosed(props));
+}
+
+export function updateUser(props: any) {
+  store.dispatch(updateFormUser(props));
+}
+
+export function setTextBox(props: any) {
+  store.dispatch(setTextBoxMessage(props));
+  store.dispatch(changeView('chat'));
+  store.dispatch(setView('chat'));
+}
+
+function goChat(a: any) {
+  const { app } = store.getState();
+  const { operators } = store.getState().Operators;
+  const chatHistory = store.getState().chatHistory.history;
+  const previews = store.getState().chatHistory.previews;
+
+  const { bots, bot, channelId, token } = app;
+
+  var props = { app, operators, chatHistory, previews };
+
+  var user = a.message?.user_id
+    ? operators.find((el) => el.userId === a.message.user_id)
+    : a.message?.bot_id && Array.isArray(bots)
+    ? bots.find((el) => el.bot_id === a.message.bot_id).bot
+    : bot;
+
+  var values = {
+    tikketId: a.tikket_id,
+    operator: user,
+    channelId,
+    token,
+  };
+
+  store.dispatch(setFloatMessage(false));
+  store.dispatch(setOpenClosed(true));
+  searchCoversation(props, store.dispatch, true, values);
+}
+
+export function isWidgetPush(props: any) {
+  if (props.data) {
+    var parseData = JSON.parse(props.data);
+
+    if (existProp(parseData, 'tikket_id')) {
+      goChat(parseData);
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return false;
+  }
+}