userDataReducer.js 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. import { isValidPayload } from "../utils/validations/isValidPayload";
  2. import { isValidUserName } from '../utils/validations/isValidUserName';
  3. import { sendForm } from '../utils/sendForm';
  4. import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
  5. import axios from 'axios';
  6. const initialState = {
  7. userName:'',
  8. password: '',
  9. userLoadingStatus: 'idle',
  10. token: '',
  11. socket: null,
  12. responseMessage: '',
  13. showUserInfoBox: false,
  14. isPrivatChat: false,
  15. chatId: '',
  16. avatar: ''
  17. }
  18. const SERVER_URL = process.env.REACT_APP_SERVER_URL
  19. const POST_URL = process.env.REACT_APP_SERVER_URL + '/login';
  20. const GET_AVATAR_URL = process.env.REACT_APP_SERVER_URL + '/avatar';
  21. export const getUserData = createAsyncThunk(
  22. 'userData/getUser',
  23. ( t , thunkAPI) => {
  24. const userData = thunkAPI.getState().userDataReducer;
  25. console.log(POST_URL)
  26. if(userData.userName){
  27. if(isValidPayload({...userData}) && isValidUserName({...userData}))
  28. try {
  29. const response = sendForm(POST_URL, userData);
  30. return response;
  31. }catch (err) {
  32. console.log('error getUserData thunk', err)
  33. return err?.message
  34. }
  35. }
  36. });
  37. export const getUserAvatar = createAsyncThunk(
  38. 'userData/getUserAvatar',
  39. async (file) => {
  40. try {
  41. const token = localStorage.getItem('token') ; //use axios becose fetch dont send files
  42. const formData = new FormData()
  43. formData.append('file', file)
  44. formData.append('token', token)
  45. const response = await axios.post(GET_AVATAR_URL, formData);
  46. return await response;
  47. }catch (err) {
  48. console.log('error getUserData thunk', err)
  49. return err?.message
  50. }
  51. });
  52. const getUserDataSlice = createSlice({
  53. name: 'userData',
  54. initialState,
  55. reducers: {
  56. privateMessage: (state, action)=> {
  57. state.isPrivatChat = true;
  58. state.chatId = action.payload.chatId
  59. },
  60. setUserName: (state, action) => {state.userName = action.payload.userName},
  61. setUserPassword: (state, action) => {state.password = action.payload.password},
  62. removeToken: state => {
  63. state.token = ''
  64. },
  65. deleteResponseMessage: state => {state.responseMessage = ''},
  66. showUserInfoBox: state => {
  67. state.showUserInfoBox = !state.showUserInfoBox //replace later to other reducer file
  68. console.log('reducer showUserInfoBox', state.showUserInfoBox)
  69. //localStorage.setItem('showBox', !state.showUserInfoBox)
  70. },
  71. },
  72. extraReducers: (builder) => {
  73. builder
  74. .addCase(getUserData.fulfilled, (state, action) => {
  75. if(action.payload?.token){
  76. state.token = action.payload.token
  77. state.userLoadingStatus = 'success'
  78. localStorage.setItem('token', action.payload.token)
  79. }
  80. if(action.payload?.message){
  81. state.responseMessage = action.payload.message
  82. state.userLoadingStatus = 'error';
  83. }
  84. })
  85. .addCase(getUserData.rejected, (state, action) => {
  86. state.userLoadingStatus = 'error';
  87. if(action.payload?.message){
  88. state.responseMessage = action.payload.message
  89. }
  90. state.responseMessage = `Something went wrong...`
  91. })
  92. .addCase(getUserAvatar.fulfilled, (state, action) => {
  93. state.avatar = action.payload.data?.avatarUrl
  94. })
  95. .addCase(getUserAvatar.rejected, (state, action) => {
  96. console.log('get avatar rejected', action.payload)
  97. })
  98. }}
  99. );
  100. const {actions, reducer} = getUserDataSlice;
  101. const userDataReducer = reducer;
  102. export default userDataReducer;
  103. export const {
  104. setUserName,
  105. setUserPassword,
  106. removeToken,
  107. deleteResponseMessage,
  108. showUserInfoBox,
  109. privateMessage
  110. } = actions;