Merge pull request #1599 from karivarkey/old-dev

feat (wadhwani) : added wadhwani course page

src/App.js

@@ -14,6 +14,7 @@ import Career from "./Pages/Career/Career";
 import LeaderBoard from "./Pages/LeaderBoard/leaderBoard";
 import WikiSyllabus from "./Pages/WikiSyllabus/WikiSyllabus";
 import HacktoberFest from "./Pages/Events/HacktoberFest/HacktoberFest";
+import Wadhwani from "./Pages/Wadhwani/Wadhwani";
 // import Yip from "./Pages/YIP/Yip";
 import CampusChapters from "./Pages/CampusChapters/CampusChapters";
 import BlogLanding from "./Pages/CampusChapters/Blogs/BlogLanding";
@@ -122,6 +123,7 @@ function App() {
             <Route path="events/learningfest" element={<KKEMLearningFest />} />
             <Route path="/keralatechfest" element={<KKEMLearningFest />} />
             <Route path="/maveliportfolio" element={<MaveliPortfolio />} />
+            <Route path="/wadhwani" element={<Wadhwani />} />
 
             <Route path="/team">
               <Route path="" element={<Teams />} />

src/Pages/Wadhwani/Modules/Wadhwani/index.jsx

@@ -0,0 +1,99 @@
+import React, { useEffect, useState } from "react";
+import toast from "react-hot-toast";
+import styles from "./index.module.css";
+import MuLoader from "@/MuLearnComponents/MuLoader/MuLoader";
+import axios from "axios";
+const Wadhwani = () => {
+    const [data, setData] = useState<[]>([]);
+    const [clientToken, setClientToken] = useState("");
+    const [isLoading, setIsLoading] = useState(true);
+    const [sheet, setSheet] = useState<[]>([]);
+
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const fetchData = async () => {
+        const { response, error } = await getWadhwaniClientToken();
+        if (error) {
+            toast.error(error);
+        } else if (response) {
+            setClientToken(response.access_token);
+            const { response: courses, error } = await getWadhwaniCourses(
+                response.access_token
+            );
+            if (error) {
+                toast.error(error);
+            } else if (courses) {
+                try {
+                    setIsLoading(true);
+                    const response = await axios.get(
+                        "https://opensheet.elk.sh/1LEvZozIVVquXjSvtptQcjiU0_WFaxVuEYBCYyCdsCtY/sheet"
+                    );
+                    setSheet(response.data);
+                } catch (error) {
+                    console.log(error);
+                } finally {
+                    setIsLoading(false);
+                }
+                setData(courses);
+            }
+            setIsLoading(false)
+        }
+    };
+
+    const handleCourseSelection = async (courseRootId) => {
+        const { response, error } = await getWadhwaniCourseLink(clientToken, courseRootId);
+        if (error) {
+            toast.error(error);
+            return null;
+        } else if (response) {
+            console.log(response.data)
+            window.open(response.data, "_blank");
+        }
+    };
+
+
+        const CourseCard = ({ title, desc, duration, rootId }) => {
+        return (
+            <div className={styles.containercard}>
+                <div className={styles.details}>
+                    <p className={styles.title}>{title}</p>
+                    <p className={styles.desc}>{desc}</p>
+                    <p className={styles.duration}>{duration}hrs</p>
+                </div>
+                <div onClick={() => handleCourseSelection(rootId)} className={styles.cta}>
+                    Checkout Courses
+                </div>
+            </div>
+        );
+    };
+    if (isLoading) {
+        return <MuLoader />;
+    }
+    return (
+        <div className={styles.wrapper}>
+            <h1>Wadhwani Foundation Courses</h1>
+            <div className={styles.second_view_container}>
+                <div className={styles.second_view}>
+                    <div className={styles.courses_container}>
+                        <div className={styles.course}>
+                            {sheet.map((sheet) => (
+                                <CourseCard
+                                    key={sheet.courseId}
+                                    title={sheet.courseName}
+                                    desc={stringSlice(sheet.description)}
+                                    duration={sheet.CourseDuration}
+                                    rootId={getRootIdByTitle(sheet.courseName)}
+                                />
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Wadhwani;

src/Pages/Wadhwani/Modules/Wadhwani/index.module.css

@@ -0,0 +1,104 @@
+.wrapper h1 {
+  font-weight: bold;
+  font-size: 3rem;
+}
+
+.course {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+  gap: 1rem; /* Combines row-gap and column-gap */
+  justify-items: center;
+}
+
+
+
+
+.cardHeading{
+  font-size: bold;
+  size: 10rem;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  max-height: 20v;
+}
+
+
+
+@media screen and (max-width: 1300px) {
+  .container {
+    width: 30vw;
+    height: 45vw; /* Adjust height to maintain aspect ratio */
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .wrapper h1 {
+    font-size: 2rem;
+  }
+  .container {
+    width: 70vw;
+    height: 105vw; /* Adjust height to maintain aspect ratio */
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .container {
+    width: 85vw;
+    height: 127.5vw; /* Adjust height to maintain aspect ratio */
+  }
+}
+
+
+.second_view_container {
+  margin-top: 3rem;
+  padding: 2rem;
+  background-color: #ffffff;
+}
+
+
+
+.containercard {
+  font-family: Poppins, sans-serif;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 2rem;
+  border-radius: 10px;
+  gap: 1.5rem;
+
+  box-shadow: 1px 1px 45px -5px rgb(0 0 0 / 8%);
+  -webkit-box-shadow: 1px 1px 45px -5px rgb(0 0 0 / 8%);
+  -moz-box-shadow: 1px 1px 45px -5px rgba(0, 0, 0, 0.08);
+}
+
+.title {
+  font-weight: 500;
+  font-size: 30px;
+  margin-bottom: 0.5rem;
+}
+
+.desc {
+  color: #404d61;
+  font-size: 0.9rem;
+}
+
+.duration {
+  color: #404d61;
+  opacity: 0.5;
+  font-weight: 500;
+  margin-top: 0.5rem;
+  font-size: 0.9rem;
+}
+
+.cta {
+  background: #456ff6;
+  color: white;
+  padding: 0.5rem 1rem;
+  border-radius: 5px;
+  cursor: pointer;
+}

src/Pages/Wadhwani/Modules/Wadhwani/services/api.ts

@@ -0,0 +1,104 @@
+import { privateGateway } from "@/MuLearnServices/apiGateways";
+import { dashboardRoutes } from "@/MuLearnServices/urls";
+import { AxiosError } from "axios";
+import toast from "react-hot-toast";
+export const getWadhwaniClientToken = async () => {
+    try {
+        const response = await privateGateway.post(
+            dashboardRoutes.getWadhwaniClientToken
+        );
+        const message: WadhwaniTokenResponse = response?.data?.response;
+        return { response: message, error: null };
+    } catch (err: unknown) {
+        const error = err as AxiosError;
+        if (error?.response) {
+            throw error;
+        } else {
+            return { response: null, error: error.message };
+        }
+    }
+};
+
+export const getWadhwaniCourses = async (clientToken: string) => {
+    try {
+        const response = await privateGateway.post(
+            dashboardRoutes.getWadhwaniCourses,
+            {
+                "Client-Auth-Token": clientToken
+            },
+            {
+                maxBodyLength: Infinity
+            }
+        );
+        const message: wadhwaniCourseResponse[] =
+            response?.data?.response?.data;
+        return { response: message, error: null };
+    } catch (err: unknown) {
+        const error = err as AxiosError;
+        if (error?.response) {
+            throw error;
+        } else {
+            return { response: null, error: error.message };
+        }
+    }
+};
+
+export const getWadhwaniCourseLink = async (
+    clientToken: string,
+    courseId: string
+) => {
+    const toastId=toast.loading("Fetching course link...")
+    try {
+        const response = await privateGateway.post(
+            dashboardRoutes.getWadhwaniCourseLink,
+            {
+                "Client-Auth-Token": clientToken,
+                course_root_id: courseId
+            },
+            {
+                maxBodyLength: Infinity
+            }
+        );
+        const message: wadhwaniCourseRedirectResponse = response?.data?.response;
+        if (message.data?.error?.code) {
+            return { response: null, error: message.data.error.description };
+        }else{
+            toast.success("Course link opened successfully!",{id:toastId})
+        }
+        return { response: message, error: null };
+    } catch (err: unknown) { 
+        toast.error("Please try again later.",{id:toastId})
+        const error = err as AxiosError;
+        if (error?.response) {
+            throw error;
+
+        } else {
+            return { response: null, error: error.message };
+        }
+    }
+};
+
+// const axios = require('axios');
+// const FormData = require('form-data');
+// let data = new FormData();
+// data.append('course_root_id', '64931a5571b86329790efb76');
+// data.append('Client-Auth-Token', 'eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJyekdBUjZCX0dpU21zRFJZT2syczZXOE0xSnlUckpPUGd0bFQwVGZSVGswIn0.eyJleHAiOjE3MTQyMTg4MjMsImlhdCI6MTcxNDIxODIyMywianRpIjoiYjkxZDU0OWYtYzg2ZC00ZDBhLTljZjEtYmNmODBmZTgzZDZhIiwiaXNzIjoiaHR0cHM6Ly93b2Rldi5pYW0ud2ZnbG9iYWwub3JnL2F1dGgvcmVhbG1zL3dmLW9wcG9ydHVuaXR5IiwiYXVkIjoiYWNjb3VudCIsInN1YiI6ImJkMDhiNWM4LWMxNjUtNDQzNi05NjVmLWEwY2U3ODYxNTkyMiIsInR5cCI6IkJlYXJlciIsImF6cCI6Im11bGVhcm4iLCJhY3IiOiIxIiwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbImRlZmF1bHQtcm9sZXMtd2Ytb3Bwb3J0dW5pdHkiLCJvZmZsaW5lX2FjY2VzcyIsInVtYV9hdXRob3JpemF0aW9uIl19LCJyZXNvdXJjZV9hY2Nlc3MiOnsiYWNjb3VudCI6eyJyb2xlcyI6WyJtYW5hZ2UtYWNjb3VudCIsIm1hbmFnZS1hY2NvdW50LWxpbmtzIiwidmlldy1wcm9maWxlIl19fSwic2NvcGUiOiJwcm9maWxlIGVtYWlsIiwiZW1haWxfdmVyaWZpZWQiOmZhbHNlLCJjbGllbnRJZCI6Im11bGVhcm4iLCJjbGllbnRIb3N0IjoiNDMuMjA1LjEwNi4xMzkiLCJwcmVmZXJyZWRfdXNlcm5hbWUiOiJzZXJ2aWNlLWFjY291bnQtbXVsZWFybiIsImNsaWVudEFkZHJlc3MiOiI0My4yMDUuMTA2LjEzOSJ9.jOE2n-5Ig2IlxU2wONqd7E202mvOvH_Ifhv9Iz_A80JKzMx29um2_kj6e0tadC-UDWBKi6oxkekPXKKpJNrl0JRXZysSoWQHK47zCaKDo9oP6MGEewQgpSAzf1NGWsPiOQN36MGoijR-VE9p5CWfDmgSHiUKxlMx3t2ORYg15bfkSeOmt6vVb4pdJsJQfaCmQH5xDV5dVRRisGYqnv7QRTRzLKkLbd-MIc8YSAsAXWMv5msIiiFEsjIyU2R-OKSinCxThP6RszkHz0Ek_HI5DXJEDfxIRjDiqKRmIJnP0c6f_8tqq5UA9Y_Dbgt-ffkGBBvkNWTkxeDhnDbdwj23NQ');
+
+// let config = {
+//   method: 'post',
+//   maxBodyLength: Infinity,
+//   url: 'https://dev.mulearn.org/api/v1/integrations/wadhwani/user-login/',
+//   headers: {
+//     'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjdlZDlmNjFlLTY3YzUtNDBiMy1iYTkyLWRmN2Q4NzEyNzA5MCIsIm11aWQiOiJhZG5hbmthdHRla2FkZW5AbXVsZWFybiIsInJvbGVzIjpbIlpvbmFsIENhbXB1cyBMZWFkIiwiRGlzdHJpY3QgQ2FtcHVzIExlYWQiLCJTdHVkZW50IiwiQWRtaW5zIiwiQWRtaW5zIiwiQ2FtcHVzIExlYWQiXSwiZXhwaXJ5IjoiMjAyNC0wNC0yNyAxNDo0MzowMCswMDowMCIsInRva2VuVHlwZSI6ImFjY2VzcyJ9.85KZ1PIldLS2awJi66CHCd754pUrcwbwomZw6xORe7w',
+//     ...data.getHeaders()
+//   },
+//   data : data
+// };
+
+// axios.request(config)
+// .then((response) => {
+//   console.log(JSON.stringify(response.data));
+// })
+// .catch((error) => {
+//   console.log(error);
+// });

src/Pages/Wadhwani/Modules/Wadhwani/services/types.d.ts

@@ -0,0 +1,25 @@
+interface WadhwaniTokenResponse {
+    access_token: string;
+    expires_in: number;
+    refresh_expires_in: number;
+    token_type: string;
+    "not-before-policy": number;
+    scope: string;
+}
+
+interface wadhwaniCourseResponse {
+    courseId: string;
+    courseName: string;
+    servingMode: string[];
+    courseRootId: string;
+    description: string;
+    version: string;
+    thumbnail: string;
+    language: string;
+    enrollStatus: boolean;
+}
+
+interface wadhwaniCourseRedirectResponse {
+    status: string;
+    data: any;
+}