Refactored into PinnedAnnouncementComponent

shiksha-platform · Jul 12, 2022 · 3bb753c · 3bb753c
1 parent 9d400d5
commit 3bb753c
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 68 deletions.
diff --git a/packages/announcements/src/App.js b/packages/announcements/src/App.js
@@ -25,7 +25,13 @@ function App() {
   const LoginComponent = React.lazy(() => import("core/Login"));
 
   return (
-    <AppShell theme={theme} routes={routes} AuthComponent={LoginComponent} />
+    <AppShell
+      theme={theme}
+      routes={routes}
+      AuthComponent={LoginComponent}
+      isShowPinnedAnnouncements={true}
+      isShowFooterLink={true}
+    />
   );
 }
 

diff --git a/packages/announcements/src/pages/Announcements.js b/packages/announcements/src/pages/Announcements.js
@@ -75,7 +75,7 @@ const filters = [
   { name: "Author", data: ["Principal", "Teacher"] },
 ];
 
-const Announcements = ({ footerLinks, appName }) => {
+const Announcements = ({ footerLinks, appName, pinnedAnnouncementsData }) => {
   const { t } = useTranslation();
   const [showModal, setShowModal] = React.useState(false);
   const [filterData, setFilterData] = React.useState(
@@ -135,7 +135,7 @@ const Announcements = ({ footerLinks, appName }) => {
       setFilterData(f);
     }
   };
-
+  console.log(pinnedAnnouncementsData);
   return (
     <Layout
       _header={{
@@ -155,6 +155,7 @@ const Announcements = ({ footerLinks, appName }) => {
         },
       }}
       _footer={footerLinks}
+      _pinnedAnnouncementsData={pinnedAnnouncementsData}
     >
       <Stack space={1} mb="2">
         <Box bg={colors.white} p="5" roundedBottom={"xl"}>

diff --git a/packages/common-lib/src/components/AppShell.tsx b/packages/common-lib/src/components/AppShell.tsx
@@ -11,6 +11,7 @@ function AppShell({
   basename,
   isShowFooterLink,
   appName,
+  isShowPinnedAnnouncements,
   ...otherProps
 }: any) {
   const [token, setToken] = useState(localStorage.getItem('token'))
@@ -56,6 +57,24 @@ function AppShell({
         ]
       }
 
+  //TODO: integrate with API call to fetch pinned announcements
+  //pinned announcements data is common to all components depending on their
+  console.log(isShowPinnedAnnouncements, isShowFooterLink)
+  const pinnedAnnouncementsData = !isShowPinnedAnnouncements
+    ? []
+    : [
+        {
+          data: 'Shiksha V2.0 Is Live! 🚀🎉',
+          color: 'green.100',
+          isDismissable: true
+        },
+        {
+          data: 'Students should not stand on road outside school during monsoon',
+          color: 'amber.100',
+          isDismissable: false
+        }
+      ]
+  console.log(pinnedAnnouncementsData)
   useEffect(() => {
     const subscription = eventBus.subscribe('AUTH', (data, envelop) => {
       if ((data.eventType = 'LOGIN_SUCCESS')) {
@@ -90,7 +109,11 @@ function AppShell({
                 <Route
                   key={index}
                   path={item.path}
-                  element={<item.component {...{ footerLinks, appName }} />}
+                  element={
+                    <item.component
+                      {...{ footerLinks, appName, pinnedAnnouncementsData }}
+                    />
+                  }
                 />
               ))}
             </Routes>

diff --git a/packages/common-lib/src/components/layout/AppBar.js b/packages/common-lib/src/components/layout/AppBar.js
@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 import {
-  VStack,
   HStack,
   Box,
   StatusBar,
@@ -14,20 +13,6 @@ import {
 } from 'native-base'
 import { useNavigate } from 'react-router-dom'
 import IconByName from '../IconByName'
-import { BodyMedium } from './HeaderTags'
-
-const pinnedAnnouncementsData = [
-  {
-    data: 'Shiksha V2.0 Is Live! 🚀🎉',
-    color: 'green.100',
-    isDismissable: true
-  },
-  {
-    data: 'Students should not stand on road outside school during monsoon',
-    color: 'amber.100',
-    isDismissable: false
-  }
-]
 
 export default function AppBar({
   isEnableHamburgerMenuButton,
@@ -59,59 +44,11 @@ export default function AppBar({
     if (setSearchState) setSearchState(boolean)
     setSearchInput(boolean)
   }
-  const [pinnedAnnouncementsList, setPinnedAnnouncementsList] = React.useState(
-    pinnedAnnouncementsData
-  )
-  const pinnedData = React.useMemo(
-    () => pinnedAnnouncementsList,
-    [pinnedAnnouncementsList]
-  )
 
   return (
     <Box pt={7} px={5} {...props?._box}>
       <StatusBar bg='gray.600' barStyle='light-content' />
       <Box safeAreaTop bg='gray.600' />
-      {showPinnedAnnouncements ? (
-        <VStack space='2' mb='4'>
-          {pinnedData.map((val, index) => (
-            <Box
-              width={'100%'}
-              rounded='4'
-              bg={val.color}
-              px='5'
-              py={val.isDismissable ? '3.5' : '5'}
-              key={index}
-            >
-              <HStack
-                space='4'
-                alignItems='center'
-                justifyContent='space-between'
-              >
-                <HStack space='1' alignItems={'center'}>
-                  <IconByName
-                    _icon={{ size: '20' }}
-                    name='PushpinLineIcon'
-                    isDisabled
-                  />
-                  <BodyMedium>{val.data}</BodyMedium>
-                </HStack>
-
-                {val.isDismissable ? (
-                  <IconByName
-                    _icon={{ size: '20' }}
-                    name='CloseLineIcon'
-                    onPress={(e) => {
-                      const d = [...pinnedAnnouncementsList]
-                      d.splice(index, 1)
-                      setPinnedAnnouncementsList(d)
-                    }}
-                  />
-                ) : null}
-              </HStack>
-            </Box>
-          ))}
-        </VStack>
-      ) : null}
       {searchInput ? (
         <Stack alignItems='center'>
           <InputGroup width='100%'>

diff --git a/packages/common-lib/src/components/layout/Layout.js b/packages/common-lib/src/components/layout/Layout.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Header from './Header'
 import Footer from './Footer'
+import PinnedAnnouncements from './PinnedAnnouncements'
 import { Box, Center, Stack } from 'native-base'
 import AppBar from './AppBar'
 import { useWindowSize } from '../helper'
@@ -14,7 +15,8 @@ export default function Layout({
   _appBar,
   _header,
   _subHeader,
-  _footer
+  _footer,
+  _pinnedAnnouncementsData
 }) {
   const [width, Height] = useWindowSize()
   const [refFoot, serRefFoot] = React.useState({})
@@ -34,6 +36,7 @@ export default function Layout({
           }}
           space={5}
         >
+          <PinnedAnnouncements {...{ _pinnedAnnouncementsData }} />
           {!isDisabledAppBar ? (
             <AppBar color={imageUrl ? 'white' : ''} {..._appBar} />
           ) : (

diff --git a/packages/common-lib/src/components/layout/PinnedAnnouncements.tsx b/packages/common-lib/src/components/layout/PinnedAnnouncements.tsx
@@ -0,0 +1,60 @@
+import React from 'react'
+import { HStack, Text, Box, VStack, Avatar } from 'native-base'
+import IconByName from '../IconByName'
+import { BodyMedium } from './HeaderTags'
+
+export default function PinnedAnnouncements({ _pinnedAnnouncementsData }: any) {
+  const [pinnedAnnouncementsList, setPinnedAnnouncementsList] = React.useState(
+    _pinnedAnnouncementsData
+  )
+  const pinnedData = React.useMemo(
+    () => pinnedAnnouncementsList,
+    [pinnedAnnouncementsList]
+  )
+  console.log(_pinnedAnnouncementsData)
+  return (
+    <Box>
+      <VStack space='2'>
+        {pinnedData?.map((val: any, index: number) => (
+          <HStack
+            bg={val.color}
+            space='4'
+            px='5'
+            py={val.isDismissable ? '3.5' : '5'}
+            key={index}
+            alignItems='center'
+            justifyContent='flex-start'
+            flexWrap='nowrap'
+          >
+            <HStack
+              flexGrow='1'
+              space='1'
+              alignItems={'center'}
+              justifyContent='flex-start'
+              maxW='100%'
+            >
+              <IconByName
+                _icon={{ size: '20' }}
+                name='PushpinLineIcon'
+                isDisabled
+              />
+              <BodyMedium>{val.data}</BodyMedium>
+            </HStack>
+
+            {val.isDismissable ? (
+              <IconByName
+                _icon={{ size: '20' }}
+                name='CloseLineIcon'
+                onPress={(e: any) => {
+                  const d = [...pinnedAnnouncementsList]
+                  d.splice(index, 1)
+                  setPinnedAnnouncementsList(d)
+                }}
+              />
+            ) : null}
+          </HStack>
+        ))}
+      </VStack>
+    </Box>
+  )
+}