From 956abc8411310261ac75514283cd2c2572ef18e0 Mon Sep 17 00:00:00 2001 From: victorAnumudu Date: Fri, 27 Sep 2024 17:00:11 +0100 Subject: [PATCH] learn more page added --- src/Routers.jsx | 2 + .../Dashboards/AccountDashboard.jsx | 8 +- src/components/LearnMore/LearnMore.jsx | 152 ++++++++++++++++++ src/components/customTabs/TabButton.jsx | 2 +- src/services/UsersService.js | 27 +++- src/views/LearnMorePage.jsx | 10 ++ 6 files changed, 188 insertions(+), 13 deletions(-) create mode 100644 src/components/LearnMore/LearnMore.jsx create mode 100644 src/views/LearnMorePage.jsx diff --git a/src/Routers.jsx b/src/Routers.jsx index a123010..a78f54d 100644 --- a/src/Routers.jsx +++ b/src/Routers.jsx @@ -69,6 +69,7 @@ import FamilyActivitiesPage from "./views/FamilyActivitiesPage"; import FamGamesPage from "./views/FamGamesPage"; import FamilyRoutesPage from "./views/FamilyRoutesPage"; import PromoPage from "./views/PromoPage"; +import LearnMorePage from "./views/LearnMorePage"; export default function Routers() { return ( @@ -203,6 +204,7 @@ export default function Routers() { } /> } /> } /> + } /> {/*} />*/} } /> } /> diff --git a/src/components/Dashboards/AccountDashboard.jsx b/src/components/Dashboards/AccountDashboard.jsx index bf55bf5..b7f36bd 100644 --- a/src/components/Dashboards/AccountDashboard.jsx +++ b/src/components/Dashboards/AccountDashboard.jsx @@ -9,7 +9,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) => let [offerPopout, setOfferPopout] = useState({ show: false, data: {} }); // STATE TO HOLD THE VALUE OF THE ALERT DETAILS AND DETERMINE WHEN TO SHOW - let offersListLength = offersList?.length + let offersListLength = offersList?.length > 2 ? 2 : offersList?.length // getting the upper three banners for the home layout const getUpperBanner = bannerList?.filter((value, idx) => idx <= 2 - offersListLength); @@ -44,7 +44,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) => ); let image = `${imageServer}${localStorage.getItem("session_token")}/job/${item.job_uid}` - if(index < 3){ + if(index < offersListLength){ return (
@@ -78,7 +78,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) => {/* for flat banner section */}
{/* OFFER LIST DISPLAY */} - <> + {/* <> {(offersList && offersList?.length > 0) && offersList.map((item, index) => { let thePrice = PriceFormatter( @@ -96,7 +96,7 @@ const AccountDashboard = ({ className, bannerList, offersList, imageServer }) => ) } })} - + */} {getLowerBanner?.map((props, idx) => { let image = getImage(props); diff --git a/src/components/LearnMore/LearnMore.jsx b/src/components/LearnMore/LearnMore.jsx new file mode 100644 index 0000000..6e31e93 --- /dev/null +++ b/src/components/LearnMore/LearnMore.jsx @@ -0,0 +1,152 @@ +import React, {useState, useEffect} from "react"; +import Layout from "../Partials/Layout"; + +import usersService from "../../services/UsersService"; +import LoadingSpinner from "../Spinners/LoadingSpinner"; + +import TabButton from "../customTabs/TabButton"; + +export default function LearnMore() { + + const apiCall = new usersService() + + const [selectedTab, setSelectedTab] = useState("topic 1"); + + const [tabs, setTabs] = useState( + [ //STATE FOR SWITCHING BETWEEN TABS + { + id: 1, + title: "topic 1", + iconName: "history", + }, + { + id: 2, + title: "topic 2", + iconName: "history", + }, + { + id: 3, + title: "topic 3", + iconName: "history", + }, + { + id: 4, + title: "topic 4", + iconName: "history", + }, + ] + ) + + // const tabs = [ //STATE FOR SWITCHING BETWEEN TABS + // { + // id: 1, + // title: "topic 1", + // iconName: "history", + // }, + // { + // id: 2, + // title: "topic 2", + // iconName: "history", + // }, + // { + // id: 3, + // title: "topic 3", + // iconName: "history", + // }, + // { + // id: 4, + // title: "topic 4", + // iconName: "history", + // }, + // ] + + let [topics, setTopics] = useState({ // FOR PAYMENT HISTORY + loading: true, + data: [], + }) + + //FUNCTION TO GET LEARN MORE TOPIC + + useEffect(()=>{ + apiCall.getLearnmoreTopics().then((res)=>{ + if(res.data.internal_return < 0){ // success but no data + setTopics(prev => ({...prev, loading: false})) + return + } + const resData = res?.data?.result_list + setTopics(prev => ({...prev, loading: false, data: resData})) + setTabs(prev => { + return prev.map((item, index) => ({...item, title:resData[index].topic})) + }) + setSelectedTab(resData[0].topic) + // console.log('RES', resData) + }).catch((error)=>{ + setTopics(prev => ({...prev, loading: false})) + }) + }, []) + + + return ( + <> + +
+
+
+
+

+ + Learn More + +

+
+
+ +
+
+
+
+
+ {(!topics.loading && topics?.data?.length > 0) && tabs.map((item) => ( +
+ +
+ ))} +
+
+
+
+ <> + {/* TOPICS SECTION */} +
+ {topics.loading ? + + : + <> + {(topics?.data && topics?.data?.length > 0) ? +
item.topic == selectedTab)[0]?.contents, + }} className='prose dark:text-white dark:bg-dark-white' + > + {/* {topics?.data?.filter(item => item.topic == selectedTab)[0]?.contents} */} +
+ : +

No Topics found

} + + } +
+ {/* END OF TOPICS SECTION */} + +
+
+
+
+ + + ); +} diff --git a/src/components/customTabs/TabButton.jsx b/src/components/customTabs/TabButton.jsx index 2ece8fb..24b4878 100644 --- a/src/components/customTabs/TabButton.jsx +++ b/src/components/customTabs/TabButton.jsx @@ -15,7 +15,7 @@ export default function TabButton({ item='', iconName='', selectedTab='', setSel
-

{item[0].toUpperCase() + item.slice(1)}

+

{item[0]?.toUpperCase() + item?.slice(1)}

) diff --git a/src/services/UsersService.js b/src/services/UsersService.js index a3742a2..4cf0de5 100644 --- a/src/services/UsersService.js +++ b/src/services/UsersService.js @@ -1502,14 +1502,25 @@ class usersService { return this.postAuxEnd("/promoverify", postData); } - // API FUNCTION TO LOGIN USER THROUGH PROMO LINK - loginPromo(reqData) { - var postData = { - action: apiConst.WRENCHBOARD_LOGIN_PROMO, - ...reqData - }; - return this.postAuxEnd("/loginpromo", postData); - } + // API FUNCTION TO LOGIN USER THROUGH PROMO LINK + loginPromo(reqData) { + var postData = { + action: apiConst.WRENCHBOARD_LOGIN_PROMO, + ...reqData + }; + return this.postAuxEnd("/loginpromo", postData); + } + + // API FUNCTION TO GET LEARN MORE TOPICS + getLearnmoreTopics() { + var postData = { + member_uid: localStorage.getItem("uid"), + member_id: localStorage.getItem("member_id"), + sessionid: localStorage.getItem("session_token"), + // action: apiConst.WRENCHBOARD_LOGIN_PROMO, + }; + return this.postAuxEnd("/learnmore", postData); + } /* - 20:27:30.118 FLOG_MAX [757411]: REQ_STRING(username) diff --git a/src/views/LearnMorePage.jsx b/src/views/LearnMorePage.jsx new file mode 100644 index 0000000..1c7a7a7 --- /dev/null +++ b/src/views/LearnMorePage.jsx @@ -0,0 +1,10 @@ +import React from "react"; +import LearnMore from "../components/LearnMore/LearnMore"; + +export default function LearnMorePage() { + return ( + <> + + + ); +} -- 2.34.1