c2ef889b-c2f2-49f8-8f27-e2b2e720f539

Committed 09 Jul 2024 12:49PM UTC coverage: 84.566% (+0.1%) from 84.42%

Build # c2ef889b-c2f2-49f8-8f27-e2b2e720f539

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 %.

38 of 39 new or added lines in 1 file covered. (97.44%)

9 existing lines in 1 file now uncovered.

2305 of 2705 relevant lines covered (85.21%)

1.74 hits per line

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

76.84

/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();
        sessionStorage.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	sessionStorage.clear();	1✔
147	return true;	1✔
148	}	1✔
149	} catch (err: unknown) {	2✔
150	const errorMessage =	1✔
151	axios.isAxiosError(err) && err.response	1✔
152	? err.response.data \|\| 'Logout failed'	1!
153	: (err as Error).message;	1✔
154	return rejectWithValue({ message: errorMessage });	1✔
155	}	1✔
156	}	2✔
157	);	1✔
158		1✔
159	const UserSlice = createSlice({	1✔
160	name: 'user',	1✔
161	initialState,	1✔
162	reducers: {	1✔
163	updateUserRole(state, action) {	1✔
UNCOV 164	state.role = action.payload;	×
165	},	×
166	setAuthToken(state, action) {	1✔
UNCOV 167	state.token = action.payload;	×
168	}	×
169	},	1✔
170	extraReducers: builder => {	1✔
171	builder	5✔
172	.addCase(registerUser.pending, state => {	5✔
173	state.loading = true;	2✔
174	state.role = null;	2✔
175	state.userInfo = {};	2✔
176	state.error = null;	2✔
177	state.success = false;	2✔
178	state.token = null;	2✔
179	})	2✔
180	.addCase(registerUser.fulfilled, state => {	5✔
181	state.loading = false;	1✔
182	state.role = null;	1✔
183	state.error = null;	1✔
184	state.success = true;	1✔
185	state.token = null;	1✔
186	})	1✔
187	.addCase(registerUser.rejected, (state, action) => {	5✔
188	state.loading = false;	1✔
189	state.role = null;	1✔
190	state.error = action.payload as FormErrorInterface;	1✔
191	state.success = false;	1✔
192	state.token = null;	1✔
193	})	1✔
194	.addCase(logInUser.pending, state => {	5✔
195	state.loading = true;	2✔
196	state.role = null;	2✔
197	state.userInfo = {};	2✔
198	state.error = null;	2✔
199	state.success = false;	2✔
200	state.token = null;	2✔
201	})	2✔
202	.addCase(logInUser.fulfilled, (state, action) => {	5✔
203	state.loading = false;	1✔
204	state.error = null;	1✔
205	state.success = true;	1✔
206	state.role = (jwtDecode(action.payload.data) as DecodedInterface).role;	1✔
207	const decodedToken = jwtDecode(action.payload.data) as DecodedInterface;	1✔
208	state.role = decodedToken.role;	1✔
209	})	1✔
210	.addCase(logInUser.rejected, (state, action) => {	5✔
211	state.loading = false;	1✔
212	state.error = action.payload as FormErrorInterface;	1✔
213	state.success = false;	1✔
214	state.role = null;	1✔
215	state.token = null;	1✔
216	})	1✔
217	.addCase(getUserProfile.pending, state => {	5✔
UNCOV 218	state.loading = true;	×
219	state.error = null;	×
220	state.success = false;	×
221	})	×
222	.addCase(getUserProfile.fulfilled, (state, action) => {	5✔
UNCOV 223	state.loading = false;	×
224	state.error = null;	×
225	state.userInfo = _.pick(action.payload, [	×
226	'name',	×
227	'email',	×
228	'photoUrl',	×
229	'preferedlanguage',	×
230	'preferedcurrency',	×
231	'phone',	×
232	'address'	×
233	]);	×
234	state.success = true;	×
235	})	×
236	.addCase(getUserProfile.rejected, (state, action) => {	5✔
UNCOV 237	state.loading = false;	×
238	state.error = action.payload as FormErrorInterface;	×
239	state.success = false;	×
NEW 240	})	×
241	.addCase(logoutUser.pending, state => {	5✔
242	state.loading = true;	2✔
243	})	2✔
244	.addCase(logoutUser.fulfilled, state => {	5✔
245	state.loading = false;	1✔
246	state.error = null;	1✔
247	state.success = true;	1✔
248	state.userInfo = null;	1✔
249	state.role = null;	1✔
250	state.token = null;	1✔
251	})	1✔
252	.addCase(logoutUser.rejected, (state, action) => {	5✔
253	state.loading = false;	1✔
254	state.error = action.payload as FormErrorInterface;	1✔
255	state.success = false;	1✔
256	});	1✔
257	}	5✔
258	});	1✔
259		1✔
260	export default UserSlice.reducer;	1✔
261	export const { updateUserRole, setAuthToken } = UserSlice.actions;	1✔

atlp-rwanda / alpha-ec-fe / c2ef889b-c2f2-49f8-8f27-e2b2e720f539

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