Contributors Page UI

README.md

@@ -80,7 +80,7 @@ npm install
 Create a `.env.local` file in the root directory and add your API endpoint URL:
 
 ```sh
-VITE_API_URL=http://localhost:3000/api/v1
+VITE_API_URL=http://localhost:3000/api/v1/
 ```
 
 ### 💻 Usage

src/app/common.types.ts

@@ -10,3 +10,15 @@ export interface Snippet {
   updated_at: string;
   user_id: number;
 }
+
+export interface Contributor {
+  id: number;
+  email: string;
+  name: string;
+  bio: string;
+  avatar_url: string;
+  admin: boolean;
+  code_snippets_counter: number;
+  created_at: string;
+  updated_at: string;
+}

src/app/store.ts

@@ -1,9 +1,11 @@
 import { configureStore } from '@reduxjs/toolkit';
 import snippetReducer from '../features/snippets/snippetsSlice';
+import contributorReducer from '../features/contributors/contributorsSlice'
 
 const store = configureStore({
   reducer: {
     snippets: snippetReducer,
+    contributors: contributorReducer
   },
 });
 

src/common/services/index.ts

@@ -4,7 +4,8 @@ const API_ENDPOINT = import.meta.env.VITE_API_URL;
 //  'http://localhost:3000/api/v1/'
 
 const getAllSnippets = () => axios.get(API_ENDPOINT + 'code_snippets');
+const getAllContributors = () => axios.get(API_ENDPOINT + 'contributors');
 
-const ApiService = { getAllSnippets };
+const ApiService = { getAllSnippets, getAllContributors };
 
 export default ApiService;

src/features/contributors/contributorsSlice.ts

@@ -0,0 +1,44 @@
+import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
+import ApiService from "../../common/services";
+import { Status } from "../../common/constants";
+import { Contributor } from "../../app/common.types";
+
+interface ContributorState {
+    status: Status;
+    data: Contributor[];
+    error: string;
+}
+
+const initialState: ContributorState = {
+    status: Status.Idle,
+    data: [],
+    error: ''
+}
+
+const contributorSlice = createSlice({
+    name: 'contributor',
+    initialState,
+    reducers: {
+        setContributors(state, action){
+            state.data = action.payload;
+        }
+    }
+})
+
+export const fetchContributors = createAsyncThunk('contributors/get', async () => {
+    try {
+      const response = await ApiService.getAllContributors();
+      const data = response.data;
+      console.log("Fetched contributors data:", data);
+      return data;
+    } catch (error) {
+      console.error("Error fetching contributors:", error);
+      throw error; 
+    }
+  });
+
+
+
+
+export const {setContributors} = contributorSlice.actions;
+export default contributorSlice.reducer;

src/pages/Contributors.tsx

@@ -1,9 +1,23 @@
-import NotFound from './NotFound';
+import { useEffect } from "react";
+import { useAppDispatch, useAppSelector } from "../app/hooks";
+import { fetchContributors } from "../features/contributors/contributorsSlice";
 
 const Contributors = () => {
+  const contributors = useAppSelector((state) => state.contributors);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    console.log("Dispatching fetchContributors action...");
+    dispatch(fetchContributors());
+  }, [dispatch]);
+
+  console.log("Contributors state:", contributors);
+
   return (
     <div>
-      <NotFound />
+      {contributors.data?.map((contributor) => (
+        <h1 key={contributor.id}>{contributor.name}</h1>
+      ))}
     </div>
   );
 };