diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml new file mode 100644 index 0000000..da93b2d --- /dev/null +++ b/.github/workflows/ci.yaml @@ -0,0 +1,23 @@ +name: Sonar CI pipeline +on: + push: + branches: + - main + - 'release/**' + - develop + - 'feature/**' + pull_request: + types: [opened, synchronize, reopened] +jobs: + sonarcloud: + name: SonarCloud + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + with: + fetch-depth: 0 + - name: SonarCloud Scan + uses: SonarSource/sonarcloud-github-action@master + env: + GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} + SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }} diff --git a/README.md b/README.md index 8d30d60..5ad4fde 100644 --- a/README.md +++ b/README.md @@ -14,3 +14,9 @@ It is dedicated to be deployed as a module of [openimis-fe_js](https://github.co - `home.HomePage.Container`: Use to override the container of the homepage completely (default: display `home.HomePage.Blocks`) - `home.HomePage.Blocks`: Blocks displayed on the homepage. The current `user` is passed to each contribution. An example of block can be found on the [Claim management module](https://github.com/openimis/openimis-fe-claim_js) + +## Configurations Options + +- `HomePageContainer.showHomeMessage`: a boolean configuration flag that determines whether or not a special message will be displayed on the home page. If set to true, the application will fetch and display HTML content based on the URL specified in **HomePageContainer.homeMessageURL**. By default, this is set to false. It means that no additional message will be displayed on the home page. +- `HomePageContainer.homeMessageURL`: a string configuration that specifies the URL from which to fetch the HTML payload for display on the home page. By default, this is set to an empty string (""), meaning no URL is specified. This URL is used only when **HomePageContainer.showHomeMessage** is set to true. +- `HomePageContainer.showHealthFacilityMessage`: boolean to show HF status information. It shows days to the end of the contract of a HF assigned to a current user. Default false. diff --git a/sonar-project.properties b/sonar-project.properties new file mode 100644 index 0000000..9887177 --- /dev/null +++ b/sonar-project.properties @@ -0,0 +1,6 @@ +sonar.projectKey=openimis_openimis-fe-home_js +sonar.organization=openimis-1 +sonar.projectName=openimis-fe-home_js + +sonar.sources=src +sonar.sourceEncoding=UTF-8 diff --git a/src/components/HomePageContainer.js b/src/components/HomePageContainer.js index bb71c8d..24f4101 100644 --- a/src/components/HomePageContainer.js +++ b/src/components/HomePageContainer.js @@ -1,29 +1,135 @@ +import React from "react"; + import { Box, Grid, Typography } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; -import { Contributions, useUserQuery } from "@openimis/fe-core"; -import React from "react"; + +import { + Contributions, + useUserQuery, + ProgressOrError, + useModulesManager, + useTranslations, +} from "@openimis/fe-core"; +import { useSelector } from "react-redux"; + +import { DEFAULT, MODULE_NAME, DAYS_HF_STATUS } from "../constants"; +import { useFetchData } from "../hooks/useFetchData"; +import { getTimeDifferenceInDaysFromToday } from "@openimis/fe-core"; const useStyles = makeStyles((theme) => ({ container: theme.page, + messageTitle: { + textAlign: "center", + color: "red", + fontSize: "16px" + }, + messageDate: { + textAlign: "center", + fontSize: "16px", + }, + healthFacilityLongTimeActive: { + textAlign: "center", + }, + healthFacilityMediumTimeActive: { + textAlign: "center", + color: "gray", + }, + healthFacilityShortTimeActive: { + textAlign: "center", + color: "red", + }, + messageNotice: { + fontSize: "16px" + } })); -const HomePageContainer = (props) => { +const HomePageContainer = () => { + const modulesManager = useModulesManager(); + const userHealthFacility = useSelector( + (state) => state?.loc?.userHealthFacilityFullPath + ); + const { formatMessage, formatMessageWithValues, formatDateFromISO } = + useTranslations(MODULE_NAME, modulesManager); + const showHomeMessage = modulesManager.getConf( + "fe-home", + "HomePageContainer.showHomeMessage", + DEFAULT.SHOW_HOME_MESSAGE + ); + const homeMessageURL = modulesManager.getConf( + "fe-home", + "HomePageContainer.homeMessageURL", + DEFAULT.HOME_MESSAGE_URL + ); + const showHealthFacilityMessage = modulesManager.getConf( + "fe-home", + "HomePageContainer.showHealthFacilityMessage", + DEFAULT.SHOW_HEALTH_FACILITY_MESSAGE + ); + const { user } = useUserQuery(); const classes = useStyles(); + const { + data: messageData, + loading: messageLoading, + error: messageError, + } = showHomeMessage ? useFetchData(homeMessageURL) : {}; if (!user) { return null; } + const dateToCheck = new Date(userHealthFacility?.contractEndDate ?? null); + const timeDelta = getTimeDifferenceInDaysFromToday(dateToCheck); + const getHealthFacilityStatus = (timeDelta) => { + if (timeDelta > DAYS_HF_STATUS.DAYS_LONG_TIME_ACTIVE) { + return classes.healthFacilityLongTimeActive; + } else if (timeDelta > DAYS_HF_STATUS.DAYS_MEDIUM_TIME_ACTIVE) { + return classes.healthFacilityMediumTimeActive; + } else { + return classes.healthFacilityShortTimeActive; + } + }; + return ( - Welcome {user.otherNames} {user.lastName}! + {formatMessageWithValues("HomePageContainer.welcomeMessage", { + otherNames: user.otherNames, + lastName: user.lastName, + })} + {showHealthFacilityMessage && ( + +

+ {userHealthFacility + ? formatMessageWithValues( + "HomePageContainer.healthFacilityStatus", + { + date: `${formatDateFromISO(dateToCheck)}`, + days: `${timeDelta}`, + } + ) + : formatMessage("HomePageContainer.noHealthFacilityAssigned")} +

+ + )} + {showHomeMessage && ( + + +

+ {formatMessage("HomePageContainer.messageTitle")} +

+

{messageData?.date}

+
+ + )} ); diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..9c75b35 --- /dev/null +++ b/src/constants.js @@ -0,0 +1,11 @@ +export const DEFAULT = { + SHOW_HOME_MESSAGE: false, + HOME_MESSAGE_URL: "", + SHOW_HEALTH_FACILITY_MESSAGE: false, +}; + +export const DAYS_HF_STATUS = { + DAYS_LONG_TIME_ACTIVE: 180, + DAYS_MEDIUM_TIME_ACTIVE: 30, +}; +export const MODULE_NAME = "home"; diff --git a/src/hooks/useFetchData.js b/src/hooks/useFetchData.js new file mode 100644 index 0000000..5e0bbf2 --- /dev/null +++ b/src/hooks/useFetchData.js @@ -0,0 +1,26 @@ +import { useState, useEffect } from "react"; + +export const useFetchData = (URL) => { + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + const fetchData = async () => { + try { + setLoading(true); + const response = await fetch(URL); + const result = await response.json(); + setData(result); + } catch (err) { + setError(err); + } finally { + setLoading(false); + } + }; + + fetchData(); + }, [URL]); + + return { data, loading, error }; +}; diff --git a/src/index.js b/src/index.js index c872711..498d518 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,9 @@ import HomePage from "./pages/HomePage"; - import HomePageContainer from "./components/HomePageContainer"; +import messages_en from "./translations/en.json"; const DEFAULT_CONFIG = { + "translations": [{ key: "en", messages: messages_en }], "core.Router": [{ path: "home", component: HomePage }], "home.HomePage.Container": HomePageContainer, "home.HomePage.Blocks": [], diff --git a/src/translations/en.json b/src/translations/en.json new file mode 100644 index 0000000..1655279 --- /dev/null +++ b/src/translations/en.json @@ -0,0 +1,6 @@ +{ + "home.HomePageContainer.welcomeMessage": "Welcome {otherNames} {lastName}!", + "home.HomePageContainer.messageTitle": "Notice", + "home.HomePageContainer.healthFacilityStatus": "Your Hospital Contract is expiring on {date}: (Remaining days: {days})", + "home.HomePageContainer.noHealthFacilityAssigned": "User has no Health Facility assigned and there is no information on when the contract will expire." +} \ No newline at end of file