a5270f3a-d5c6-4841-8f2d-88100e36546a

Committed 08 Jul 2024 08:37PM UTC coverage: 84.56% (+0.1%) from 84.42%

Build # a5270f3a-d5c6-4841-8f2d-88100e36546a

Build Type

Pull #40

circleci

Committed by

Nadinefiona

Commit Message

fx(sidebar):fixing sidebar & working on logout

Pull Request Pull Request #40: fx(sidebar)

Run Details

177 of 230 branches covered (76.96%)

Branch coverage included in aggregate %.

37 of 38 new or added lines in 1 file covered. (97.37%)

9 existing lines in 1 file now uncovered.

2304 of 2704 relevant lines covered (85.21%)

1.74 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

76.76

/src/redux/slices/userSlice.ts

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';
import { axiosRequest, FormErrorInterface } from '@/utils';
import _ from 'lodash';
import { jwtDecode } from 'jwt-decode';

export interface UserRegistrationInterface {
  name: string;
  email: string;
  password: string;
  phone: string;
  address: string;
}

export interface LogInInterface {
  email: string;
  password: string;
}

export enum USER_ROLE {
  SELLER = 'seller',
  ADMIN = 'admin',
  BUYER = 'buyer'
}

export interface UserInfoInterface {
  name?: string;
  role?: USER_ROLE;
  email?: string;
  photoUrl?: string;
  preferedlanguage?: string | null;
  preferedcurrency?: string | null;
  phone?: string;
  address?: string;
}

interface UserState {
  userInfo: UserInfoInterface | null;
  role: USER_ROLE | null;
  loading: boolean;
  error: FormErrorInterface | null;
  success: boolean;
  token: string | null;
}

const initialState: UserState = {
  userInfo: null,
  role: null,
  loading: false,
  error: null,
  success: false,
  token: null
};

export interface DecodedInterface {
  id: string;
  role: USER_ROLE;
  iat: number;
  exp: number;
}

export interface VerifyOtpResponse {
  data: string;
}

export const registerUser = createAsyncThunk(
  'authentication/registerUser',
  async (userData: UserRegistrationInterface, { rejectWithValue }) => {
    try {
      const response = await axiosRequest('POST', `/users/register`, userData);
      return response.data;
    } catch (err: unknown) {
      if (axios.isAxiosError(err) && err.response) {
        return rejectWithValue(err.response.data || 'Registration failed');
      }
      const error = err as Error;
      return rejectWithValue({ message: error.message });
    }
  }
);

export const logInUser = createAsyncThunk(
  'authentication/loginUser',
  async (userData: LogInInterface, { rejectWithValue }) => {
    try {
      const response = await axiosRequest('POST', `/users/login`, userData);
      localStorage.setItem('token', JSON.stringify(response.data.data));
      return response.data;
    } catch (err: unknown) {
      if (axios.isAxiosError(err) && err.response) {
        return rejectWithValue(err.response.data || 'login failed');
      }
      const error = err as Error;
      return rejectWithValue({ message: error.message });
    }
  }
);

export const getUserProfile = createAsyncThunk(
  'authentication/userProfile',
  async (_, { rejectWithValue }) => {
    try {
      const response = await axiosRequest('GET', `/users/profile`, '', true);
      return response.data.data;
    } catch (err: unknown) {
      localStorage.clear();
      if (axios.isAxiosError(err) && err.response) {
        return rejectWithValue(err.response.data || 'login failed');
      }
      const error = err as Error;
      return rejectWithValue({ message: error.message });
    }
  }
);

export const verifyOtp = createAsyncThunk(
  'authentication/verifyOtp',
  async (
    { otp, token }: { otp: string; token: string | '' },
    { rejectWithValue }
  ) => {
    try {
      const response = await axiosRequest('POST', `/users/verify/${token}`, {
        otp
      });

      return response.data as unknown as VerifyOtpResponse;
    } catch (err: unknown) {
      if (axios.isAxiosError(err) && err.response) {
        return rejectWithValue(err.response.data || 'Verification failed');
      }
      const error = err as Error;
      return rejectWithValue({ message: error.message });
    }
  }
);

export const logoutUser = createAsyncThunk(
  'authentication/logoutUser',
  async (_, { rejectWithValue }) => {
    try {
      const response = await axiosRequest('POST', '/users/logout', {}, true);

      if (response.status === 200) {
        localStorage.clear();
        return true;
      }
    } catch (err: unknown) {
      const errorMessage =
        axios.isAxiosError(err) && err.response
          ? err.response.data || 'Logout failed'
          : (err as Error).message;
      return rejectWithValue({ message: errorMessage });
    }
  }
);

const UserSlice = createSlice({
  name: 'user',
  initialState,
  reducers: {
    updateUserRole(state, action) {
      state.role = action.payload;
    },
    setAuthToken(state, action) {
      state.token = action.payload;
    }
  },
  extraReducers: builder => {
    builder
      .addCase(registerUser.pending, state => {
        state.loading = true;
        state.role = null;
        state.userInfo = {};
        state.error = null;
        state.success = false;
        state.token = null;
      })
      .addCase(registerUser.fulfilled, state => {
        state.loading = false;
        state.role = null;
        state.error = null;
        state.success = true;
        state.token = null;
      })
      .addCase(registerUser.rejected, (state, action) => {
        state.loading = false;
        state.role = null;
        state.error = action.payload as FormErrorInterface;
        state.success = false;
        state.token = null;
      })
      .addCase(logInUser.pending, state => {
        state.loading = true;
        state.role = null;
        state.userInfo = {};
        state.error = null;
        state.success = false;
        state.token = null;
      })
      .addCase(logInUser.fulfilled, (state, action) => {
        state.loading = false;
        state.error = null;
        state.success = true;
        state.role = (jwtDecode(action.payload.data) as DecodedInterface).role;
        const decodedToken = jwtDecode(action.payload.data) as DecodedInterface;
        state.role = decodedToken.role;
      })
      .addCase(logInUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as FormErrorInterface;
        state.success = false;
        state.role = null;
        state.token = null;
      })
      .addCase(getUserProfile.pending, state => {
        state.loading = true;
        state.error = null;
        state.success = false;
      })
      .addCase(getUserProfile.fulfilled, (state, action) => {
        state.loading = false;
        state.error = null;
        state.userInfo = _.pick(action.payload, [
          'name',
          'email',
          'photoUrl',
          'preferedlanguage',
          'preferedcurrency',
          'phone',
          'address'
        ]);
        state.success = true;
      })
      .addCase(getUserProfile.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as FormErrorInterface;
        state.success = false;
      })
      .addCase(logoutUser.pending, state => {
        state.loading = true;
      })
      .addCase(logoutUser.fulfilled, state => {
        state.loading = false;
        state.error = null;
        state.success = true;
        state.userInfo = null;
        state.role = null;
        state.token = null;
      })
      .addCase(logoutUser.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload as FormErrorInterface;
        state.success = false;
      });
  }
});

export default UserSlice.reducer;
export const { updateUserRole, setAuthToken } = UserSlice.actions;

1	import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';	1✔
2	import axios from 'axios';	1✔
3	import { axiosRequest, FormErrorInterface } from '@/utils';	1✔
4	import _ from 'lodash';	1✔
5	import { jwtDecode } from 'jwt-decode';	1✔
6		1✔
7	export interface UserRegistrationInterface {	1✔
8	name: string;	1✔
9	email: string;	1✔
10	password: string;	1✔
11	phone: string;	1✔
12	address: string;	1✔
13	}	1✔
14		1✔
15	export interface LogInInterface {	1✔
16	email: string;	1✔
17	password: string;	1✔
18	}	1✔
19		1✔
20	export enum USER_ROLE {	1✔
21	SELLER = 'seller',	1✔
22	ADMIN = 'admin',	1✔
23	BUYER = 'buyer'	1✔
24	}	1✔
25		1✔
26	export interface UserInfoInterface {	1✔
27	name?: string;	1✔
28	role?: USER_ROLE;	1✔
29	email?: string;	1✔
30	photoUrl?: string;	1✔
31	preferedlanguage?: string \| null;	1✔
32	preferedcurrency?: string \| null;	1✔
33	phone?: string;	1✔
34	address?: string;	1✔
35	}	1✔
36		1✔
37	interface UserState {	1✔
38	userInfo: UserInfoInterface \| null;	1✔
39	role: USER_ROLE \| null;	1✔
40	loading: boolean;	1✔
41	error: FormErrorInterface \| null;	1✔
42	success: boolean;	1✔
43	token: string \| null;	1✔
44	}	1✔
45		1✔
46	const initialState: UserState = {	1✔
47	userInfo: null,	1✔
48	role: null,	1✔
49	loading: false,	1✔
50	error: null,	1✔
51	success: false,	1✔
52	token: null	1✔
53	};	1✔
54		1✔
55	export interface DecodedInterface {	1✔
56	id: string;	1✔
57	role: USER_ROLE;	1✔
58	iat: number;	1✔
59	exp: number;	1✔
60	}	1✔
61		1✔
62	export interface VerifyOtpResponse {	1✔
63	data: string;	1✔
64	}	1✔
65		1✔
66	export const registerUser = createAsyncThunk(	1✔
67	'authentication/registerUser',	1✔
68	async (userData: UserRegistrationInterface, { rejectWithValue }) => {	1✔
69	try {	2✔
70	const response = await axiosRequest('POST', `/users/register`, userData);	2✔
71	return response.data;	1✔
72	} catch (err: unknown) {	1✔
73	if (axios.isAxiosError(err) && err.response) {	1✔
74	return rejectWithValue(err.response.data \|\| 'Registration failed');	1!
75	}	1!
UNCOV 76	const error = err as Error;	×
77	return rejectWithValue({ message: error.message });	×
78	}	×
79	}	2✔
80	);	1✔
81		1✔
82	export const logInUser = createAsyncThunk(	1✔
83	'authentication/loginUser',	1✔
84	async (userData: LogInInterface, { rejectWithValue }) => {	1✔
85	try {	2✔
86	const response = await axiosRequest('POST', `/users/login`, userData);	2✔
87	localStorage.setItem('token', JSON.stringify(response.data.data));	1✔
88	return response.data;	1✔
89	} catch (err: unknown) {	1✔
90	if (axios.isAxiosError(err) && err.response) {	1✔
91	return rejectWithValue(err.response.data \|\| 'login failed');	1!
92	}	1!
UNCOV 93	const error = err as Error;	×
94	return rejectWithValue({ message: error.message });	×
95	}	×
96	}	2✔
97	);	1✔
98		1✔
99	export const getUserProfile = createAsyncThunk(	1✔
100	'authentication/userProfile',	1✔
101	async (_, { rejectWithValue }) => {	1✔
UNCOV 102	try {	×
103	const response = await axiosRequest('GET', `/users/profile`, '', true);	×
104	return response.data.data;	×
105	} catch (err: unknown) {	×
106	localStorage.clear();	×
107	if (axios.isAxiosError(err) && err.response) {	×
108	return rejectWithValue(err.response.data \|\| 'login failed');	×
109	}	×
110	const error = err as Error;	×
111	return rejectWithValue({ message: error.message });	×
112	}	×
113	}	×
114	);	1✔
115		1✔
116	export const verifyOtp = createAsyncThunk(	1✔
117	'authentication/verifyOtp',	1✔
118	async (	1✔
UNCOV 119	{ otp, token }: { otp: string; token: string \| '' },	×
120	{ rejectWithValue }	×
121	) => {	×
122	try {	×
123	const response = await axiosRequest('POST', `/users/verify/${token}`, {	×
124	otp	×
125	});	×
126		×
127	return response.data as unknown as VerifyOtpResponse;	×
128	} catch (err: unknown) {	×
129	if (axios.isAxiosError(err) && err.response) {	×
130	return rejectWithValue(err.response.data \|\| 'Verification failed');	×
131	}	×
132	const error = err as Error;	×
133	return rejectWithValue({ message: error.message });	×
134	}	×
135	}	×
136	);	1✔
137		1✔
138	export const logoutUser = createAsyncThunk(	1✔
139	'authentication/logoutUser',	1✔
140	async (_, { rejectWithValue }) => {	1✔
141	try {	2✔
142	const response = await axiosRequest('POST', '/users/logout', {}, true);	2✔
143		1✔
144	if (response.status === 200) {	1✔
145	localStorage.clear();	1✔
146	return true;	1✔
147	}	1✔
148	} catch (err: unknown) {	2✔
149	const errorMessage =	1✔
150	axios.isAxiosError(err) && err.response	1✔
151	? err.response.data \|\| 'Logout failed'	1!
152	: (err as Error).message;	1✔
153	return rejectWithValue({ message: errorMessage });	1✔
154	}	1✔
155	}	2✔
156	);	1✔
157		1✔
158	const UserSlice = createSlice({	1✔
159	name: 'user',	1✔
160	initialState,	1✔
161	reducers: {	1✔
162	updateUserRole(state, action) {	1✔
UNCOV 163	state.role = action.payload;	×
164	},	×
165	setAuthToken(state, action) {	1✔
UNCOV 166	state.token = action.payload;	×
167	}	×
168	},	1✔
169	extraReducers: builder => {	1✔
170	builder	5✔
171	.addCase(registerUser.pending, state => {	5✔
172	state.loading = true;	2✔
173	state.role = null;	2✔
174	state.userInfo = {};	2✔
175	state.error = null;	2✔
176	state.success = false;	2✔
177	state.token = null;	2✔
178	})	2✔
179	.addCase(registerUser.fulfilled, state => {	5✔
180	state.loading = false;	1✔
181	state.role = null;	1✔
182	state.error = null;	1✔
183	state.success = true;	1✔
184	state.token = null;	1✔
185	})	1✔
186	.addCase(registerUser.rejected, (state, action) => {	5✔
187	state.loading = false;	1✔
188	state.role = null;	1✔
189	state.error = action.payload as FormErrorInterface;	1✔
190	state.success = false;	1✔
191	state.token = null;	1✔
192	})	1✔
193	.addCase(logInUser.pending, state => {	5✔
194	state.loading = true;	2✔
195	state.role = null;	2✔
196	state.userInfo = {};	2✔
197	state.error = null;	2✔
198	state.success = false;	2✔
199	state.token = null;	2✔
200	})	2✔
201	.addCase(logInUser.fulfilled, (state, action) => {	5✔
202	state.loading = false;	1✔
203	state.error = null;	1✔
204	state.success = true;	1✔
205	state.role = (jwtDecode(action.payload.data) as DecodedInterface).role;	1✔
206	const decodedToken = jwtDecode(action.payload.data) as DecodedInterface;	1✔
207	state.role = decodedToken.role;	1✔
208	})	1✔
209	.addCase(logInUser.rejected, (state, action) => {	5✔
210	state.loading = false;	1✔
211	state.error = action.payload as FormErrorInterface;	1✔
212	state.success = false;	1✔
213	state.role = null;	1✔
214	state.token = null;	1✔
215	})	1✔
216	.addCase(getUserProfile.pending, state => {	5✔
UNCOV 217	state.loading = true;	×
218	state.error = null;	×
219	state.success = false;	×
220	})	×
221	.addCase(getUserProfile.fulfilled, (state, action) => {	5✔
UNCOV 222	state.loading = false;	×
223	state.error = null;	×
224	state.userInfo = _.pick(action.payload, [	×
225	'name',	×
226	'email',	×
227	'photoUrl',	×
228	'preferedlanguage',	×
229	'preferedcurrency',	×
230	'phone',	×
231	'address'	×
232	]);	×
233	state.success = true;	×
234	})	×
235	.addCase(getUserProfile.rejected, (state, action) => {	5✔
UNCOV 236	state.loading = false;	×
237	state.error = action.payload as FormErrorInterface;	×
238	state.success = false;	×
NEW 239	})	×
240	.addCase(logoutUser.pending, state => {	5✔
241	state.loading = true;	2✔
242	})	2✔
243	.addCase(logoutUser.fulfilled, state => {	5✔
244	state.loading = false;	1✔
245	state.error = null;	1✔
246	state.success = true;	1✔
247	state.userInfo = null;	1✔
248	state.role = null;	1✔
249	state.token = null;	1✔
250	})	1✔
251	.addCase(logoutUser.rejected, (state, action) => {	5✔
252	state.loading = false;	1✔
253	state.error = action.payload as FormErrorInterface;	1✔
254	state.success = false;	1✔
255	});	1✔
256	}	5✔
257	});	1✔
258		1✔
259	export default UserSlice.reducer;	1✔
260	export const { updateUserRole, setAuthToken } = UserSlice.actions;	1✔

atlp-rwanda / alpha-ec-fe / a5270f3a-d5c6-4841-8f2d-88100e36546a

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous