Sravaani · gnnandan · Aug 18, 2023 · Aug 19, 2023 · Aug 19, 2023 · Aug 19, 2023
diff --git a/.dockerignore b/.dockerignore
@@ -0,0 +1,3 @@
+node_modules
+README.md
+.gitignore
diff --git a/Dockerfile.dev b/Dockerfile.dev
@@ -0,0 +1,21 @@
+FROM node:alpine
+
+
+# Create app directory
+WORKDIR /mentor_mentee_app
+
+
+# Install app dependencies
+# A wildcard is used to ensure both package.json AND package-lock.json are copied
+# where available (npm@5+)
+COPY ./package.json /mentor_mentee_app
+
+RUN npm install
+# If you are building your code for production
+# RUN npm ci --omit=dev
+
+# Bundle app source
+COPY . /mentor_mentee_app/
+
+EXPOSE 5173
+CMD npm run dev -- --host
diff --git a/dist/assets/index-63bb8e50.js b/dist/assets/index-63bb8e50.js
diff --git a/dist/assets/index-716dd03b.css b/dist/assets/index-716dd03b.css
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> 
+   <title>Product</title>
+    <script type="module" crossorigin src="/assets/index-63bb8e50.js"></script>
+    <link rel="stylesheet" href="/assets/index-716dd03b.css">
+  </head>
+  <body>
+    <div id="root"></div>
+
+  </body>
+</html>
diff --git a/dist/vite.svg b/dist/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -5,18 +5,20 @@ import {useDispatch, useSelector} from 'react-redux';
 import { addData } from "./features/getSlice";
 import Data from "./pages/Data";
 import { useEffect } from "react";
+import { getMobileList } from './services/mobileAction';
 
 function App() {
  const dispatch = useDispatch();
- const apiData = useSelector((state) => state.getData);
-  async function getApi(){
-    const res = await  axios.get('https://dummyjson.com/products');
-    const data =  await res.data.products;
-    dispatch(addData(data))
-  }
-
+ const apiData = useSelector((state) => state.phoneReducer.phoneList);
+  // async function getApi(){
+  //   const res = await  axios.get('https://dummyjson.com/products');
+  //   const data =  await res.data.products;
+  //   dispatch(addData(data))
+  // }
+ console.log(apiData, '>>>>>>>>>>>>>>>>>>>>>>>>');
 useEffect(() => {
-getApi();
+  console.log('LLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLLL');
+   dispatch( getMobileList())
 },[])
   return (
     <div className="App">

diff --git a/src/pages/About.jsx b/src/pages/About.jsx
@@ -6,6 +6,10 @@ const About = () => {
     <div className="text-center m-auto">
       <Navbar/>
       <h1 className= "mt-20 text-2xl">About</h1>
+
+      <body>
+      <h1>Curious Ecosystem</h1>
+      </body>
     </div>
   )
 }

diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
@@ -6,6 +6,7 @@ const Contact = () => {
     <div className="text-center m-auto">
     <Navbar/>
     <h1 className= "mt-20 text-2xl">Contact</h1>
+    <h1>This is Contact Page</h1>
   </div>
   )
 }

diff --git a/src/pages/Data.jsx b/src/pages/Data.jsx
@@ -4,7 +4,7 @@ const Data = ({apiData}) => {
   return (
     <div>
         <ul>
-            {apiData[0]?.map(data => (
+            {apiData?.map(data => (
                 <li key = {data.id}>{data.title}</li>
             ))}
         </ul>

diff --git a/src/reducers/phoneReducer.js b/src/reducers/phoneReducer.js
@@ -0,0 +1,20 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { getMobileList } from "../services/mobileAction";
+
+const initialState = {
+    phoneList: []
+}
+const phoneReducer = createSlice({
+    name: 'phone',
+    initialState,
+    extraReducers : ( builder) => {
+        builder.addCase( getMobileList.fulfilled, (state, action ) => {
+            state.phoneList = action.payload.data.products
+
+        })
+    }
+});
+
+export default phoneReducer.reducer;
+
+
diff --git a/src/services/mobileAction.jsx b/src/services/mobileAction.jsx
@@ -0,0 +1,11 @@
+import { createAsyncThunk } from "@reduxjs/toolkit";
+import axios from "axios";
+
+export const getMobileList = createAsyncThunk(
+    'mobile-phone',
+    async () => {
+        console.log('KKKKKKKKKKKKKKKKKK');
+        const res = await axios.get('https://dummyjson.com/products');
+        return res;
+    }
+)
diff --git a/src/store/store.js b/src/store/store.js
@@ -1,8 +1,8 @@
 import { configureStore } from '@reduxjs/toolkit';
-import getSlice from '../features/getSlice';
+import phoneReducer from '../reducers/phoneReducer';
 
 export const store = configureStore({
   reducer: {
-    getData : getSlice
+    phoneReducer
   },
 })
diff --git a/vite.config.js b/vite.config.js
@@ -4,4 +4,14 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+
+  //below config is required to map the port between Docker container and your React app 
+  server: {
+    host: true, // needed for the Docker Container port mapping to work
+    strictPort: true,
+    port: 5173, // you can replace this port with any port
+    watch: {
+      usePolling: true,
+    }
+  }
 })