messageReducer.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. import { createSlice} from '@reduxjs/toolkit';
  2. import axios from 'axios';
  3. import { createAsyncThunk } from '@reduxjs/toolkit';
  4. const initialState = {
  5. startMessages: [],
  6. message:'',
  7. editMessage: '',
  8. messageId: '',
  9. files: [],
  10. ref: null
  11. }
  12. const POST_FILES_URL = 'http://localhost:5000/files';
  13. export const sendMessageToSocket = (state, data) => {
  14. if (state.message && state.message.length < 200) { //remove to other file
  15. data.socket.emit('message', {...data.user, message: state.message});
  16. }
  17. };
  18. export const editMessageToSocket = (state, data) => {
  19. if (state.message && state.message.length < 200) {
  20. data.socket.emit('editmessage', {...data.user, message: state.message}); //add backend functional later find by id and edit
  21. }
  22. };
  23. export const fileMessage = createAsyncThunk(
  24. 'messageReducer/fileMessage',
  25. async (files) => {
  26. const token = localStorage.getItem('token')
  27. try {
  28. const formData = new FormData();
  29. for (let i = 0; i < files.length; i++) {
  30. formData.append('files', files[i])
  31. }
  32. formData.append('token', token)
  33. const response = await axios.post(POST_FILES_URL, formData,
  34. {
  35. headers: {
  36. "Content-type": "multipart/form-data",
  37. }
  38. });
  39. return await response;
  40. } catch (err) {
  41. console.log('error messageReducer thunk', err)
  42. return err?.message
  43. }
  44. })
  45. const messageReducerSlice = createSlice({
  46. name: 'messageReducer',
  47. initialState,
  48. reducers: {
  49. storeMessage: (state, action) => {state.message = action.payload.message},
  50. editMessage: (state, action) => {
  51. state.editMessage = action.payload.editMessage;
  52. state.messageId = action.payload.messageId;
  53. state.ref = action.payload.ref;
  54. },
  55. sendMessage: (state, action) => sendMessageToSocket(state, action.payload),
  56. clearMessage: (state) => {state.message = ''},
  57. extraReducers: (bilder) =>
  58. bilder
  59. .addCase(fileMessage.fulfilled, (state, action) => {
  60. state.files = action.payload.data?.files
  61. })
  62. .addCase(fileMessage.rejected, (state, action) => {
  63. console.log('post file rejected', action.payload)
  64. })
  65. },
  66. });
  67. const {actions, reducer} = messageReducerSlice;
  68. const messageReducer = reducer;
  69. export default messageReducer;
  70. export const {
  71. storeMessage,
  72. sendMessage,
  73. clearMessage,
  74. editMessage
  75. } = actions;