messageReducer.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
  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. ref: null
  10. }
  11. const POST_FILES_URL = 'http://192.168.0.107:5000/files';
  12. export const sendMessageToSocket = (state, data) => {
  13. if (!!state.message && state.message.length < 200) { //remove to other file
  14. data.socket.emit('message', {...data.user, message: state.message});
  15. }
  16. };
  17. export const deleteMessageHandler = (state, data) => {
  18. data.socket.emit('deleteMessage', {messageId: data.messageId, token: data.socket.auth.token});
  19. };
  20. export const editMessageHandler = (state, data) => {
  21. if(data.socket){
  22. 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
  23. }
  24. };
  25. export const fileMessage = createAsyncThunk(
  26. 'messageReducer/fileMessage',
  27. async (files) => {
  28. const token = localStorage.getItem('token')
  29. try {
  30. const formData = new FormData();
  31. if(files.length) {
  32. for (let i = 0; i < files.length; i++) {
  33. formData.append('files', files[i])
  34. }
  35. } else {
  36. formData.append('files', files)
  37. }
  38. formData.append('token', token)
  39. const response = await axios.post(POST_FILES_URL, formData,
  40. {
  41. headers: {
  42. "Content-type": "multipart/form-data",
  43. }
  44. });
  45. return await response;
  46. } catch (err) {
  47. console.log('error messageReducer thunk', err)
  48. return err?.message
  49. }
  50. })
  51. const messageReducerSlice = createSlice({
  52. name: 'messageReducer',
  53. initialState,
  54. reducers: {
  55. storeMessage: (state, action) => {state.message = action.payload.message},
  56. editMessage: (state, action) => {
  57. editMessageHandler(state, action.payload)
  58. state.editMessage = action.payload.editMessage;
  59. state.messageId = action.payload.messageId;
  60. state.ref = action.payload.ref;
  61. },
  62. deleteMessage: (state, action) => {
  63. deleteMessageHandler(state, action.payload)
  64. },
  65. sendMessage: (state, action) => sendMessageToSocket(state, action.payload),
  66. clearMessage: (state) => {state.message = ''},
  67. extraReducers: (bilder) =>
  68. bilder
  69. .addCase(fileMessage.fulfilled, (state, action) => {
  70. state.files = action.payload.data?.files
  71. })
  72. .addCase(fileMessage.rejected, (state, action) => {
  73. console.log('post file rejected', action.payload)
  74. })
  75. },
  76. });
  77. const {actions, reducer} = messageReducerSlice;
  78. const messageReducer = reducer;
  79. export default messageReducer;
  80. export const {
  81. storeMessage,
  82. sendMessage,
  83. clearMessage,
  84. editMessage,
  85. deleteMessage
  86. } = actions;