From fbf0564950e4ab28e2334f98018c68cc292c8894 Mon Sep 17 00:00:00 2001 From: sonaligarud Date: Mon, 16 Sep 2024 18:41:35 +0530 Subject: [PATCH] Task #226403 - [FE] - While API loading Page loaders are missing --- packages/common-lib/src/components/Loading.js | 43 +----- .../public/locales/be/translation.json | 3 +- .../public/locales/en/translation.json | 3 +- .../public/locales/gg/translation.json | 4 +- .../public/locales/hi/translation.json | 3 +- .../public/locales/ma/translation.json | 3 +- .../public/locales/mal/translation.json | 3 +- .../public/locales/ta/translation.json | 3 +- .../public/locales/te/translation.json | 3 +- .../nulp_elite/src/components/EventCard.js | 44 ------ .../nulp_elite/src/components/drawerFilter.js | 2 +- .../src/pages/content/AllContent.js | 135 +++++++++--------- .../src/pages/content/CategoryPage.js | 103 +++++++------ .../src/pages/events/eventDetails.js | 5 - .../nulp_elite/src/pages/events/eventList.js | 69 +-------- .../src/pages/profile/continueLearning.js | 23 +-- .../nulp_elite/src/pages/search/DomainList.js | 87 +---------- .../src/pages/voting/votingDashboard.js | 126 ++++++---------- .../nulp_elite/src/pages/voting/votingList.js | 6 +- packages/nulp_elite/src/styles/style.css | 12 +- 20 files changed, 208 insertions(+), 472 deletions(-) diff --git a/packages/common-lib/src/components/Loading.js b/packages/common-lib/src/components/Loading.js index 1b566bde..e1008d73 100644 --- a/packages/common-lib/src/components/Loading.js +++ b/packages/common-lib/src/components/Loading.js @@ -1,42 +1,13 @@ -import { Center, VStack, Text, Spinner, Heading } from 'native-base' +import { Center, HStack, Spinner, Heading } from 'native-base' import React from 'react' -import { useWindowSize } from './helper' - -export default function Loading({ message = 'Loading', ...prop }) { - const [width, height] = useWindowSize() +export default function Loading({ message = 'Loading...'}) { return ( -
- {prop?.customComponent ? ( - prop?.customComponent - ) : ( - - - {prop?.icon ? ( - prop.icon - ) : ( - - )} - - - {message} - - - - - )} +
+ + + {message} +
) } diff --git a/packages/nulp_elite/public/locales/be/translation.json b/packages/nulp_elite/public/locales/be/translation.json index 971cbef5..00efd639 100644 --- a/packages/nulp_elite/public/locales/be/translation.json +++ b/packages/nulp_elite/public/locales/be/translation.json @@ -301,5 +301,6 @@ "PUBLISHED_ON_NULP_BY":"NULP-এ প্রকাশিত", "ACCEPT_THE_NULP_TERMS_OF_USE" : "আমার বয়স 18+ বছর এবং আমি NULP ব্যবহারের শর্তাবলী বুঝি এবং স্বীকার করি", "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "একজন পিতা-মাতা/অভিভাবক হিসাবে আমি NULP ব্যবহারের শর্তাবলী বুঝি এবং স্বীকার করি যে আমার সন্তান প্রদত্ত তথ্যের সাথে NULP-এ নিবন্ধন করতে সম্মত।", - "CONTENT_DERIVED_FROM": "এই বিষয়বস্তু থেকে সংগৃহীত" + "CONTENT_DERIVED_FROM": "এই বিষয়বস্তু থেকে সংগৃহীত", + "FILTERS":"ফিল্টার" } diff --git a/packages/nulp_elite/public/locales/en/translation.json b/packages/nulp_elite/public/locales/en/translation.json index 7ffe86dc..fda9c3c5 100644 --- a/packages/nulp_elite/public/locales/en/translation.json +++ b/packages/nulp_elite/public/locales/en/translation.json @@ -321,5 +321,6 @@ "PUBLISHED_ON_NULP_BY":"PUBLISHED ON NULP BY", "ACCEPT_THE_NULP_TERMS_OF_USE" : "I am 18+ years old and understand and accept the NULP Terms of Use", "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "As a parent/guardian I understand & accept the NULP Terms of Use agree my child to register on NULP with the given information.", - "CONTENT_DERIVED_FROM": "This content is derived from" + "CONTENT_DERIVED_FROM": "This content is derived from", + "FILTERS":"Filters" } diff --git a/packages/nulp_elite/public/locales/gg/translation.json b/packages/nulp_elite/public/locales/gg/translation.json index 4a03c5f3..34fa56fb 100644 --- a/packages/nulp_elite/public/locales/gg/translation.json +++ b/packages/nulp_elite/public/locales/gg/translation.json @@ -311,6 +311,6 @@ "PUBLISHED_ON_NULP_BY":"NULP દ્વારા પ્રકાશિત", "ACCEPT_THE_NULP_TERMS_OF_USE" : "હું 18+ વર્ષનો છું અને NULP ઉપયોગની શરતો સમજું છું અને સ્વીકારું છું", "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "માતાપિતા/વાલી તરીકે હું NULP ઉપયોગની શરતોને સમજું છું અને સ્વીકારું છું અને સ્વીકારું છું કે મારા બાળકને આપેલ માહિતી સાથે NULP પર નોંધણી કરાવવા માટે સંમત થાઓ.", - "CONTENT_DERIVED_FROM": "આ સામગ્રીમાંથી ઉત્પન્ન છે" - + "CONTENT_DERIVED_FROM": "આ સામગ્રીમાંથી ઉત્પન્ન છે", + "FILTERS":"ફિલ્ટર્સ" } diff --git a/packages/nulp_elite/public/locales/hi/translation.json b/packages/nulp_elite/public/locales/hi/translation.json index 3abf4b93..84d19fa5 100644 --- a/packages/nulp_elite/public/locales/hi/translation.json +++ b/packages/nulp_elite/public/locales/hi/translation.json @@ -302,5 +302,6 @@ "THIS_CONTENT_IS_DERIVED_FROM":"यह सामग्री इससे ली गई है", "PUBLISHED_ON_NULP_BY":"NULP BY पर प्रकाशित", "ACCEPT_THE_NULP_TERMS_OF_USE" : "मैं 18+ वर्ष का हूं और NULP उपयोग की शर्तों को समझता हूं और स्वीकार करता हूं", - "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "एक माता-पिता/अभिभावक के रूप में मैं NULP उपयोग की शर्तों को समझता हूं और स्वीकार करता हूं और अपने बच्चे को दी गई जानकारी के साथ NULP पर पंजीकरण करने के लिए सहमत करता हूं।" + "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "एक माता-पिता/अभिभावक के रूप में मैं NULP उपयोग की शर्तों को समझता हूं और स्वीकार करता हूं और अपने बच्चे को दी गई जानकारी के साथ NULP पर पंजीकरण करने के लिए सहमत करता हूं।", + "FILTERS":"फिल्टर" } diff --git a/packages/nulp_elite/public/locales/ma/translation.json b/packages/nulp_elite/public/locales/ma/translation.json index fbbbe179..6abe1562 100644 --- a/packages/nulp_elite/public/locales/ma/translation.json +++ b/packages/nulp_elite/public/locales/ma/translation.json @@ -303,6 +303,7 @@ "PUBLISHED_ON_NULP_BY":"NULP द्वारे प्रकाशित", "ACCEPT_THE_NULP_TERMS_OF_USE" : "मी 18+ वर्षांचा आहे आणि NULP वापरण्याच्या अटी समजतो आणि स्वीकारतो", "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "पालक/पालक म्हणून मी NULP वापराच्या अटी समजतो आणि स्वीकारतो आणि माझ्या मुलाने दिलेल्या माहितीसह NULP वर नोंदणी करण्यास सहमती देतो.", - "CONTENT_DERIVED_FROM": "ही सामग्री यावरून घेतली आहे" + "CONTENT_DERIVED_FROM": "ही सामग्री यावरून घेतली आहे", + "FILTERS":"फिल्टर" } diff --git a/packages/nulp_elite/public/locales/mal/translation.json b/packages/nulp_elite/public/locales/mal/translation.json index ba54db24..70ab173d 100644 --- a/packages/nulp_elite/public/locales/mal/translation.json +++ b/packages/nulp_elite/public/locales/mal/translation.json @@ -303,5 +303,6 @@ "PUBLISHED_ON_NULP_BY":"NULP-ൽ പ്രസിദ്ധീകരിച്ചത്", "ACCEPT_THE_NULP_TERMS_OF_USE" : "എനിക്ക് 18+ വയസ്സുണ്ട്, NULP ഉപയോഗ നിബന്ധനകൾ മനസ്സിലാക്കുകയും അംഗീകരിക്കുകയും ചെയ്യുന്നു", "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "ഒരു രക്ഷിതാവ്/രക്ഷകൻ എന്ന നിലയിൽ, NULP ഉപയോഗ നിബന്ധനകൾ ഞാൻ മനസ്സിലാക്കുകയും അംഗീകരിക്കുകയും ചെയ്യുന്നു, തന്നിരിക്കുന്ന വിവരങ്ങൾക്കൊപ്പം NULP-ൽ രജിസ്റ്റർ ചെയ്യാൻ എൻ്റെ കുട്ടി സമ്മതിക്കുന്നു.", - "CONTENT_DERIVED_FROM": "ഈ ഉള്ളടക്കം നിന്നു പ്രാപ്തമായതാണ്" + "CONTENT_DERIVED_FROM": "ഈ ഉള്ളടക്കം നിന്നു പ്രാപ്തമായതാണ്", + "FILTERS":"ഫിൽട്ടറുകൾ" } diff --git a/packages/nulp_elite/public/locales/ta/translation.json b/packages/nulp_elite/public/locales/ta/translation.json index 7a17e9ea..c149ef4d 100644 --- a/packages/nulp_elite/public/locales/ta/translation.json +++ b/packages/nulp_elite/public/locales/ta/translation.json @@ -328,5 +328,6 @@ "PUBLISHED_ON_NULP_BY":"NULP ஆல் வெளியிடப்பட்டது", "ACCEPT_THE_NULP_TERMS_OF_USE" : "எனக்கு 18+ வயது மற்றும் NULP பயன்பாட்டு விதிமுறைகளைப் புரிந்து ஏற்றுக்கொள்கிறேன்", "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "ஒரு பெற்றோர்/பாதுகாவலராக நான் NULP பயன்பாட்டு விதிமுறைகளைப் புரிந்துகொண்டு ஏற்றுக்கொள்கிறேன், கொடுக்கப்பட்ட தகவலுடன் NULP இல் பதிவுசெய்ய என் குழந்தை ஒப்புக்கொள்கிறேன்.", - "CONTENT_DERIVED_FROM": "இந்த உள்ளடக்கம் இதிலிருந்து பெறப்பட்டுள்ளது" + "CONTENT_DERIVED_FROM": "இந்த உள்ளடக்கம் இதிலிருந்து பெறப்பட்டுள்ளது", + "FILTERS":"வடிப்பான்கள்" } diff --git a/packages/nulp_elite/public/locales/te/translation.json b/packages/nulp_elite/public/locales/te/translation.json index f13064b9..7e07953d 100644 --- a/packages/nulp_elite/public/locales/te/translation.json +++ b/packages/nulp_elite/public/locales/te/translation.json @@ -266,5 +266,6 @@ "PUBLISHED_ON_NULP_BY":"NULP ద్వారా ప్రచురించబడింది", "ACCEPT_THE_NULP_TERMS_OF_USE" : "నాకు 18+ సంవత్సరాలు మరియు NULP ఉపయోగ నిబంధనలను అర్థం చేసుకుని, అంగీకరిస్తున్నాను", "As_A_PATENT_GUARDIAN_ACCEPT_THE_NULP_TERMS_OF_USE": "తల్లిదండ్రులుగా/సంరక్షకుడిగా నేను NULP ఉపయోగ నిబంధనలను అర్థం చేసుకున్నాను & అంగీకరిస్తున్నాను, అందించిన సమాచారంతో NULPలో నమోదు చేసుకోవడానికి నా బిడ్డ అంగీకరిస్తున్నాను.", - "CONTENT_DERIVED_FROM": "ఈ సాంఘికత నుండి పొందినది" + "CONTENT_DERIVED_FROM": "ఈ సాంఘికత నుండి పొందినది", + "FILTERS":"ఫిల్టర్లు" } diff --git a/packages/nulp_elite/src/components/EventCard.js b/packages/nulp_elite/src/components/EventCard.js index 5e19b35a..72bc2364 100644 --- a/packages/nulp_elite/src/components/EventCard.js +++ b/packages/nulp_elite/src/components/EventCard.js @@ -189,56 +189,12 @@ export default function EventCard({ items, index, onClick }) { alt="App Icon" /> - - {/* {items.organisation && items.organisation.length > 0 && ( - - - {items.organisation.length === 1 - ? items.organisation[0] - : `${items.organisation[0]} + ${items.organisation.length - 1}`} - - - )} */} - {/* {(items.board || - items.gradeLevel || - items.se_boards || - items.se_gradeLevels) && ( - <> - - {(items.board || items.se_boards) && ( - - - - // - )} - {(items.gradeLevel || items.se_gradeLevels) && ( - - - - )} - - - )} */} ); } diff --git a/packages/nulp_elite/src/components/drawerFilter.js b/packages/nulp_elite/src/components/drawerFilter.js index 56aaffd0..82f9ff08 100644 --- a/packages/nulp_elite/src/components/drawerFilter.js +++ b/packages/nulp_elite/src/components/drawerFilter.js @@ -452,7 +452,7 @@ const uniqueFilteredSubCategories = [...new Set(filteredSubCategories.map(item = onClick={toggleDrawer(anchor, true)} className="h6-title " > - Filters + {t("FILTERS")} diff --git a/packages/nulp_elite/src/pages/content/AllContent.js b/packages/nulp_elite/src/pages/content/AllContent.js index 65cfe19e..22f307e3 100644 --- a/packages/nulp_elite/src/pages/content/AllContent.js +++ b/packages/nulp_elite/src/pages/content/AllContent.js @@ -7,8 +7,6 @@ import Footer from "components/Footer"; import { Link, useNavigate } from "react-router-dom"; import FloatingChatIcon from "../../components/FloatingChatIcon"; import Box from "@mui/material/Box"; -import data from "../../assets/contentSerach.json"; -import SearchBox from "components/search"; import * as frameworkService from "../../services/frameworkService"; import Container from "@mui/material/Container"; import Carousel from "react-multi-carousel"; @@ -23,12 +21,9 @@ const urlConfig = require("../../configs/urlConfig.json"); import ToasterCommon from "../ToasterCommon"; import CollectionIcon from "@mui/icons-material/Collections"; import ResourceIcon from "@mui/icons-material/LibraryBooks"; -import ContentPlaylistIcon from "@mui/icons-material/PlaylistPlay"; import LocalLibraryOutlinedIcon from "@mui/icons-material/LocalLibraryOutlined"; import ContentCopyIcon from "@mui/icons-material/ContentCopy"; -import CardMembershipSharpIcon from "@mui/icons-material/CardMembershipSharp"; import InsertChartOutlinedIcon from "@mui/icons-material/InsertChartOutlined"; -import PlaylistAddCheckOutlinedIcon from "@mui/icons-material/PlaylistAddCheckOutlined"; import FactCheckOutlinedIcon from "@mui/icons-material/FactCheckOutlined"; import AutoStoriesOutlinedIcon from "@mui/icons-material/AutoStoriesOutlined"; import ChecklistOutlinedIcon from "@mui/icons-material/ChecklistOutlined"; @@ -36,6 +31,7 @@ import SkeletonLoader from "components/skeletonLoader"; import NoResult from "./noResultFound"; const routeConfig = require("../../configs/routeConfig.json"); import * as util from "../../services/utilService"; +import { Loading } from "@shiksha/common-lib"; const responsiveCard = { superLargeDesktop: { @@ -87,6 +83,7 @@ const AllContent = () => { const [domainName, setDomainName] = useState(); const [orgId, setOrgId] = useState(); const [framework, setFramework] = useState(); + const [isLoading, setIsLoading] = useState(false); const handleResize = () => { setIsMobile(window.innerWidth <= 767); @@ -112,7 +109,7 @@ const AllContent = () => { }, [selectedDomain, domainName]); useEffect(() => { fetchData(); - }, [ domainName]); + }, [domainName]); const showErrorMessage = (msg) => { setToasterMessage(msg); @@ -123,6 +120,7 @@ const AllContent = () => { }; const fetchData = async () => { + setIsLoading(true); const newPath = location.pathname; sessionStorage.setItem("previousRoutes", newPath); setError(null); @@ -131,7 +129,7 @@ const AllContent = () => { filters: { board: [domainName], primaryCategory: [ - "course","Manuals/SOPs","Good Practices","Reports","Manual/SOPs" + "course", "Manuals/SOPs", "Good Practices", "Reports", "Manual/SOPs" ], // visibility: ["Default", "Parent"], Commentent because not showing contents on prod }, @@ -172,7 +170,7 @@ const AllContent = () => { const filteredAndSortedData = response?.data?.result?.content ?.filter((item) => - ["Manuals/SOPs","Manual/SOPs", "Good Practices", "Reports", "Course"].includes( + ["Manuals/SOPs", "Manual/SOPs", "Good Practices", "Reports", "Course"].includes( item.primaryCategory ) ) @@ -196,6 +194,9 @@ const AllContent = () => { } catch (error) { showErrorMessage(t("FAILED_TO_FETCH_DATA")); } + finally { + setIsLoading(false); + } }; const getCookieValue = (name) => { @@ -281,7 +282,7 @@ const AllContent = () => { } }; - const clearDomain = ()=>{ + const clearDomain = () => { setDomainName(null) } @@ -291,14 +292,6 @@ const AllContent = () => { const renderItems = (items, category) => { return items.map((item) => ( - // { className="d-flex jc-bw my-20 px-10" style={{ alignItems: "center" }} > - - - {t("YOU_ARE_VIEWING_CONTENTS_FOR")} - - - {domainName} - - - ✖ - + sx={{ marginTop: "10px", alignItems: "center" }} + className="d-flex xs-d-none" + > + + {t("YOU_ARE_VIEWING_CONTENTS_FOR")} + + + + {domainName} + + + ✖ + + + - - - )} - - {error && ( + )} + {isLoading ? ( + + ) : error ? ( {error} - )} - {data?.length > 0 ? ( + ) : data?.length > 0 ? ( Object.entries( data.reduce((acc, item) => { if (!acc[item.primaryCategory]) { @@ -400,7 +393,7 @@ const AllContent = () => { display: "inline-block", margin: "15px 0px 20px", }} - className="h4-title " + className="h4-title" > {" "} { }} className="h3-title" > - {category === "Course" ? "Courses" : category} + {category === "Course" ? "Courses" : category} {" "} @@ -418,7 +411,8 @@ const AllContent = () => { to={`${routeConfig.ROUTES.VIEW_ALL_PAGE.VIEW_ALL}?${category}?${domainName}`} className="viewAll mr-22" > - {t("VIEW_ALL")} {category === "Course" ? "Courses" : category} + {t("VIEW_ALL")}{" "} + {category === "Course" ? "Courses" : category} )} @@ -442,25 +436,25 @@ const AllContent = () => { > {expandedCategory === category ? items?.map((item) => ( - - - handleCardClick(item, item.primaryCategory) - } - > - - )) + + + handleCardClick(item, item.primaryCategory) + } + > + + )) : items?.slice(0, 4).map((item) => ( - - - handleCardClick(item, item.primaryCategory) - } - > - - ))} + + + handleCardClick(item, item.primaryCategory) + } + > + + ))} ) : ( <> @@ -477,6 +471,7 @@ const AllContent = () => { ) : ( )} +