Display all user profiles

package.json

@@ -27,6 +27,7 @@
     "react-native-responsive-linechart": "^5.7.1",
     "react-native-safe-area-context": "^3.4.1",
     "react-native-screens": "^3.12.0",
+    "react-native-super-grid": "^4.2.0",
     "react-native-svg": "^12.1.1",
     "react-native-svg-charts": "^5.4.0",
     "react-native-vector-icons": "^9.1.0",

src/Redux/Slices/allUsersSlice.js

@@ -0,0 +1,40 @@
+import {createAsyncThunk, createSlice} from '@reduxjs/toolkit';
+import {allUserProfiles} from '../../Common/ApiConfig';
+
+export const getAllUsersProf = createAsyncThunk(
+  'user/getAllUsersProf',
+  async id => {
+    const response = await fetch(allUserProfiles + '1&per_page=12', {
+      method: 'GET',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+    const respData = await response.json();
+    return respData;
+  },
+);
+
+const allProfSlice = createSlice({
+  name: 'allProfSlice',
+  initialState: {
+    processing: false,
+    isLoggedIn: false,
+    data: [],
+  },
+  reducers: {},
+  extraReducers: builder => {
+    builder.addCase(getAllUsersProf.pending, state => {
+      state.processing = true;
+    });
+    builder.addCase(getAllUsersProf.fulfilled, (state, action) => {
+      state.processing = false;
+      state.data = action.payload?.data;
+    });
+    builder.addCase(getAllUsersProf.rejected, state => {
+      state.processing = false;
+    });
+  },
+});
+
+export default allProfSlice.reducer;

src/Redux/Store.js

@@ -2,11 +2,13 @@ import {configureStore, combineReducers} from '@reduxjs/toolkit';
 import userSignupSlice from './Slices/userSignupSlice';
 import authSlice from './Slices/authSlice';
 import profileSlice from './Slices/profileSlice';
+import allUsersSlice from './Slices/allUsersSlice';
 
 const rootReducer = combineReducers({
   auth: authSlice,
   signup: userSignupSlice,
   profile: profileSlice,
+  allUserProfiles: allUsersSlice,
 });
 
 export const store = configureStore({

src/RouteConfig.js

@@ -23,6 +23,7 @@ import {RootState} from '@reduxjs/toolkit/dist/query/core/apiState';
 import AntDesign from 'react-native-vector-icons/AntDesign';
 import {logout} from './Redux/Slices/authSlice';
 import Profile from './Screens/Profile';
+import AllUsersProfile from './Screens/AllUsersProfile';
 
 const Stack = createNativeStackNavigator();
 const Drawer = createDrawerNavigator();
@@ -100,6 +101,23 @@ function NavDrawer({navigation}) {
           },
         })}
       />
+      <Drawer.Screen
+        name={'User Profiles'}
+        component={AllUsersProfile}
+        options={({route}) => ({
+          headerTintColor: '#fff',
+          headerTitleStyle: {
+            fontSize: dynamicSize(22),
+            fontFamily: FONTS.Bold,
+          },
+          animation: 'none',
+          headerTitleAlign: 'center',
+          headerRight: () => <></>,
+          headerStyle: {
+            backgroundColor: 'black',
+          },
+        })}
+      />
     </Drawer.Navigator>
   );
 }

src/Screens/AllUsersProfile.js

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import {useEffect} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {RootState} from '@reduxjs/toolkit/dist/query/core/apiState';
+import {ActivityIndicator, View} from 'react-native';
+import FastImage from 'react-native-fast-image';
+import {CText} from '../Components/CText';
+import {getAllUsersProf} from '../Redux/Slices/allUsersSlice';
+import {dynamicSize} from '../Utils';
+import {FlatGrid} from 'react-native-super-grid';
+
+function UserCard(data, index) {
+  return (
+    <View style={{alignItems: 'center'}} key={index}>
+      <FastImage
+        source={{uri: data.item.avatar}}
+        style={{width: 150, height: 150, borderRadius: 99, borderWidth: 1}}
+        resizeMode={'contain'}
+      />
+      <View style={{flexDirection: 'row', margin: 5}}>
+        <CText
+          title={data.item.first_name + ' '}
+          h3={true}
+          style={{color: 'black'}}
+        />
+        <CText title={data.item.last_name} h3={true} style={{color: 'black'}} />
+      </View>
+      <CText title={data.item.email} h5={true} style={{color: 'black'}} />
+    </View>
+  );
+}
+
+export default function AllUsersProfile({navigation}) {
+  const dispatch = useDispatch();
+
+  const {data, processing} = useSelector(
+    (state: RootState) => state.allUserProfiles,
+  );
+
+  useEffect(() => {
+    dispatch(getAllUsersProf());
+  }, [dispatch]);
+
+  if (processing) {
+    return <ActivityIndicator size={'large'} color={'black'} />;
+  }
+
+  return (
+    <>
+      {data.length > 0 ? (
+        <FlatGrid
+          fixed={true}
+          itemDimension={dynamicSize(175)}
+          data={data}
+          style={{}}
+          spacing={5}
+          renderItem={({item, index}) => <UserCard item={item} key={index} />}
+        />
+      ) : null}
+    </>
+  );
+}

src/Screens/Profile.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {useLayoutEffect} from 'react';
+import {useEffect} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {getProf} from '../Redux/Slices/profileSlice';
 import {RootState} from '@reduxjs/toolkit/dist/query/core/apiState';
@@ -13,11 +13,11 @@ export default function Profile({navigation}) {
     (state: RootState) => state.profile,
   );
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     dispatch(getProf(4));
   }, [dispatch]);
 
-  if (processing) {
+  if (processing || !firstName) {
     return <ActivityIndicator size={'large'} color={'black'} />;
   }
 

yarn.lock

@@ -6060,6 +6060,13 @@ react-native-screens@^3.12.0, react-native-screens@^3.4.0:
     react-native-gradle-plugin "^0.0.3"
     warn-once "^0.1.0"
 
+react-native-super-grid@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/react-native-super-grid/-/react-native-super-grid-4.2.0.tgz#df07d88d58f232cb2e01e0752f5279cc3b366ca4"
+  integrity sha512-5GpdcXwnwizjWECY7APpyoMyGEAieRy0hxCJl8JQAodg2IigWYx10eDHrW/b1Rw1hsZVNyo4qSrAM3iOLW2XPw==
+  dependencies:
+    prop-types "^15.6.0"
+
 react-native-svg-charts@^5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/react-native-svg-charts/-/react-native-svg-charts-5.4.0.tgz#3817a4714c276b7024e60ae5c9f13191614aecc8"