messageReducer.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import { createSlice} from '@reduxjs/toolkit';
  2. import axios from 'axios';
  3. import { createAsyncThunk } from '@reduxjs/toolkit';
  4. const initialState = {
  5. message:'',
  6. editMessage: '',
  7. messageId: '',
  8. files: [],
  9. isLoading: false,
  10. loadingPercentage: 0,
  11. ref: null
  12. }
  13. const SERVER_URL = process.env.REACT_APP_SERVER_URL;
  14. const POST_FILES_URL = SERVER_URL + '/files';
  15. export const sendMessageToSocket = (state, data) => {
  16. if (!!state.message && state.message.length < 200) { //remove to other file
  17. data.socket.emit('message', {...data.user, message: state.message});
  18. }
  19. };
  20. export const deleteMessageHandler = (state, data) => {
  21. data.socket.emit('deleteMessage', {messageId: data.messageId, token: data.socket.auth.token});
  22. };
  23. export const editMessageHandler = (state, data) => {
  24. if(data.socket){
  25. data.socket.emit('editmessage', {messageNewText: data.editMessage.message, messageId: data.messageId, token: data.socket.auth.token}); //add backend functional later find by id and edit
  26. }
  27. };
  28. export const fileMessage = createAsyncThunk(
  29. 'messageReducer/fileMessageStatus',
  30. async (payload) => {
  31. const {files, axiosConfig} = payload;
  32. const token = localStorage.getItem('token')
  33. try {
  34. const formData = new FormData();
  35. if(files.length) {
  36. for (let i = 0; i < files.length; i++) {
  37. formData.append('files', files[i])
  38. }
  39. } else {
  40. formData.append('files', files)
  41. }
  42. formData.append('token', token)
  43. const response = await axios.post(POST_FILES_URL, formData,axiosConfig);
  44. return await response;
  45. } catch (err) {
  46. console.log('Error messageReducer thunk', err)
  47. return err?.message
  48. }
  49. })
  50. const messageReducerSlice = createSlice({
  51. name: 'messageReducer',
  52. initialState,
  53. reducers: {
  54. storeMessage: (state, action) => {state.message = action.payload.message},
  55. editMessage: (state, action) => {
  56. editMessageHandler(state, action.payload)
  57. state.editMessage = action.payload.editMessage;
  58. state.messageId = action.payload.messageId;
  59. state.ref = action.payload.ref;
  60. },
  61. deleteMessage: (state, action) => {
  62. deleteMessageHandler(state, action.payload)
  63. },
  64. sendMessage: (state, action) => sendMessageToSocket(state, action.payload),
  65. clearMessage: (state) => {state.message = ''}
  66. },
  67. extraReducers: (bilder) => {
  68. bilder
  69. .addCase(fileMessage.fulfilled, (state, action) => {
  70. console.log('send', action)
  71. state.files = action.payload.data?.files
  72. })
  73. .addCase(fileMessage.pending, (state, action) => {
  74. console.log('pending', fileMessage.pending())
  75. })
  76. .addCase(fileMessage.rejected, (state, action) => {
  77. console.log('post file rejected', action.payload)
  78. })}
  79. });
  80. const {actions, reducer} = messageReducerSlice;
  81. const messageReducer = reducer;
  82. export default messageReducer;
  83. export const {
  84. storeMessage,
  85. sendMessage,
  86. clearMessage,
  87. editMessage,
  88. deleteMessage
  89. } = actions;