\r\n {item.category} \r\n \r\n
\r\n {item.category}\r\n \r\n \r\n {selectedItem?.checked ? (\r\n
\r\n handleCheckbox(e, boundry, { fromMapPreferences: true })}\r\n checked={isCheckbox(boundry.boundarytype.id) ? isCheckbox(boundry.boundarytype.id) : false}\r\n disabled={loading ? true : showCheckBox(selectedMapPreferences,boundry)}\r\n />\r\n \r\n
\r\n \r\n {showToolTip(selectedMapPreferences, selectedParamLegendData) ? (\r\n \r\n {modal && loading && \r\n \r\n \r\n \r\n {renderCheckboxes(getBoundariesData)}\r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n}\r\nexport default React.memo(MapPreferences);\r\nMapPreferences.propTypes = {\r\n // eslint-disable-next-line react/no-typos\r\n isToggle: PropTypes.bool,\r\n productModalData: PropTypes.object,\r\n handleToggle: PropTypes.func,\r\n Map_Preferences: PropTypes.object,\r\n handleRenderingList: PropTypes.func,\r\n handleCheckBoxRenderingList: PropTypes.func,\r\n renderingList: PropTypes.object,\r\n handleShow: PropTypes.func,\r\n};\r\n","export default __webpack_public_path__ + \"static/media/weather-forecast.115c26c5.svg\";","export default __webpack_public_path__ + \"static/media/drought-monitor.647a0a2d.svg\";","export default __webpack_public_path__ + \"static/media/reporting.8961bf5f.svg\";","export default __webpack_public_path__ + \"static/media/public-api.9ecd054f.svg\";","export default __webpack_public_path__ + \"static/media/news-feed-latest.e5ff25e0.svg\";","export default __webpack_public_path__ + \"static/media/digital-survay.006a5a3f.svg\";","export default __webpack_public_path__ + \"static/media/user-guide.dc9200ee.svg\";","import React, { useState } from 'react';\r\nimport { Carousel as Slider, CarouselItem, CarouselControl} from 'reactstrap';\r\nimport classnames from 'classnames';\r\nimport DownArrow from '../../assets/Images/down-arrow.png';\r\n\r\nconst Carousel = props => {\r\n const { carouselData } = props;\r\n const [activeIndex, setActiveIndex] = useState(0);\r\n const [animating, setAnimating] = useState(false);\r\n\r\n const next = () => {\r\n if (animating) return;\r\n const nextIndex = activeIndex === carouselData.length - 1 ? 0 : activeIndex + 1;\r\n setActiveIndex(nextIndex);\r\n };\r\n\r\n const previous = () => {\r\n if (animating) return;\r\n const nextIndex = activeIndex === 0 ? carouselData.length - 1 : activeIndex - 1;\r\n setActiveIndex(nextIndex);\r\n };\r\n\r\n const goToIndex = newIndex => {\r\n if (animating) return;\r\n setActiveIndex(newIndex);\r\n };\r\n\r\n return (\r\n <>\r\n {carouselData && carouselData.length && (\r\n <>\r\n \r\n {t('WEATHER_FORECAST.MAP_PREFERENCES.HEADER.TITLE')}
\r\n \r\n {t('WEATHER_FORECAST.MAP_PREFERENCES.HEADER.SUB_TITLE')}\r\n \r\n
\r\n
- \r\n {carouselData.length\r\n ? carouselData.map((index, carouselIndex) => { \r\n return (\r\n
\r\n \r\n 
\r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Carousel;\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABnSURBVHgB7Y3BDYAwCEX/CI7QEdwINnEUR3QE5NBE00OhigcbXvJv8B6QJP9DRBbdpqOBH9LtumIdFt0hF2akyu+s1gM3DzQgZ3jwRB7LPZHX8l4kTN6JxMmNCCOSJsL4ghphJMlcnJoXGQRdUocBAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAMCAYAAABfnvydAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACjSURBVHgBfZBNCsIwEIVnEq+gZyjNpidQjyBi3eo5xJ8I3kOXLjyErQfQVVy7K+QMZkxKhDakfZCQx/t4ZAbAKl1sD+5ARFzkMgMwV/ueDtMxaFUWLUCrezVKJh9AmMUg7i79Ll9dEP+TXRCGnxLz3ZoYnb2VLAS+A6SGxVZDstyvmDEXb4/qdpLYF9YVfWENiHyTEbFnLPSLelR2JNdUhKHTD0J/Tq3qzxWjAAAAAElFTkSuQmCC\"","export default __webpack_public_path__ + \"static/media/bx_bxl-facebook-circle.cbb23f5d.svg\";","export default __webpack_public_path__ + \"static/media/akar-icons_twitter-fill.68456f19.svg\";","export default __webpack_public_path__ + \"static/media/bx_bxl-flickr.b4caf826.svg\";","export default __webpack_public_path__ + \"static/media/bx_bxl-youtube.980ef6c0.svg\";","export default __webpack_public_path__ + \"static/media/ic_twotone-rss-feed.27751a9b.svg\";","export default __webpack_public_path__ + \"static/media/fluent_mail-16-filled.3ae1b5be.svg\";","export default __webpack_public_path__ + \"static/media/bx_bxl-linkedin.86170edd.svg\";","export default __webpack_public_path__ + \"static/media/iwmi_neww.6593b690.svg\";","export default __webpack_public_path__ + \"static/media/cgairClimateResilience.8f1baa36.png\";","export default __webpack_public_path__ + \"static/media/AICCRA_SVG.7548c4b0.svg\";","export default __webpack_public_path__ + \"static/media/publicIWMILogo.6724e8a9.svg\";","export default __webpack_public_path__ + \"static/media/AICCRA.76988249.png\";","export default __webpack_public_path__ + \"static/media/diwasa.3fbf8698.png\";","import React from 'react';\r\nimport { Container, Row, Col } from 'reactstrap';\r\nimport { t } from 'react-multi-lang';\r\nimport Right_Arrow from '../../assets/Images/right-arrow.png';\r\nimport Facebook from '../../assets/Images/icons/bx_bxl-facebook-circle.svg';\r\nimport Twitter from '../../assets/Images/icons/akar-icons_twitter-fill.svg';\r\nimport Flickr from '../../assets/Images/icons/bx_bxl-flickr.svg';\r\nimport Youtube from '../../assets/Images/icons/bx_bxl-youtube.svg';\r\nimport RSSFeed from '../../assets/Images/icons/ic_twotone-rss-feed.svg';\r\nimport Mail from '../../assets/Images/icons/fluent_mail-16-filled.svg';\r\nimport LinkedIn from '../../assets/Images/icons/bx_bxl-linkedin.svg';\r\nimport IWMI_NEW from '../../assets/Images/iwmi_neww.svg';\r\nimport ZAMBIA from '../../assets/Images/ZAMBIA.png';\r\n//import SADMS_NEW from '../../assets/Images/zadms-logo.png';\r\n//import ICAR_NEW from '../../assets/Images/icar_neww.svg';\r\nimport ICAR_NEW from '../../assets/Images/cgairClimateResilience.png';\r\nimport AICCRA from '../../assets/Images/AICCRA_SVG.svg';\r\nimport PUBLIC_CLIMBER_NEW_LOGO from '../../assets/Images/cgairClimateResilience.png';\r\nimport PUBLIC_IWMI_NEW_LOGO from '../../assets/Images/publicIWMILogo.svg';\r\nimport PUBLIC_AICCRA_LOGO from '../../assets/Images/AICCRA.png';\r\n//import PUBLIC_ICAR_NEW_LOGO from '../../assets/Images/publicICARLogo.svg';\r\n//import PUBLIC_ZMA_NEW_LOGO from '../../assets/Images/ZMA.png';\r\nimport myConstClass from '../../Constants';\r\nimport diwasa from '../../assets/Images/diwasa.png';\r\n\r\nconst RenderSocialMediaProfiles = () => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nconst RenderContactus = () => {\r\n return (\r\n {t('FOOTER.FOLLOW')}
\r\n \r\n\r\n \r\n
\r\n );\r\n};\r\n\r\nconst RenderCopyRightText = () => {\r\n return (\r\n <>\r\n {t('FOOTER.TERMS_CONDITIONS')}
\r\n \r\n\r\n © {t('FOOTER.COPY_RIGHT_TEXT')}\r\n
\r\n \r\n );\r\n};\r\n\r\nconst CommonRenderCopyRightText = () => {\r\n return (\r\n <>\r\n\r\n © {t('FOOTER.COPY_RIGHT_TEXT')}\r\n
\r\n \r\n );\r\n};\r\n\r\nconst PublicFooter = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nconst AfterLoginFooter = () => {\r\n return (\r\n \r\n );\r\n};\r\n\r\nconst Footer = ({ publicFooter }) => {\r\n return <>{publicFooter ?\r\n 
\r\n
\r\n \r\n \r\n {t('HOME_PAGE.WEATHER_FORECAST')}
\r\n{t('WEATHER_FORECAST.DESCRIPTION')}
\r\n\r\n 
\r\n
\r\n \r\n \r\n {t('HOME_PAGE.DROUGHT_MANAGEMENT')}
\r\n{t('DROUGHT_MANAGEMENT.DESCRIPTION')}
\r\n\r\n 
\r\n
\r\n \r\n \r\n {t('HOME_PAGE.DECISION_SUPPORT_TOOL')}
\r\n{t('DECISION_SUPPORT_TOOL.DESCRIPTION')}
\r\n\r\n 
\r\n
\r\n \r\n \r\n {t('HOME_PAGE.PUBLIC_API')}
\r\n{t('PUBLIC_API.DESCRIPTION')}
\r\n\r\n 
\r\n
\r\n \r\n \r\n {t('HOME_PAGE.ONLINE_BULLETIN')}
\r\n{t('NEWS_FEED.DESCRIPTION')}
\r\n {/*Coming soon...
*/}\r\n\r\n \r\n
\r\n \r\n \r\n {t('HOME_PAGE.NEWS_FEED')}
\r\n{t('NEWS_FEED.DESCRIPTION')}
\r\n\r\n 
\r\n
\r\n \r\n \r\n {t('HOME_PAGE.USER_GUIDE')}
\r\n{t('USER_GUIDE.DESCRIPTION')}
\r\n\r\n 
\r\n
\r\n \r\n \r\n \r\n );\r\n };\r\n\r\n return (\r\n <>\r\n {t('HOME_PAGE.CONTINGENCY_PLAN')}
\r\n {/*{t('CONTINGENCY_PLAN.DESCRIPTION')}
*/}\r\nComing soon...
\r\n{t('HOME_PAGE.ABOUT_US')}
\r\n\r\n {t('HOME_PAGE.ABOUT_US_INFO')}\r\n \r\n props.history.push('/about-us')}>\r\n {' '}\r\n {t('HOME_PAGE.READ_MORE_WITHOUT')}\r\n \r\n \r\n
\r\n \r\n {renderTools()}\r\n\r\n
\r\n {/* Footer here */}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default HomePage;","export default __webpack_public_path__ + \"static/media/right-img.b59f734c.png\";","export default __webpack_public_path__ + \"static/media/upload-image.0f294313.svg\";","import React from 'react';\r\nimport { Input, Label, FormGroup } from 'reactstrap';\r\nimport Select from 'react-select';\r\nimport moment from 'moment';\r\nimport UploadIcon from '../../assets/Images/upload-image.svg';\r\n\r\nexport const renderImageField = ({\r\n input,\r\n placeholder,\r\n className,\r\n accept,\r\n controlledValue,\r\n readOnly,\r\n autoFocus,\r\n type,\r\n id,\r\n meta: { touched, error, warning },\r\n}) => {\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n
\r\n {t('HOME_PAGE.KEEP_IN_TOUCH')}
\r\n \r\n {t('HOME_PAGE.REGISTER')}\r\n {!getToken() ? (\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n\r\n {touched && ((error && {error}) || (warning && {warning}))}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const renderFileField = ({\r\n input,\r\n placeholder,\r\n className,\r\n controlledValue,\r\n readOnly,\r\n autoFocus,\r\n type,\r\n id,\r\n accept,\r\n meta: { touched, error, warning },\r\n}) => (\r\n <>\r\n \r\n \r\n \r\n \r\n {touched && ((error && {error}) || (warning && {warning}))}\r\n
\r\n \r\n);\r\n\r\nexport const renderTextField = ({\r\n input,\r\n placeholder,\r\n className,\r\n readOnly,\r\n autoFocus,\r\n type,\r\n isDisabled,\r\n required,\r\n min,\r\n max,\r\n label,\r\n meta: { touched, error, warning },\r\n}) => (\r\n <>\r\n {label && }\r\n \r\n {touched && ((error && {error}) || (warning && {warning}))}\r\n
\r\n \r\n);\r\n\r\nexport const renderReactSelectInputField = ({\r\n input,\r\n options,\r\n name,\r\n id,\r\n placeholder,\r\n isClearable,\r\n isDisabled,\r\n className,\r\n isMulti,\r\n isLoading,\r\n onMenuOpen,\r\n onMenuClose,\r\n label,\r\n isOptionDisabled,\r\n meta: { touched, error, warning },\r\n}) => {\r\n return (\r\n <>\r\n {label && }\r\n \r\n {touched && ((error && {error}) || (warning && {warning}))}\r\n
\r\n \r\n );\r\n};\r\nexport const renderReactUserInputField = ({\r\n input,\r\n options,\r\n name,\r\n id,\r\n type,\r\n placeholder,\r\n isClearable,\r\n isDisabled,\r\n className,\r\n isMulti,\r\n isLoading,\r\n onMenuOpen,\r\n onMenuClose,\r\n meta: { touched, error, warning },\r\n}) => {\r\n return (\r\n <>\r\n \r\n {touched && ((error && {error}) || (warning && {warning}))}\r\n
\r\n \r\n );\r\n};\r\nexport const renderSelectDropdownField = ({\r\n input,\r\n placeholder,\r\n className,\r\n controlledValue,\r\n disabled,\r\n type,\r\n meta: { touched, error },\r\n children,\r\n}) => (\r\n <>\r\n \r\n
\r\n \r\n);\r\n\r\nexport const renderDateField = ({\r\n input,\r\n placeholder,\r\n className,\r\n readOnly,\r\n autoFocus,\r\n required,\r\n meta: { touched, error, warning },\r\n}) => (\r\n <>\r\n \r\n
\r\n \r\n \r\n {children}\r\n \r\n
\r\n \r\n {touched && error &&
\r\n {error}
}\r\n\r\n {touched && ((error && {error}) || (warning && {warning}))}\r\n
\r\n \r\n);\r\n\r\nexport const renderFileInput = () => {\r\n return (\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default Apicategories;\r\nApicategories.propTypes = {\r\n handleApiCategories: PropTypes.func,\r\n};\r\n","import React, { useEffect, useRef, useState } from 'react';\r\nimport { Container, Row, Col, Card, FormGroup, Label, Spinner } from 'reactstrap';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { t } from 'react-multi-lang';\r\nimport { Field, reduxForm } from 'redux-form';\r\nimport { toast } from 'react-toastify';\r\nimport SwaggerUI from 'swagger-ui-react';\r\nimport 'swagger-ui-react/swagger-ui.css';\r\nimport Footer from '../landing-page/footer';\r\nimport RightImg from '../../assets/Images/right-img.png';\r\nimport LeftImg from '../../assets/Images/left-img.png';\r\nimport { COUNTRIES_JSON_LIST } from '../../Components/constants/index';\r\nimport {\r\n renderTextField,\r\n renderReactSelectInputField,\r\n} from '../../Components/common/renderInputField';\r\nimport { getParametersRequest } from '../../redux/home/homeActions';\r\nimport { getAccessKeyRequest, getCountryRequest } from '../../redux/actions';\r\nimport { LOCATION, SWAGGER_JSON_FILE_URL_LIST } from '../../Components/constants';\r\nimport { showSuccess, showError } from '../../Components/Notifications';\r\nimport myConstClass from '../../Constants';\r\nimport Apicategories from '../../Components/Apicategories';\r\n\r\n// Redux-form validate function\r\nconst validate = values => {\r\n const errors = {};\r\n const requiredFields = [\r\n 'name',\r\n 'email',\r\n 'organization',\r\n 'access_country_id',\r\n 'country_name',\r\n 'api_ids',\r\n 'purpose',\r\n 'application_url',\r\n ];\r\n\r\n requiredFields.forEach(field => {\r\n if (!values[field]) {\r\n errors[field] = t('PUBLIC_API.FIELD_REQUIRED');\r\n }\r\n });\r\n if (!values.name) {\r\n errors.name = t('PUBLIC_API.NAME_REQUIRED');\r\n }\r\n if (!values.email) {\r\n errors.email = t('PUBLIC_API.EMAIL_REQUIRED');\r\n } else if (!myConstClass.EMAIL_REGEX.test(values.email)) {\r\n errors.email = t('PUBLIC_API.INVALID_EMAIL');\r\n }\r\n if (!values.organization) {\r\n errors.organization = t('PUBLIC_API.ORGANIZATION_REQUIRED');\r\n }\r\n if (!values.access_country_id) {\r\n errors.access_country_id = t('PUBLIC_API.COUNTRY_REQUIRED');\r\n }\r\n if (!values.country_name) {\r\n errors.country_name = t('PUBLIC_API.COUNTRY_REQUIRED');\r\n }\r\n if (!values.api_ids) {\r\n errors.api_ids = t('PUBLIC_API.API_REQUIRED');\r\n }\r\n if (!values.purpose) {\r\n errors.purpose = t('PUBLIC_API.PURPOSE_REQUIRED');\r\n }\r\n if (values.application_url) {\r\n if (!myConstClass.URL_REGEX.test(values.application_url)) {\r\n errors.application_url = t('PUBLIC_API.APPLICATION_URL_INVALID');\r\n }\r\n }\r\n return errors;\r\n};\r\n\r\nconst PublicApi = props => {\r\n toast.configure();\r\n const dispatch = useDispatch();\r\n const { handleSubmit, reset } = props;\r\n const [loading, setLoading] = useState('');\r\n const [country, setCountry] = useState({});\r\n const [accessCountryList, setAccessCountryList] = useState();\r\n const [selectedAccessCountryList, setSelectedAccessCountryList] = useState([]);\r\n const [selectedAPI, setSelectedAPI] = useState([]);\r\n const [parametersList, setParams] = useState([]);\r\n const [activeCategoryUrl, setActiveCategoryUrl] = useState();\r\n\r\n const { Parameters, AccessKey, Location } = useSelector(state => ({\r\n Parameters: state.Home,\r\n AccessKey: state.AccessKey,\r\n Location: state.Location,\r\n }));\r\n\r\n useEffect(() => {\r\n setActiveCategoryUrl(SWAGGER_JSON_FILE_URL_LIST[0].url);\r\n dispatch(getParametersRequest());\r\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\r\n window.scrollTo({ top: 0, behavior: 'instant' });\r\n /*scrolling behavior changed by Ramya.s on 6/9/2022*/\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (Location.countryList) {\r\n if (Location.countryList.result) {\r\n setAccessCountryList(Location.countryList.result);\r\n }\r\n }\r\n }, [Location.countryList]);\r\n\r\n useEffect(() => {\r\n if (Parameters.getParametersData) {\r\n if (Parameters.getParametersData.data) {\r\n const { result } = Parameters.getParametersData.data;\r\n setParams(result);\r\n }\r\n } else if (Parameters.getParametersDataError) {\r\n setParams([]);\r\n } else if (Parameters.getParametersDataNetworkError) {\r\n setParams([]);\r\n }\r\n }, [\r\n Parameters.isGetParametersDataRequesting,\r\n Parameters.getParametersData,\r\n Parameters.getParametersDataError,\r\n Parameters.getParametersDataNetworkError,\r\n ]);\r\n\r\n const isGetAccessKeyFirstRun = useRef(true);\r\n useEffect(() => {\r\n if (isGetAccessKeyFirstRun.current) {\r\n isGetAccessKeyFirstRun.current = false;\r\n return;\r\n }\r\n if (AccessKey.accessKeyRequesting) {\r\n setLoading(true);\r\n }\r\n\r\n if (AccessKey.accessKeyData) {\r\n setLoading(false);\r\n if (AccessKey.accessKeyData.data) {\r\n showSuccess(t('PUBLIC_API.SUCCESSFULLY_REGISTERED'));\r\n reset('publicApiForm');\r\n }\r\n } else if (AccessKey.accessKeyDataError) {\r\n if (AccessKey.accessKeyDataError.data) {\r\n const { response } = AccessKey.accessKeyDataError.data;\r\n let errorMessage = response.data?.errors;\r\n if (typeof errorMessage === 'object' && Object.keys(errorMessage).length) {\r\n let firstValue = Object.values(errorMessage)[0];\r\n showError(firstValue[0]);\r\n }\r\n setLoading(false);\r\n } else {\r\n setLoading(false);\r\n showError(t('PUBLIC_API.ERROR_GENERATE_KEY'));\r\n }\r\n } else if (AccessKey.accessKeyDataNetworkError) {\r\n setLoading(false);\r\n showError(t('PUBLIC_API.ERROR_GENERATE_KEY'));\r\n }\r\n }, [\r\n AccessKey.accessKeyRequesting,\r\n AccessKey.accessKeyData,\r\n AccessKey.accessKeyDataError,\r\n AccessKey.accessKeyDataNetworkError,\r\n AccessKey,\r\n ]);\r\n\r\n const handleAPIChange = selectedOption => {\r\n setSelectedAPI(selectedOption);\r\n };\r\n\r\n const onFormSubmit = props => {\r\n props.country_name = country.id;\r\n props.api_ids = selectedAPI.map(item => item.id);\r\n props.choosed_access_countries = selectedAccessCountryList.map(item => item.id);\r\n dispatch(getAccessKeyRequest(props));\r\n };\r\n\r\n const handleCountryChange = (options, e) => {\r\n const selectedOption = options.find(item => item.name === e.value);\r\n setCountry({ name: e.value, id: selectedOption.name });\r\n };\r\n\r\n const handleAccessCountryChange = selectedOption => {\r\n setSelectedAccessCountryList(selectedOption);\r\n };\r\n const renderAPIParameterOptions = (list, value) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n params.map(param => {\r\n let data = {\r\n value: param.name,\r\n label: `${param.name}`,\r\n id: value === 'country' ? param.name : param.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const handleApiCategories = value => {\r\n SWAGGER_JSON_FILE_URL_LIST.map(i => {\r\n if (i.id === value) {\r\n setActiveCategoryUrl(i.url);\r\n }\r\n });\r\n };\r\n return (\r\n <>\r\n {t('PUBLIC_API.API_DIRECTORIES')}
\r\n \r\n\r\n 
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n handleCountryChange(COUNTRIES_JSON_LIST, e)}\r\n required={true}\r\n isMulti={false}\r\n options={renderAPIParameterOptions(COUNTRIES_JSON_LIST, 'country')}\r\n >\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n 
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default reduxForm({\r\n form: 'publicApiForm',\r\n validate,\r\n enableReinitialize: true,\r\n})(PublicApi);\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABaAAAAD6CAYAAABXjeD+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABEoSURBVHgB7d1NbhxHmsfhiKyS5V1zTtBcGqMGzBuQNxAXFuDd9DkEA8OFMWcRMF54bkDeIAV4AC1LJ+jyzpaKGZ1RVNJJitQHWVGVlfk8gCBSpNVCtxuwf3jxjxgAGKyj07ODP74NB93n89XqsPs4Nc1h/3tTVd34PKT4949+wyodxPTX7/fXt6bD8BkxVQcppIOwYTHEZYrN8pPflMIyf9+dX0pxceP3i2HZ/jl/v/FrTXP9PU1My1mcXf9e+T/7cvbN+vNv/wjL+tezT/9ZAAAAgC8WAwAb9d2PZ4f55y4Wd6E4zqq/NSn8x/qbujjcC8I3InCKh4Gd6ofx2IvcqQ3cbcVe9kN3F7j7cXs1n69/7c2rs0UAAACAiRKgAe7Qj8hdQL6+MP4Qj2MbjNcXwfHDRbFozCd0QbuL2bdDdhXDv9Jl83usqvXXBWwAAADGQIAGRq+bsbgdk9sg+LeUwkE/JJeamYDH+Chetz/fFa67ORHRGgAAgKEQoIG9dDsq53mLNsod5qCcZy3aQne4vkx2lcxE3RWtQ0xvbwfrJ++/Wdi9BgAAoBQBGhiULizH938eVSke9C+VQ2yORGUoJKZF99hjP1ZfNpdv8661WA0AAMBDCNDA1twVl/Oe8noCo/1h/gKGbx2oQ7O4urAO6wvr9v/Diy5U5+1qEyAAAAB0BGhgY/LDfbPLdwfhMhx1cXk9hxHSkbgM03IjVH+4qI5N+7npDwAAgEkRoIEv9qnAbBYD+Fr9SN1+VudHFVO6rF1SAwAAjIcADVzrT2TMqtnf14/6xXToghnYmZgWeebjrivq///f/6kDAAAAgyZAw8TcjsxNE49cMQN761agdkENAAAwLAI0jFSey7jrkllkBqYl1d3ER/dYYlXFhetpAACA7RCgYY/la+b3T94d3txkbk7MZQB83lWYTnX/ejrHaQ8kAgAAbI4ADXugH5pDNfveNTNAWeI0AADAZgjQMCBCM8DwdXG6m/UIKbz2KCIAAMDdBGjYkWcvXh4JzQBj04bpGK+i9IcHEeeree1qGgAAmCoBGgrrPwbYNPEobzQLzQDTctfVtDANAABMgQANG5Rj8+zdu5N81by+aA7xyGOAANznems6hmUVwrk5DwAAYGwEaHiAbqs5hup4fdUcm6P240OxGYBNEKYBAICxEKDhM3JsXs1XbWQO35vQAGCX7grTpjwAAIAhE6ChR2wGYB/ZmAYAAIZKgGbSnr14edSf0cibzQEARiPVOU6nEC5SuqyrKi7MeAAAANskQDMZHggEgE6qQ4wLMx4AAEBpAjSjdGNKI4STmOKJ2AwA9+vPeDRpdeFaGgAA2AQBmlHoXzen0JyY0gCAzYj5Stq2NAAA8EACNHvHdTMA7JoJDwAA4MsI0AxeDs7vq3enrpsBYLi6CQ8PHgIAAH0CNIPTzWmkODsOVRucUzwMAMDesSsNAAAI0Ozcsxcvj2Kojs1pAMD4idIAADAtAjRb948ffjrJ+80phdM8pyE4A8C0idIAADBeAjTFCc4AwNcSpQEAYBwEaDZOcAYAShClAQBg/wjQPJoNZwBgV25H6fTkaf3m1dkiAAAAgyBA89W++/HscH65ei44AwBD1EXpFMJFFcL5fDWv61/PlgEAANg6AZrPOjo9O3hfvTtNcXYcYzgVnAGA/ZPqEOMiB+mQwmtRGgAAtkOA5iM5OP85+/OkivPjFJvTkOJhAAAYnTZKp6qOs9hG6dVre9IAALB5AjRr+eHAJoTj9m+Ik9T+CAAAE2NPGgAANk+AnqhuxzmlcNr+bXBkVgMA4GM5SqeY1rMd9qQBAODrCdAT0e04h2r2vVkNAIDHMN0BAABfSoAeMbMaAADlme4AAID7CdAj0s1qtNH5JKZ4YlYDAGBHUlyEKtV5tiPPd/z2y8/nAQAAJkiA3mN5VmM1Xx2lEJ+b1QAAGLaYY/SHK+mqigvTHQAATIEAvWc8HggAMA4eOAQAYAoE6IFz5QwAMCUeOAQAYFwE6AFy5QwAQNY9cJhCuHAlDQDAPhKgB8CVMwAAX86VNAAA+0OA3pF1dH6y+i9XzgAAPEa3JZ0vpPOetCtpAACGRIDeon/88NPJ+so5NCc5OgcAACgi1TFU501aXaQnT+s3r84WAQAAdkCALihfOb+v3p2mODuOMZy6cgYAYCdSXIQq1d2V9G+//HweAABgCwToDXv24uVRDNVxntZIIZwEAAAYoJhjdIi1K2kAAEoSoB/JA4IAAIxC70o6hebC44YAAGyCAP0AHhAEAGDs8uOGeUs6hXCRo7THDQEAeAgB+gvlBwSbEI7b/8JOTGsAADBNqQ6pquMsnoe0eu1KGgCAzxGg79Gf1mg//acrZwAAuClfSaeYzj1uCADAfQToHtMaAADwOB43BACgb/IB+tmLl0cpVc9NawAAQAEeNwQAmLRJBui855ynNVJsTtt/ID4MAADAVnjcEABgWiYRoPO0xvvq3WmKs+MYw6lpDQAAGJKrxw1TWP1fVcWFK2kAgPEYbYD+7sezw/nl6nneczatAQAAe6Q32+FxQwCA/TaqAJ2nNZoQjtt/Yl0/IhgAAIBR6D9u+PTy6bnZDgCA/bDXATpPa6zmq6O859x++k/TGgAAMBVXsx1xFs9DWr022wEAMEx7F6Cv95xn1fOY4onoDAAAeNwQAGCY9iJA23MGAAC+XqpjqM7zbEd68rR+8+psEQAA2KrBBmh7zgAAwEZ53BAAYOsGE6DtOQMAANvWf9zQlTQAwObtNEDbcwYAAIYl1SHGRb6STqG58LghAMDjbD1A23MGAAD2hccNAQAeZysB2p4zAAAwHqkOqarjLJ6HtHrtShoA4H5FArQ9ZwAAYCpcSQMA3G9jAfp6zznOjmPM8xqiMwAAMFWupAEAskcFaHvOAAAAn5evpFNM5/lCOqTw2pU0ADAVXx2guz3n9i88EZ0BAAAeKtUxVOehirUraQBgrD4boO05AwAAlGdLGgAYozsDtD1nAACAIbAlDQDst+sAbc8ZAABg2FxJAwD7Jv7nDz/9tz1nAACAfZXqEOOie+Dwt19+Pg8AAAORA3QKAAAAjEbMMTrEukmri/Tkaf3m1dkiAADsgAANAAAwcnm6I8W0vpA23QEAbJMADQAAMElXDxxWVd6Ubi48cAgAlCBAAwAAsNaf7qiquBClAYDHEqABAAC4U57uyJfS7b80XpjuAAAeQoAGAADgy6W4CFWqc5DOm9KiNADwKQI0AAAAj5TqEOOii9K//fLzeQAACAI0AAAARXjkEAAQoAEAANiS7pHDULU/0uq1KA0A4ydAAwAAsDOiNACMmwANAADAoIjSADAeAjQAAACD10XpGNPCQ4cAsD8EaAAAAPZUqkOMiyrH6TZKz1fzuv71bBkAgMEQoAEAABgRURoAhkSABgAAYNRiiMscptt/+b1I6bKuqriwKw0A2yFAAwAAMDldlO7vSruWBoDNE6ABAADg2tWERw7SrqUB4PEEaAAAAPgE19IA8HACNAAAADxIqnOcti0NAPcToAEAAGCjzHgAQEeABgAAgMK6GY8Uw7IK4Xwdp2OzFKYBGDsBGgAAAHZEmAZg7ARoAAAAGCRTHgDsPwEaAAAA9spVmI4pLpq0upjF2XK+mtf1r2fLAAADI0ADAADACFzPebRhuqpSfdlcvnU1DcCuCdAAAAAweqm+CtSxjjEtbE0DsC0CNAAAAEzaX5Me4jQAmyZAAwAAAPdwOQ3A4wjQAAAAwNdrg3S+ms6b0+3Hb1O6rD2ICMBtAjQAAABQwM3r6fwookANMD0CNAAAALBVOUyn0Cy6QJ1C+r27oF7N54s3r84WAYBREKABAACAAbq6oO4mPmLTBuuqWuQN6ifvv1m4ogbYDwI0AAAAsHfuuqLuR2oPJQIMgwANAAAAjFI/UrukBtgNARoAAACYtpgWsQ3UKYbl+udb19RCNcDDCdAAAAAAX+IToTp/2QOKAB8ToAEAAAA26Pb0R2yDtVgNTJUADQAAALAj60gdm2V3WR2auMxb1VUM/7psLt/O4mz99cvZN0vBGthHAjQAAADAnugH6/x597ji+mtNs2hiWnbR2nY1MAQCNAAAAMCI3RWtu1mQfGmdLpvf+9Mg3/4RlsI1sCkCNAAAAAAf6cJ1SGF59fHVRMh98dpUCHAXARoAAACAjbsdsPOv9a+v19/TNIv1z7cititsGA8BGgAAAIDhimmx/vlWyF5/6Y6Y3e1gr7/vQ9DOH7vMht0QoAEAAACYli5qrz+M1x+n3sfd445ZNzeSP+4H7izvZncfu9yGjwnQAAAAAFBCL3T3L7ivf6kfvK++/23/0374vv6WD3MlN36f3qV3RwxnKARoAAAAAJiI623uu752O4jfkj7z9f4kyhf9WT7MpjzG7Yt0hmceAAAAAIBJaAPxQUjx4O6vhcNP/sUxfeb3/so/S1WFx4rtjyYwZI//XxkAAAAAAO4gQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEQI0AAAAAABFCNAAAAAAABQhQAMAAAAAUIQADQAAAABAEf8G2O8rfkxKOXIAAAAASUVORK5CYII=\"","const GraphLoader = () => {\r\n return (\r\n <>\r\n {t('PUBLIC_API.SADMS')}
\r\n{t('PUBLIC_API.DESC_ONE')}
\r\n{t('PUBLIC_API.DESC_TWO')}
\r\n{t('PUBLIC_API.DESC_THREE')}
\r\n\r\n
\r\n {t('PUBLIC_API.GENERATE_KEY')}
\r\n {t('PUBLIC_API.MORE_DETAILS')}\r\n\r\n \r\n {t('PUBLIC_API.GENERATE_KEY')}\r\n \r\n {loading &&
\r\n \r\n \r\n
\r\n {t('PUBLIC_API.CLICK_GENERATE_KEY')}
\r\n\r\n \r\n {t('PUBLIC_API.TERMS')}\r\n \r\n\r\n
\r\n {t('PUBLIC_API.API_DESC')}
\r\n\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default GraphLoader;\r\n","var _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgAdvancedSearch(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 19,\n height: 20,\n viewBox: \"0 0 19 20\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M13.1667 3.33325H18.1667M11.5 13.3333L16.5 18.3333L11.5 13.3333ZM7.33333 14.9999C8.09938 14.9999 8.85792 14.849 9.56565 14.5559C10.2734 14.2627 10.9164 13.8331 11.4581 13.2914C11.9998 12.7497 12.4295 12.1066 12.7226 11.3989C13.0158 10.6912 13.1667 9.93263 13.1667 9.16659C13.1667 8.40054 13.0158 7.642 12.7226 6.93427C12.4295 6.22653 11.9998 5.58347 11.4581 5.0418C10.9164 4.50012 10.2734 4.07044 9.56565 3.77729C8.85792 3.48414 8.09938 3.33325 7.33333 3.33325C5.78624 3.33325 4.30251 3.94783 3.20854 5.0418C2.11458 6.13576 1.5 7.61949 1.5 9.16659C1.5 10.7137 2.11458 12.1974 3.20854 13.2914C4.30251 14.3853 5.78624 14.9999 7.33333 14.9999V14.9999ZM15.6667 0.833252V5.83325V0.833252Z\",\n stroke: \"#DC9023\",\n strokeWidth: 2\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgAdvancedSearch);\nexport default __webpack_public_path__ + \"static/media/AdvancedSearch.fe06733a.svg\";\nexport { ForwardRef as ReactComponent };","import React, { useState, useEffect, useRef } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport _, { isNumber } from 'lodash';\r\nimport PropTypes from 'prop-types';\r\nimport { useHistory } from 'react-router-dom';\r\nimport Geocode from 'react-geocode';\r\nimport Autocomplete from 'react-google-autocomplete';\r\nimport Button from 'reactstrap-button-loader';\r\nimport ReactTooltip from 'react-tooltip';\r\nimport {\r\n Card,\r\n CardBody,\r\n Col,\r\n Form,\r\n FormGroup,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n InputGroupText,\r\n Label,\r\n Row,\r\n} from 'reactstrap';\r\nimport { BiCurrentLocation, BiPlus, BiMinus } from 'react-icons/bi';\r\nimport { BsSearch } from 'react-icons/bs';\r\nimport { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/md';\r\nimport { ReactComponent as AdvancedSearch } from '../../assets/Images/AdvancedSearch.svg';\r\nimport moment from 'moment';\r\nimport Select from 'react-select';\r\n\r\nimport {\r\n getCountryRequest,\r\n getStateByCountryRequest,\r\n getDistrictByStateRequest,\r\n getWeatherForecastSources,\r\n getMapPreferenceRequest,\r\n} from '../../redux/actions';\r\nimport TRANSLATIONS from '../../translations/en.json';\r\nimport {\r\n LOCATION,\r\n DATE_FORMAT,\r\n TEMPORAL_AGGREGATION,\r\n ADDRESS_CONSTS,\r\n DATA_SOURCES,\r\n DISPLAY_DATE_FORMAT,\r\n DEFAULT_COUNTRY,\r\n INDIA_COORDINATE,\r\n SOUTH_ASIA_CONST,\r\n weatherForecastIndices,\r\n DISTRICT_ZOOM_LEVEL,\r\n GRAPH,\r\n OPEN_WEATHER_CHART_PARAMS,\r\n} from '../constants';\r\nimport { t } from 'react-multi-lang';\r\nimport {\r\n getUserLocationBasedOnIP,\r\n isOpenWeatherDataSource,\r\n isUserLocationExists,\r\n renderValidCommonFilterDates,\r\n} from './utils';\r\nimport { showError } from '../Notifications';\r\nimport { WEATHER_FORECAST_MODULE } from '../../Components/constants/index';\r\nimport axios from 'axios';\r\nimport myConstClass from '../../Constants';\r\n\r\nimport {\r\n BASE_TIME_ECMWF,\r\n FORECAST_LIST_ECMWF,\r\n SHOW_VALIDTIME_AND_LAYERS,\r\n PARAMETER_SLUGS,\r\n SOIL_MOISTURE_LAYER_ECMWF,\r\n SHOW_DAY_AND_QUANTILE,\r\n} from '../../Components/constants';\r\n\r\nfunction Filter(props) {\r\n const {\r\n initialValues: {\r\n isHideBar,\r\n staticResourceSelectedLocation,\r\n fromStaticResources,\r\n dataSourceId,\r\n years,\r\n dates,\r\n isDefaultSelectedSourceId,\r\n region,\r\n selectedParam,\r\n mapPreferencesData,\r\n },\r\n clearForecastData,\r\n clearDatesHandler,\r\n forecastLeadTimeHandler,\r\n forecastCompareYearMonthHandler,\r\n forecastCompareLeadTimeHandler,\r\n forecastTimeYearHandler,\r\n forecastTimeMonthHandler,\r\n compareForecastTimeYearHandler,\r\n compareForecastTimeMonthHandler,\r\n compareIRIAvailableYearList,\r\n compareIRIForecastTime,\r\n compareIRIAvailableMonthList,\r\n compareIRIAvailableLeadTimeList,\r\n IRIAvailableYearList,\r\n IRIForecastTime,\r\n IRIAvailableMonthList,\r\n IRIAvailableLeadTimeList,\r\n setCompareIRIForecastTime,\r\n setCurrenUserLocation,\r\n\r\n ecmwfProducts,\r\n selectedEcmwfProducts,\r\n setSelectedEcmwfProducts,\r\n staticResourceBaseTimeData,\r\n validTimeOptions,\r\n validLayerOptions,\r\n selectedValidTime,\r\n selectedValidLayer,\r\n daysData,\r\n quantileData,\r\n forecastType,\r\n selectedBasetime,\r\n\r\n setSelectedBaseTime,\r\n setValidTimeOptions,\r\n setSelectedValidTime,\r\n setValidLayerOptions,\r\n setSelectedValidLayer,\r\n setForecastType,\r\n setDaysData,\r\n setQuantileData,\r\n staticResourceData,\r\n onHandleEcmwf,\r\n setSelectedDataSource,\r\n selectedDataSource,\r\n // ecmwfProducts, selectedEcmwfProducts,\r\n } = props;\r\n const dispatch = useDispatch();\r\n const autoCompleteRef = useRef(null);\r\n const history = useHistory();\r\n const [location, setLocation] = useState('');\r\n const [cordinates, setCordinates] = useState({\r\n lat: '',\r\n lng: '',\r\n });\r\n const [isAdvanceSearch, setAdvanceSearch] = useState(false);\r\n const [isClickedOnPlus, setIsClickedOnPlus] = useState(false);\r\n const [initialSelectedDate, setSelectedDate] = useState({\r\n graph: {\r\n startDate: moment().format(DATE_FORMAT),\r\n endDate: moment()\r\n .add(6, 'days')\r\n .format(DATE_FORMAT),\r\n minStartDate: '',\r\n maxStartDate: '',\r\n maxEndDate: '',\r\n },\r\n map: {\r\n startDate: moment().format(DATE_FORMAT),\r\n endDate: moment()\r\n .add(6, 'days')\r\n .format(DATE_FORMAT),\r\n minStartDate: '',\r\n maxStartDate: '',\r\n maxEndDate: '',\r\n },\r\n });\r\n const [updatedSelectedDate, setUpdatedSelectedDate] = useState({\r\n startDate: moment().format(DATE_FORMAT),\r\n endDate: moment()\r\n .add(6, 'days')\r\n .format(DATE_FORMAT),\r\n minStartDate: '',\r\n maxStartDate: '',\r\n maxEndDate: '',\r\n });\r\n const [finalSelectedDate, setFinalSelectedDate] = useState({\r\n startDate: moment().format(DATE_FORMAT),\r\n endDate: moment()\r\n .add(6, 'days')\r\n .format(DATE_FORMAT),\r\n minStartDate: '',\r\n maxStartDate: '',\r\n maxEndDate: '',\r\n });\r\n const [updatedSelectedCompareDate, setUpdatedSelectedCompareDate] = useState({\r\n startDate: moment().format(DATE_FORMAT),\r\n endDate: moment()\r\n .add(6, 'days')\r\n .format(DATE_FORMAT),\r\n minStartDate: '',\r\n maxStartDate: '',\r\n maxEndDate: '',\r\n });\r\n const [selectedLocation, setSelectedLocation] = useState({\r\n country: '',\r\n state: '',\r\n District: '',\r\n });\r\n const [compareLocation, setCompareLocation] = useState({\r\n country: '',\r\n state: '',\r\n District: '',\r\n });\r\n const [country, setCountry] = useState('');\r\n const [compareCountry, setCompareCountry] = useState('');\r\n const [dataSources, setDataSources] = useState({\r\n firstDataSources: [],\r\n secondDataSources: [],\r\n });\r\n const [countryList, setCountryList] = useState();\r\n const [stateList, setStateList] = useState([]);\r\n const [compareStateList, setCompareStateList] = useState([]);\r\n // const [selectedDataSource, setSelectedDataSource] = useState({\r\n // firstDataSource: [],\r\n // secondDataSource: [],\r\n // });\r\n const [temporalAggregation, setTemporalAggregation] = useState(TEMPORAL_AGGREGATION);\r\n const [range] = useState({\r\n min: null,\r\n max: null,\r\n });\r\n const [isCompare, setIsCompare] = useState([\r\n { name: 'map', value: 'Map', selected: true },\r\n { name: 'graph', value: 'Graph', selected: false },\r\n ]);\r\n\r\n const [compareData, setCompareData] = useState('Map');\r\n const [firstDataSourceSelected, setFirstDataSourceSelected] = useState({});\r\n\r\n const [selectedRegion, setSelectedRegion] = useState('');\r\n const [selectedOption, setSelectedOption] = useState({});\r\n const [defaultSelectedOption, setDefaultSelectedOption] = useState({});\r\n const [compareSelectedOption, setCompareSelectedOption] = useState({});\r\n const [defaultCompareSelectedOption, setDefaultCompareSelectedOption] = useState({});\r\n const [defaultRegionName, setDefaultRegionName] = useState();\r\n const [selectedDateRange, setSelectedDateRange] = useState([]);\r\n const [selectedDefaultDateRange, setSelectedDefaultDateRange] = useState({});\r\n const [selectedYearList, setSelectedYearList] = useState([]);\r\n const [selectedDefaultYear, setSelectedDefaultYear] = useState(null);\r\n const [state, setState] = useState();\r\n const [compareState, setCompareState] = useState();\r\n const [districtList, setDistrictList] = useState();\r\n const [compareDistrictList, setCompareDistrictList] = useState();\r\n const [selectedDisctrict, setSelectedDistrict] = useState(null);\r\n const [selectedCompareDistrict, setSelectedCompareDistrict] = useState(null);\r\n const [isOpenWeather, setIsOpenWeather] = useState(false);\r\n const [isDefaultDataSource, setIsDefaultDataSource] = useState('');\r\n const [isUpdateGraph, setIsUpdateGraph] = useState(true);\r\n const [isApplyLayer, setIsApplyLayer] = useState(true);\r\n const [showToolTip, setShowToolTip] = useState(false);\r\n const [showMapPreferenceTooltip, setShowMapPreferenceTooltip] = useState(false);\r\n const [isDataSourceOpen, setIsDataSourceOpen] = useState();\r\n const [isIriNotSelected, setIsIriNotSelected] = useState(true);\r\n const [hasSelectedParamChart, setHasSelectedParamChart] = useState(true);\r\n const [parentCountryObj, setParentCountryObj] = useState({});\r\n const [parentStateObj, setParentStateObj] = useState({});\r\n Geocode.setApiKey(process.env.REACT_APP_LOCATION_API_KEY);\r\n Geocode.setLanguage('en');\r\n Geocode.setLocationType('ROOFTOP');\r\n Geocode.enableDebug();\r\n //NOAA GFS start and end dates\r\n const [noaaMaxEndDate, setNoaaMaxEndDate] = useState(false);\r\n const [finalNoaaEndDate, setFinalNoaaEndDate] = useState('');\r\n const [finalNoaaMaxEndDate, setFinalNoaaMaxEndDate] = useState('');\r\n\r\n //NOAA GFS compare start and end dates\r\n const [noaaCompareMaxEndDate, setNoaaCompareMaxEndDate] = useState(false);\r\n const [finalNoaaCompareEndDate, setFinalNoaaCompareEndDate] = useState('');\r\n const [finalNoaaCompareMaxEndDate, setFinalNoaaCompareMaxEndDate] = useState('');\r\n\r\n const [isChooseCurrentLocationFailed, setChooseCurrentLocationFailed] = useState(false);\r\n\r\n const handleInfo = e => {\r\n e?.stopPropagation();\r\n window.open(\r\n `/user-guide-details?topicId=${WEATHER_FORECAST_MODULE.id}&&sub-topic-name=${selectedDataSource.firstDataSource[0].name}&topic_name=Weather Forecast`,\r\n );\r\n };\r\n //getting all country ,state ,district from store\r\n const { Location, Weather, isEcmwfControlsLoading } = useSelector(state => ({\r\n Location: state.Location,\r\n Weather: state.Weather,\r\n isEcmwfControlsLoading: state?.Weather?.isEcmwfControlsLoading,\r\n }));\r\n\r\n useEffect(() => {\r\n let defaultSelectedAggregation = TEMPORAL_AGGREGATION?.find(item => item.name === 'Mean');\r\n let data = isUserLocationExists();\r\n if (data) {\r\n setCurrenUserLocation(data);\r\n } else {\r\n getUserLocationData();\r\n }\r\n if (!_.isEmpty(defaultSelectedAggregation)) {\r\n setTemporalAggregation(defaultSelectedAggregation);\r\n }\r\n if (autoCompleteRef && !_.isEmpty(autoCompleteRef?.current)) {\r\n autoCompleteRef.current.autocomplete = false;\r\n }\r\n // let currentUserLocation = Cookies.get('ip-based-user-location');\r\n // if(currentUserLocation) setCurrenUserLocation(currentUserLocation)\r\n }, []);\r\n\r\n //for getting country\r\n useEffect(() => {\r\n if (!fromStaticResources) {\r\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\r\n } else {\r\n dispatch(getWeatherForecastSources({ country_id: DEFAULT_COUNTRY.id }));\r\n }\r\n }, [fromStaticResources]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(staticResourceSelectedLocation)) {\r\n setDefaultRegionName(staticResourceSelectedLocation);\r\n } else {\r\n setDefaultRegionName(null);\r\n }\r\n }, [staticResourceSelectedLocation]);\r\n\r\n useEffect(() => {\r\n if (selectedLocation) props.handleSelectedLocation(selectedLocation);\r\n }, [selectedLocation]);\r\n\r\n useEffect(() => {\r\n props.handleCompareView(isCompare);\r\n }, [isCompare]);\r\n\r\n //global function to compare props\r\n function usePrevious(value) {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n }\r\n\r\n const getUserLocationData = async () => {\r\n const response = await axios.post(myConstClass.GEO_LOCATION_USER_LOCATION_URL, {\r\n considerIp: true,\r\n });\r\n if (response?.status === 200) {\r\n const cordinates = response?.data?.location;\r\n getAddress(cordinates?.lat, cordinates?.lng, { fromCurrentLocation: false });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (firstDataSourceSelected?.length) {\r\n let secondDataSourceList = dataSources?.firstDataSources?.filter(\r\n i => i.type === 'non-static' || i.value === 'IRI',\r\n );\r\n let filteredList = secondDataSourceList;\r\n if (compareData === 'Graph') {\r\n filteredList =\r\n firstDataSourceSelected[0].id === DATA_SOURCES.IRI.id\r\n ? secondDataSourceList?.filter(i => i.id === DATA_SOURCES.IRI.id)\r\n : secondDataSourceList?.filter(i => i.id !== DATA_SOURCES.IRI.id);\r\n setSelectedDataSource(prev => ({\r\n ...prev,\r\n secondDataSource: [],\r\n }));\r\n setDataSources(prev => ({\r\n ...prev,\r\n secondDataSources: filteredList,\r\n }));\r\n } else if (compareData === 'Map') {\r\n let secondDataSourceFilteredList = dataSources?.firstDataSources?.filter(\r\n i => i.type === 'non-static' || i.value === 'IRI',\r\n );\r\n setDataSources(prev => ({\r\n ...prev,\r\n secondDataSources: secondDataSourceFilteredList,\r\n }));\r\n setSelectedDataSource(prev => ({\r\n ...prev,\r\n secondDataSource: [],\r\n }));\r\n clearForecastData();\r\n }\r\n }\r\n }, [compareData, firstDataSourceSelected]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(location)) {\r\n setIsClickedOnPlus(false);\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (mapPreferencesData?.length === 2) {\r\n setShowMapPreferenceTooltip(true);\r\n } else setShowMapPreferenceTooltip(false);\r\n }, [mapPreferencesData]);\r\n\r\n useEffect(() => {\r\n if (Location.countryList) {\r\n const { result } = Location.countryList;\r\n setAdvanceSearch(true);\r\n if (result) {\r\n let defaultCountry = result?.find(data => data.id === DEFAULT_COUNTRY.id);\r\n if (defaultCountry) {\r\n defaultCountry.label = defaultCountry.name;\r\n defaultCountry.value = defaultCountry.name;\r\n setSelectedOption(defaultCountry);\r\n setParentCountryObj(defaultCountry);\r\n setDefaultSelectedOption(defaultCountry);\r\n props.handleCompareSearch({ country: defaultCountry.value });\r\n\r\n setCompareSelectedOption(defaultCountry);\r\n setDefaultCompareSelectedOption(defaultCountry);\r\n\r\n setCountry(defaultCountry.name);\r\n setCompareCountry(defaultCountry.name);\r\n setSelectedLocation(prev => {\r\n return {\r\n ...prev,\r\n country: defaultCountry,\r\n };\r\n });\r\n setCompareLocation(prev => {\r\n return {\r\n ...prev,\r\n country: defaultCountry,\r\n };\r\n });\r\n }\r\n }\r\n if (result?.[0]) {\r\n let arr = [];\r\n result.map(i => {\r\n return arr.push({\r\n id: i.id,\r\n name: i.name,\r\n value: i.name,\r\n label: i.name,\r\n region_id: i.region_id,\r\n latitude: i.latitude,\r\n longitude: i.longitude,\r\n zoom_level: i.zoom_level,\r\n });\r\n });\r\n setCountryList(arr);\r\n\r\n if (fromStaticResources) {\r\n props.handleRegionId(result[0].id);\r\n //setDefaultRegionName(result[0].name);\r\n dispatch(getWeatherForecastSources({ country_id: result[0].id }));\r\n }\r\n }\r\n }\r\n }, [Location.countryList]);\r\n\r\n useEffect(() => {\r\n if (Object.keys(selectedOption).length && selectedOption?.latitude) {\r\n const { latitude, longitude, zoom_level } = selectedOption;\r\n return props.handleCordinates(\r\n [latitude ? latitude : INDIA_COORDINATE.lat, longitude ? longitude : INDIA_COORDINATE.long],\r\n zoom_level ? zoom_level : INDIA_COORDINATE.zoom_level,\r\n );\r\n } else {\r\n return props.handleCordinates(\r\n [INDIA_COORDINATE.lat, INDIA_COORDINATE.long],\r\n SOUTH_ASIA_CONST.zoom_level,\r\n );\r\n }\r\n }, [selectedOption]);\r\n\r\n useEffect(() => {\r\n if (Object.keys(compareSelectedOption).length) {\r\n const { latitude, longitude, zoom_level } = compareSelectedOption;\r\n return props.handleCompareCordinates(\r\n [latitude ? latitude : INDIA_COORDINATE.lat, longitude ? longitude : INDIA_COORDINATE.long],\r\n zoom_level ? zoom_level : INDIA_COORDINATE.zoom_level,\r\n );\r\n } else {\r\n return props.handleCompareCordinates(\r\n [INDIA_COORDINATE.lat, INDIA_COORDINATE.long],\r\n SOUTH_ASIA_CONST.zoom_level,\r\n );\r\n }\r\n }, [compareSelectedOption]);\r\n\r\n function updateDate(dataSource) {\r\n if (dataSource?.id === DATA_SOURCES?.OPEN_WEATHER?.id) {\r\n return DATA_SOURCES?.OPEN_WEATHER?.dateRange;\r\n } else if (dataSource?.id === DATA_SOURCES?.GFS_NOAA.id) {\r\n return DATA_SOURCES.GFS_NOAA.dateRange;\r\n } else if (dataSource?.id === DATA_SOURCES?.ERPAS.id) {\r\n return DATA_SOURCES.ERPAS.dateRange;\r\n } else {\r\n return {\r\n startDate: moment().format(DATE_FORMAT),\r\n endDate: moment()\r\n .add(6, 'days')\r\n .format(DATE_FORMAT),\r\n minStartDate: '',\r\n maxStartDate: '',\r\n maxEndDate: '',\r\n };\r\n }\r\n }\r\n\r\n useEffect(() => {\r\n if (selectedDataSource?.firstDataSource?.length) {\r\n let dataSource = selectedDataSource?.firstDataSource[0];\r\n let date = updateDate(dataSource);\r\n setSelectedDate(prev => {\r\n return {\r\n ...prev,\r\n map: date,\r\n graph: date,\r\n };\r\n });\r\n setUpdatedSelectedDate(date);\r\n }\r\n }, [selectedDataSource?.firstDataSource]);\r\n\r\n useEffect(() => {\r\n if (selectedDataSource?.secondDataSource?.length) {\r\n let dataSource = selectedDataSource?.secondDataSource[0];\r\n let date = updateDate(dataSource);\r\n setFinalSelectedDate(date);\r\n setUpdatedSelectedCompareDate(date);\r\n }\r\n }, [selectedDataSource?.secondDataSource]);\r\n\r\n useEffect(() => {\r\n if (selectedLocation.country && selectedLocation.country.name !== SOUTH_ASIA_CONST.name) {\r\n dispatch(\r\n getStateByCountryRequest({\r\n requestObj: {\r\n location_type: LOCATION.State,\r\n parent_id: selectedLocation.country?.id,\r\n },\r\n isCompareLocation: false,\r\n }),\r\n );\r\n dispatch(getWeatherForecastSources({ country_id: selectedLocation.country?.id }));\r\n dispatch(getMapPreferenceRequest({ country_id: selectedLocation.country?.id }));\r\n }\r\n }, [selectedLocation.country]);\r\n\r\n //for getting state by country-id\r\n useEffect(() => {\r\n if (selectedLocation.state && selectedLocation?.state?.id) {\r\n dispatch(\r\n getDistrictByStateRequest({\r\n requestObj: {\r\n location_type: LOCATION.District,\r\n parent_id: selectedLocation.state?.id,\r\n },\r\n isCompareLocation: false,\r\n }),\r\n );\r\n }\r\n }, [selectedLocation.state]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(selectedRegion)) {\r\n if (\r\n selectedLocation.country?.name === SOUTH_ASIA_CONST.name &&\r\n selectedRegion.value === SOUTH_ASIA_CONST.id\r\n ) {\r\n dispatch(getWeatherForecastSources({ region_id: SOUTH_ASIA_CONST.id }));\r\n dispatch(getMapPreferenceRequest({ region_id: SOUTH_ASIA_CONST.id }));\r\n } else if (\r\n selectedRegion.value === '' &&\r\n selectedLocation.country?.name !== SOUTH_ASIA_CONST.name\r\n ) {\r\n dispatch(getWeatherForecastSources({ country_id: selectedLocation.country?.id }));\r\n dispatch(getMapPreferenceRequest({ country_id: selectedLocation.country?.id }));\r\n }\r\n }\r\n }, [selectedRegion, selectedLocation.country]);\r\n\r\n //for getting state by country-id\r\n useEffect(() => {\r\n if (\r\n compareLocation.country &&\r\n compareLocation.country.name !== SOUTH_ASIA_CONST.name &&\r\n compareLocation.country != selectedLocation.country\r\n ) {\r\n dispatch(\r\n getStateByCountryRequest({\r\n requestObj: {\r\n location_type: LOCATION.State,\r\n parent_id: compareLocation.country?.id,\r\n },\r\n isCompareLocation: true,\r\n }),\r\n );\r\n }\r\n }, [compareLocation.country]);\r\n\r\n useEffect(() => {\r\n if (\r\n compareLocation?.state &&\r\n compareLocation?.state?.id &&\r\n compareLocation.state != selectedLocation.state\r\n ) {\r\n dispatch(\r\n getDistrictByStateRequest({\r\n requestObj: {\r\n location_type: LOCATION.District,\r\n parent_id: compareLocation.state?.id,\r\n },\r\n isCompareLocation: true,\r\n }),\r\n );\r\n }\r\n }, [compareLocation.state]);\r\n\r\n useEffect(() => {\r\n let arr = [];\r\n if (Location.stateList) {\r\n let result = '';\r\n let config = Location?.stateList?.config;\r\n if (Location?.stateList?.data) result = Location?.stateList?.data?.result;\r\n if (result) {\r\n result.map(i => {\r\n return arr.push({\r\n id: i.id,\r\n name: i.name,\r\n value: i.name,\r\n label: i.name,\r\n country_id: i.country_id,\r\n latitude: i.latitude,\r\n longitude: i.longitude,\r\n zoom_level: i.zoom_level,\r\n });\r\n });\r\n }\r\n if (!config?.isCompareLocation) {\r\n setStateList(arr);\r\n } else {\r\n setCompareStateList(arr);\r\n }\r\n }\r\n }, [Location.stateList]);\r\n\r\n useEffect(() => {\r\n let arr = [];\r\n if (Location.districtList) {\r\n let result = '';\r\n let config = Location?.districtList?.config;\r\n if (Location?.districtList?.data) result = Location?.districtList?.data?.result;\r\n if (result) {\r\n result.map(i => {\r\n return arr.push({\r\n id: i.id,\r\n name: i.name,\r\n value: i.name,\r\n label: i.name,\r\n state_id: i.state_id,\r\n latitude: i.latitude,\r\n longitude: i.longitude,\r\n zoom_level: i.zoom_level,\r\n });\r\n });\r\n }\r\n if (!config?.isCompareLocation) {\r\n setDistrictList(arr);\r\n } else {\r\n setCompareDistrictList(arr);\r\n }\r\n }\r\n }, [Location.districtList]);\r\n\r\n useEffect(() => {\r\n if (selectedDataSource?.firstDataSource?.length) {\r\n const selectedItem = selectedDataSource?.firstDataSource?.some(\r\n i => i.id === DATA_SOURCES.OPEN_WEATHER.id,\r\n );\r\n setIsOpenWeather(selectedItem);\r\n props.handleProps({\r\n dataSources: selectedDataSource?.firstDataSource,\r\n initialSelectedDate,\r\n temporalAggregation,\r\n range,\r\n });\r\n if (isClickedOnPlus) {\r\n props.handleProps({\r\n compareDataSource: selectedDataSource?.secondDataSource,\r\n initialSelectedDate,\r\n finalSelectedDate: finalSelectedDate,\r\n temporalAggregation,\r\n range,\r\n });\r\n }\r\n }\r\n }, [\r\n initialSelectedDate,\r\n selectedDataSource.firstDataSource,\r\n selectedDataSource.secondDataSource,\r\n isClickedOnPlus,\r\n finalSelectedDate,\r\n temporalAggregation,\r\n range,\r\n ]);\r\n\r\n useEffect(() => {\r\n props.handleIsOpenWeather(isOpenWeather);\r\n }, [isOpenWeather]);\r\n\r\n useEffect(() => {\r\n if (!isClickedOnPlus) {\r\n let compareData = JSON.parse(JSON.stringify(isCompare));\r\n const nextCompare = compareData.map(item => {\r\n if (item.name === 'map') {\r\n return {\r\n ...item,\r\n selected: true,\r\n };\r\n } else {\r\n return {\r\n ...item,\r\n selected: false,\r\n };\r\n }\r\n });\r\n setIsCompare(nextCompare);\r\n setCompareData('Map');\r\n const { secondDataSource } = selectedDataSource;\r\n if (secondDataSource?.length) {\r\n setSelectedDataSource(prev => ({\r\n ...prev,\r\n secondDataSource: [],\r\n }));\r\n setFinalSelectedDate({\r\n startDate: moment().format(DATE_FORMAT),\r\n endDate: moment()\r\n .add(6, 'days')\r\n .format(DATE_FORMAT),\r\n minStartDate: '',\r\n maxStartDate: '',\r\n maxEndDate: '',\r\n });\r\n props.handleProps({\r\n compareDataSource: [],\r\n initialSelectedDate,\r\n finalSelectedDate: '',\r\n });\r\n props.handleCompareParamsData('', selectedDataSource?.firstDataSource[0]);\r\n }\r\n }\r\n props.handleIsCompare(isClickedOnPlus);\r\n setCompareIRIForecastTime({\r\n year: null,\r\n month: null,\r\n lead_time: null,\r\n });\r\n }, [isClickedOnPlus]);\r\n\r\n useEffect(() => {\r\n let isMap = '';\r\n let isGraph = '';\r\n let mapPreferencesCount = mapPreferencesData?.length;\r\n let hasSelectedParamChart = true;\r\n if (!_.isEmpty(selectedParam) && isOpenWeather) {\r\n hasSelectedParamChart = OPEN_WEATHER_CHART_PARAMS.find(\r\n x => x.name === selectedParam.parameter.name,\r\n )\r\n ? true\r\n : false;\r\n }\r\n setHasSelectedParamChart(hasSelectedParamChart);\r\n if (isClickedOnPlus) {\r\n isMap = isCompare.some(item => item.name === 'map' && item.selected);\r\n isGraph = isCompare.some(item => item.name === 'graph' && item.selected);\r\n\r\n if (\r\n (!_.isEmpty(temporalAggregation) && temporalAggregation?.value === 'median') ||\r\n isMap ||\r\n (!selectedDataSource.secondDataSource?.length && !region?.length) ||\r\n _.isEmpty(initialSelectedDate.graph.startDate) ||\r\n _.isEmpty(initialSelectedDate.graph.endDate) ||\r\n _.isEmpty(selectedParam)\r\n ) {\r\n if (selectedParam?.forecast_data_source_id === DATA_SOURCES.IRI.id) {\r\n if (\r\n _.isEmpty(IRIForecastTime?.year) ||\r\n _.isEmpty(IRIForecastTime?.month) ||\r\n _.isEmpty(IRIForecastTime?.lead_time) ||\r\n mapPreferencesCount === 2\r\n ) {\r\n setIsApplyLayer(false);\r\n } else {\r\n setIsApplyLayer(true);\r\n }\r\n } else if (mapPreferencesCount < 2) {\r\n setIsApplyLayer(true);\r\n } else {\r\n setIsApplyLayer(false);\r\n }\r\n setIsUpdateGraph(false);\r\n } else {\r\n if (selectedDataSource?.secondDataSource[0]?.id === DATA_SOURCES.IRI.id) {\r\n if (\r\n _.isEmpty(IRIForecastTime?.year) ||\r\n _.isEmpty(IRIForecastTime?.month) ||\r\n _.isEmpty(IRIForecastTime?.lead_time)\r\n ) {\r\n setIsUpdateGraph(false);\r\n } else {\r\n setIsUpdateGraph(true);\r\n }\r\n } else if (hasSelectedParamChart) {\r\n setIsUpdateGraph(true);\r\n } else {\r\n setIsUpdateGraph(false);\r\n }\r\n }\r\n if (\r\n isGraph ||\r\n !selectedDataSource.secondDataSource?.length ||\r\n _.isEmpty(initialSelectedDate.map.startDate) ||\r\n _.isEmpty(initialSelectedDate.map.endDate) ||\r\n _.isEmpty(selectedParam) ||\r\n region.length ||\r\n mapPreferencesCount === 2\r\n ) {\r\n setIsApplyLayer(false);\r\n } else {\r\n if (selectedDataSource?.secondDataSource[0]?.id === DATA_SOURCES.IRI.id) {\r\n if (\r\n _.isEmpty(compareIRIForecastTime?.year) ||\r\n _.isEmpty(compareIRIForecastTime?.month) ||\r\n _.isEmpty(compareIRIForecastTime?.lead_time) ||\r\n mapPreferencesCount === 2\r\n ) {\r\n setIsApplyLayer(false);\r\n } else {\r\n if (selectedParam?.weather_forecast_source_id === DATA_SOURCES.IRI.id) {\r\n if (\r\n _.isEmpty(IRIForecastTime?.year) ||\r\n _.isEmpty(IRIForecastTime?.month) ||\r\n _.isEmpty(IRIForecastTime?.lead_time) ||\r\n mapPreferencesCount === 2\r\n ) {\r\n setIsApplyLayer(false);\r\n } else {\r\n setIsApplyLayer(true);\r\n }\r\n } else if (mapPreferencesCount < 2) {\r\n setIsApplyLayer(true);\r\n } else {\r\n setIsApplyLayer(false);\r\n }\r\n }\r\n } else if (mapPreferencesCount < 2) {\r\n setIsApplyLayer(true);\r\n } else {\r\n setIsApplyLayer(false);\r\n }\r\n }\r\n } else {\r\n if (region?.length) setShowToolTip(true);\r\n if (region.length || _.isEmpty(selectedParam) || mapPreferencesCount === 2) {\r\n setIsApplyLayer(false);\r\n } else {\r\n if (selectedParam?.forecast_data_source_id === DATA_SOURCES.IRI.id) {\r\n if (\r\n _.isEmpty(IRIForecastTime?.year) ||\r\n _.isEmpty(IRIForecastTime?.month) ||\r\n _.isEmpty(IRIForecastTime?.lead_time) ||\r\n mapPreferencesCount === 2\r\n ) {\r\n setIsApplyLayer(false);\r\n } else {\r\n setIsApplyLayer(true);\r\n }\r\n } else if (mapPreferencesCount < 2) {\r\n setIsApplyLayer(true);\r\n } else {\r\n setIsApplyLayer(false);\r\n }\r\n if (!region?.length) setShowToolTip(false);\r\n }\r\n //let isUpdate = temporalAggregation?.value === 'median' || _.isEmpty(selectedParam) ? true : false;\r\n let isUpdate;\r\n if (\r\n (temporalAggregation?.value === 'median' || _.isEmpty(selectedParam)) &&\r\n selectedDataSource?.firstDataSource[0]?.id !== DATA_SOURCES.OPEN_WEATHER.id\r\n ) {\r\n if (isOpenWeather) {\r\n if (hasSelectedParamChart) {\r\n isUpdate = true;\r\n } else {\r\n isUpdate = false;\r\n }\r\n } else {\r\n isUpdate = true;\r\n }\r\n } else {\r\n if (selectedParam?.forecast_data_source_id === DATA_SOURCES.IRI.id) {\r\n if (\r\n _.isEmpty(IRIForecastTime?.year) ||\r\n _.isEmpty(IRIForecastTime?.month) ||\r\n _.isEmpty(IRIForecastTime?.lead_time)\r\n ) {\r\n isUpdate = true;\r\n } else {\r\n isUpdate = false;\r\n }\r\n } else if (hasSelectedParamChart) {\r\n isUpdate = false;\r\n } else {\r\n isUpdate = true;\r\n }\r\n }\r\n setIsUpdateGraph(!isUpdate);\r\n }\r\n }, [\r\n isCompare,\r\n isClickedOnPlus,\r\n temporalAggregation,\r\n selectedDataSource.secondDataSource,\r\n region,\r\n initialSelectedDate,\r\n finalSelectedDate,\r\n selectedParam,\r\n IRIForecastTime,\r\n compareIRIForecastTime,\r\n mapPreferencesData,\r\n selectedDataSource.firstDataSource,\r\n ]);\r\n //for getting weather forecast data sources\r\n useEffect(() => {\r\n if (country) {\r\n props.handleCountry(country);\r\n }\r\n }, [country]);\r\n\r\n useEffect(() => {\r\n if (years) {\r\n setSelectedYearList(years);\r\n setSelectedDefaultYear(years[0]);\r\n }\r\n }, [years]);\r\n\r\n useEffect(() => {\r\n setSelectedDateRange([]);\r\n setSelectedDefaultDateRange(null);\r\n if (dates && dates?.length) {\r\n let arr = [];\r\n if (selectedDataSource) {\r\n if (selectedDataSource?.firstDataSource[0]?.name) {\r\n dates?.map(item => {\r\n arr.push({\r\n value: item.group_date\r\n ? selectedDataSource?.firstDataSource[0]?.name === 'ERPAS (Static)'\r\n ? moment(item.group_date).format(DISPLAY_DATE_FORMAT)\r\n : item.group_date\r\n : '',\r\n label: item.group_date\r\n ? selectedDataSource?.firstDataSource[0]?.name === 'ERPAS (Static)'\r\n ? moment(item.group_date).format(DISPLAY_DATE_FORMAT)\r\n : item.group_date\r\n : '',\r\n });\r\n });\r\n }\r\n }\r\n setSelectedDefaultDateRange(arr[0]);\r\n setSelectedDateRange(arr);\r\n props.handleSelectedDate(arr[0]?.label);\r\n }\r\n }, [dates, selectedDataSource.firstDataSource]);\r\n\r\n useEffect(() => {\r\n props.handleDefaultDataSource(isDefaultDataSource);\r\n }, [isDefaultDataSource]);\r\n\r\n useEffect(() => {\r\n if (Weather.weatherForecastSourcesData) {\r\n if (Weather.weatherForecastSourcesData.data) {\r\n const { result } = Weather.weatherForecastSourcesData.data;\r\n let options = [];\r\n if (result) {\r\n result?.map(item => {\r\n item?.data?.map(data_source => {\r\n const {\r\n forecast_data_source: {\r\n id,\r\n name,\r\n type,\r\n master_server,\r\n api_url,\r\n forecast_data_source_with_parameter: parameter,\r\n },\r\n } = data_source;\r\n return options.push({\r\n id,\r\n name,\r\n value: name,\r\n label: name,\r\n type,\r\n master_server,\r\n api_url,\r\n parameterData: parameter,\r\n category: item.category,\r\n });\r\n });\r\n });\r\n\r\n let secondDataSourceList = options?.filter(i => i.type === 'non-static');\r\n options.map(i => {\r\n if (i?.id === DATA_SOURCES.IRI.id) {\r\n secondDataSourceList.push(i);\r\n }\r\n });\r\n let optionsCopy = options;\r\n options = changeorder(optionsCopy);\r\n setDataSources(prev => ({\r\n ...prev,\r\n firstDataSources: options,\r\n secondDataSources: secondDataSourceList,\r\n }));\r\n } else {\r\n setDataSources(prev => ({\r\n ...prev,\r\n firstDataSources: [],\r\n secondDataSources: [],\r\n }));\r\n }\r\n }\r\n }\r\n }, [Weather.weatherForecastSourcesData]);\r\n useEffect(() => {\r\n if (dataSources?.firstDataSources?.length) {\r\n let selectedDataSourceParamList = dataSources?.firstDataSources?.filter(\r\n i => i.id === dataSourceId,\r\n );\r\n if (selectedDataSourceParamList[0]) {\r\n setSelectedDataSource(prev => ({\r\n ...prev,\r\n firstDataSource: selectedDataSourceParamList,\r\n }));\r\n setFirstDataSourceSelected(selectedDataSourceParamList);\r\n if (selectedDataSourceParamList[0].id !== DATA_SOURCES.OPEN_WEATHER.id) {\r\n if (isDefaultDataSource) setIsDefaultDataSource(false);\r\n }\r\n props.handleParamData({ values: selectedDataSourceParamList[0], fromCompare: false });\r\n }\r\n }\r\n }, [dataSources.firstDataSources, dataSourceId, isDefaultSelectedSourceId]);\r\n useEffect(() => {\r\n if (!isDefaultSelectedSourceId) {\r\n if (dataSources?.firstDataSources?.length) {\r\n const filterdefaultSource = dataSources?.firstDataSources?.filter(\r\n data => data.id === DATA_SOURCES.OPEN_WEATHER.id,\r\n );\r\n if (!selectedDataSource?.firstDataSource?.length && filterdefaultSource.length) {\r\n filterdefaultSource[0].parameterData.forEach(value => {\r\n value.type = filterdefaultSource[0].type;\r\n value.dataSource = filterdefaultSource[0].name;\r\n });\r\n props.handleParamData({ values: filterdefaultSource[0], fromCompare: false });\r\n setSelectedDataSource(prev => ({\r\n ...prev,\r\n firstDataSource: filterdefaultSource,\r\n }));\r\n setFirstDataSourceSelected(filterdefaultSource);\r\n if (!isDefaultDataSource) {\r\n setIsDefaultDataSource(true);\r\n }\r\n history.push(`/weather-forecast?dataSourceId=${filterdefaultSource[0].id}`);\r\n }\r\n }\r\n }\r\n }, [dataSources.firstDataSources]);\r\n\r\n useEffect(() => {\r\n if (region?.length) {\r\n //setIsClickedOnPlus(false);\r\n setIsUpdateGraph(true);\r\n }\r\n }, [region]);\r\n\r\n const setCompareToggle = () => {\r\n if (!region.length && _.isEmpty(location)) {\r\n setIsClickedOnPlus(!isClickedOnPlus);\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (isCompare.some(item => item.name === 'graph' && item.selected)) {\r\n if (selectedDataSource.secondDataSource?.length) {\r\n let firstSource = selectedDataSource.firstDataSource[0];\r\n let secondSource = selectedDataSource.secondDataSource[0];\r\n let firstDataSource = '';\r\n let secondDataSource = '';\r\n for (const [key, value] of Object.entries(DATA_SOURCES)) {\r\n if (value.id === firstSource.id) {\r\n firstDataSource = value;\r\n }\r\n if (value.id === secondSource.id) {\r\n secondDataSource = value;\r\n }\r\n }\r\n if (firstSource?.id === secondSource?.id) {\r\n return;\r\n } else {\r\n /*\r\n Changed By: sai krishna thalla\r\n Reason: on selectin erpas and in compare selecting open weather and changing map to graph the dates of erpas are changing.\r\n Date: sep-5-2022\r\n */\r\n if (\r\n firstSource?.id !== DATA_SOURCES.IRI.id &&\r\n secondSource?.id !== DATA_SOURCES.IRI.id &&\r\n secondDataSource?.id !== DATA_SOURCES.OPEN_WEATHER.id &&\r\n secondDataSource?.id !== DATA_SOURCES.GFS_NOAA.id &&\r\n secondDataSource?.id !== DATA_SOURCES.ERPAS.id\r\n ) {\r\n let date = renderValidCommonFilterDates(\r\n firstDataSource,\r\n secondDataSource,\r\n updatedSelectedDate,\r\n firstSource,\r\n );\r\n if (!_.isEmpty(date)) {\r\n setSelectedDate(prev => {\r\n return {\r\n ...prev,\r\n graph: date,\r\n };\r\n });\r\n }\r\n }\r\n }\r\n }\r\n }\r\n }, [\r\n isCompare,\r\n selectedDataSource.secondDataSource,\r\n selectedDataSource.firstDataSource,\r\n updatedSelectedDate,\r\n ]);\r\n\r\n useEffect(() => {\r\n if (\r\n selectedDataSource?.firstDataSource[0]?.id === DATA_SOURCES.IRI.id &&\r\n selectedDataSource?.secondDataSource[0]?.id === DATA_SOURCES.IRI.id\r\n ) {\r\n if (\r\n _.isEmpty(IRIForecastTime?.year) ||\r\n _.isEmpty(IRIForecastTime?.month) ||\r\n _.isEmpty(IRIForecastTime?.lead_time) ||\r\n _.isEmpty(compareIRIForecastTime?.year) ||\r\n _.isEmpty(compareIRIForecastTime?.month) ||\r\n _.isEmpty(compareIRIForecastTime?.lead_time)\r\n ) {\r\n setIsApplyLayer(false);\r\n } else {\r\n setIsApplyLayer(true);\r\n }\r\n } else if (\r\n selectedDataSource?.firstDataSource[0]?.id === DATA_SOURCES.IRI.id &&\r\n selectedDataSource?.secondDataSource[0]?.id\r\n ) {\r\n if (\r\n _.isEmpty(IRIForecastTime?.year) ||\r\n _.isEmpty(IRIForecastTime?.month) ||\r\n _.isEmpty(IRIForecastTime?.lead_time)\r\n ) {\r\n setIsApplyLayer(false);\r\n } else {\r\n setIsApplyLayer(true);\r\n }\r\n } else if (\r\n selectedDataSource?.secondDataSource[0]?.id === DATA_SOURCES.IRI.id &&\r\n selectedDataSource?.firstDataSource[0]?.id\r\n ) {\r\n if (\r\n _.isEmpty(compareIRIForecastTime?.year) ||\r\n _.isEmpty(compareIRIForecastTime?.month) ||\r\n _.isEmpty(compareIRIForecastTime?.lead_time)\r\n ) {\r\n setIsApplyLayer(false);\r\n } else {\r\n setIsApplyLayer(true);\r\n }\r\n }\r\n }, [IRIForecastTime, compareIRIForecastTime]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(region)) {\r\n if (selectedDataSource?.firstDataSource[0]?.id === DATA_SOURCES.IRI.id) {\r\n if (\r\n _.isEmpty(IRIForecastTime?.year) ||\r\n _.isEmpty(IRIForecastTime?.month) ||\r\n _.isEmpty(IRIForecastTime?.lead_time)\r\n ) {\r\n setIsUpdateGraph(false);\r\n } else {\r\n setIsUpdateGraph(true);\r\n }\r\n }\r\n }\r\n }, [region, IRIForecastTime]);\r\n\r\n /**\r\n * location added for zambia only\r\n * for other countries an error msg is added\r\n */\r\n useEffect(() => {\r\n if (!_.isEmpty(location)) {\r\n const currentLoc = location.toLocaleLowerCase();\r\n if (location.length > 9 && currentLoc.indexOf('zambia') == -1) {\r\n setChooseCurrentLocationFailed(true);\r\n showError('Please select location inside zambia only.');\r\n setLocation('');\r\n }\r\n setAdvanceSearch(false);\r\n }\r\n }, [location]);\r\n\r\n useEffect(() => {\r\n if (isAdvanceSearch) {\r\n if (!_.isEmpty(location)) {\r\n if (autoCompleteRef && !_.isEmpty(autoCompleteRef?.current)) {\r\n autoCompleteRef.current.value = '';\r\n }\r\n //setSelectedOption(parentCountryObj);\r\n //handleOptions(countryList, parentCountryObj, 'country');\r\n props.handleCordinates(\r\n [\r\n selectedOption?.latitude ? selectedOption.latitude : INDIA_COORDINATE.lat,\r\n selectedOption?.longitude ? selectedOption.longitude : INDIA_COORDINATE.long,\r\n ],\r\n selectedOption?.zoom_level ? selectedOption.zoom_level : INDIA_COORDINATE.zoom_level,\r\n );\r\n\r\n setLocation('');\r\n props.handleCountry(country);\r\n props.handleAdvancedSearch({\r\n state: state?.value || '',\r\n district: selectedDisctrict?.value || '',\r\n });\r\n }\r\n setChooseCurrentLocationFailed(false);\r\n }\r\n }, [isAdvanceSearch]);\r\n\r\n useEffect(() => {\r\n if (isAdvanceSearch && _.isEmpty(location)) {\r\n if (!_.isEmpty(selectedOption)) {\r\n const { latitude, longitude, zoom_level } = selectedOption;\r\n return props.handleCordinates(\r\n [\r\n latitude ? latitude : INDIA_COORDINATE.lat,\r\n longitude ? longitude : INDIA_COORDINATE.long,\r\n ],\r\n zoom_level ? zoom_level : INDIA_COORDINATE.zoom_level,\r\n );\r\n }\r\n }\r\n }, [isAdvanceSearch, location]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(selectedRegion) && country === SOUTH_ASIA_CONST.name) {\r\n props.handleSelectedRegion(selectedRegion?.value);\r\n } else {\r\n props.handleSelectedRegion('');\r\n }\r\n }, [selectedRegion, location, country]);\r\n\r\n const handleDateSelectionChange = selectedItem => {\r\n setSelectedDefaultDateRange(selectedItem);\r\n props.handleSelectedDate(selectedItem.label);\r\n };\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(selectedDefaultYear)) {\r\n props.handleSelectedYear(selectedDefaultYear.label);\r\n } else {\r\n props.handleSelectedYear(null);\r\n }\r\n }, [selectedDefaultYear]);\r\n\r\n const changeorder = dynamicIndices => {\r\n let indices = [];\r\n for (let i = 0; i < weatherForecastIndices.length; i++) {\r\n let a = weatherForecastIndices[i];\r\n for (let j = 0; j < dynamicIndices.length; j++) {\r\n if (a == dynamicIndices[j].name) {\r\n indices.push(dynamicIndices[j]);\r\n }\r\n }\r\n }\r\n return indices;\r\n };\r\n\r\n const handleYearSelectionChange = selectedItem => {\r\n setSelectedDefaultYear(selectedItem);\r\n };\r\n\r\n const handleSearch = places => {\r\n if (!_.isEmpty(places)) {\r\n const { formatted_address, geometry, address_components } = places;\r\n const lat = geometry?.location?.lat();\r\n const lng = geometry?.location?.lng();\r\n address_components?.map(item => {\r\n const { types, long_name } = item;\r\n if (types[0] === ADDRESS_CONSTS.COUNTRY) {\r\n props.handleAdvancedSearch({ country: long_name });\r\n } else if (types[0] === ADDRESS_CONSTS.STATE) {\r\n props.handleAdvancedSearch({ state: long_name });\r\n } else if (types[0] === ADDRESS_CONSTS.DISTRICT) {\r\n props.handleAdvancedSearch({ district: long_name });\r\n }\r\n });\r\n if (isNumber(lat) && isNumber(lng)) {\r\n setCordinates({ lat, lng });\r\n }\r\n setLocation(formatted_address);\r\n } else {\r\n setLocation('');\r\n }\r\n };\r\n\r\n const handleFilter = (loc, cordinates) => {\r\n if (loc) {\r\n props.handleCordinates([cordinates?.lat, cordinates?.lng], DISTRICT_ZOOM_LEVEL);\r\n }\r\n };\r\n\r\n //map marker on the basis of selected country\r\n //get current location\r\n const getCurrentLocation = () => {\r\n if ('geolocation' in navigator) {\r\n let latitude = '';\r\n let longitude = '';\r\n /* geolocation is available */\r\n navigator.geolocation.getCurrentPosition(position => {\r\n latitude = position.coords.latitude;\r\n longitude = position.coords.longitude;\r\n getAddress(latitude, longitude, { fromCurrentLocation: true });\r\n if (latitude && longitude)\r\n props.handleCordinates([latitude, longitude], DISTRICT_ZOOM_LEVEL);\r\n });\r\n } else {\r\n /* geolocation IS NOT available */\r\n }\r\n };\r\n\r\n const getAddress = (lat, lng, { fromCurrentLocation }) => {\r\n if (isNumber(lat) && isNumber(lng) && fromCurrentLocation) {\r\n setCordinates({ lat, lng });\r\n }\r\n Geocode.fromLatLng(lat, lng).then(\r\n response => {\r\n let country, state, district;\r\n const { address_components: components } = response.results[0];\r\n for (let i = 0; i < components.length; i++) {\r\n for (let j = 0; j < components[i].types.length; j++) {\r\n if (components[i].types[j] === ADDRESS_CONSTS.COUNTRY) {\r\n country = components[i].long_name;\r\n if (fromCurrentLocation) props.handleCountry(country);\r\n else {\r\n setCurrenUserLocation(country);\r\n getUserLocationBasedOnIP(country);\r\n }\r\n }\r\n if (components[i].types[j] === ADDRESS_CONSTS.STATE) {\r\n state = components[i].long_name;\r\n if (fromCurrentLocation) props.handleAdvancedSearch({ state: state });\r\n }\r\n if (components[i].types[j] === ADDRESS_CONSTS.DISTRICT) {\r\n district = components[i].long_name;\r\n if (fromCurrentLocation) props.handleAdvancedSearch({ district: district });\r\n }\r\n }\r\n }\r\n if (fromCurrentLocation) {\r\n setLocation(`${district}, ${state}, ${country}`);\r\n props.handleAdvancedSearch({ state: state });\r\n props.handleAdvancedSearch({ district: district });\r\n }\r\n },\r\n error => {\r\n console.error(error);\r\n },\r\n );\r\n };\r\n\r\n const handleOnChange = selectedOptions => {\r\n setNoaaMaxEndDate(false);\r\n clearForecastData();\r\n const { category, id, label, name, parameterData, type, value, master_server, api_url,} = Array.isArray(selectedOptions)\r\n ? selectedOptions[0]\r\n : selectedOptions;\r\n let selectedDataArray = [];\r\n const selectedObj = {\r\n category,\r\n id,\r\n label,\r\n name,\r\n parameterData,\r\n type,\r\n value,\r\n master_server,\r\n api_url,\r\n };\r\n selectedDataArray.push(selectedObj);\r\n if (id) {\r\n history.push(`/weather-forecast?dataSourceId=${id}`);\r\n }\r\n\r\n if (isDefaultDataSource) {\r\n setIsDefaultDataSource(false);\r\n }\r\n\r\n let isNonStaticDataSource = selectedObj.type === 'non-static';\r\n if (isNonStaticDataSource) {\r\n let secondDataSourceList = dataSources?.firstDataSources?.filter(\r\n i => i.type === 'non-static',\r\n );\r\n dataSources?.firstDataSources.map(i => {\r\n if (i?.id === DATA_SOURCES.IRI.id) {\r\n secondDataSourceList.push(i);\r\n }\r\n });\r\n setDataSources(prev => ({\r\n ...prev,\r\n secondDataSources: secondDataSourceList,\r\n }));\r\n } else {\r\n //let secondDataSourceList = dataSources?.firstDataSources;\r\n let isNonStaticDataSource = selectedObj.type === 'non-static';\r\n if (isNonStaticDataSource) {\r\n let secondDataSourceList = dataSources?.firstDataSources?.filter(\r\n i => i.type === 'non-static',\r\n );\r\n dataSources?.firstDataSources.map(i => {\r\n if (i?.id === DATA_SOURCES.IRI.id) {\r\n secondDataSourceList.push(i);\r\n }\r\n });\r\n\r\n setDataSources(prev => ({\r\n ...prev,\r\n secondDataSources: secondDataSourceList,\r\n }));\r\n }\r\n }\r\n setSelectedDataSource(prev => ({\r\n ...prev,\r\n firstDataSource: selectedDataArray,\r\n }));\r\n setFirstDataSourceSelected(selectedDataArray);\r\n props.handleParamData({ values: selectedDataArray[0], fromCompare: false });\r\n props.handleProps({\r\n dataSources: selectedDataArray,\r\n initialSelectedDate,\r\n });\r\n\r\n setSelectedDefaultYear(null);\r\n clearDatesHandler();\r\n setCompareIRIForecastTime({\r\n year: null,\r\n month: null,\r\n lead_time: null,\r\n });\r\n\r\n if (selectedOptions.name === DATA_SOURCES.IRI.name) {\r\n setIsIriNotSelected(false);\r\n let defaultSelectedAggregation = TEMPORAL_AGGREGATION?.find(item => item.name === 'Mean');\r\n if (!_.isEmpty(defaultSelectedAggregation)) {\r\n setTemporalAggregation(defaultSelectedAggregation);\r\n }\r\n }\r\n };\r\n\r\n // const handleFinalForecastYearMonth = type => {\r\n // return moment(selectedForecastCompareYearMonth?.map[type]).format('YYYY-MM');\r\n // };\r\n\r\n const handleCompareDataSourceChange = selectedOptions => {\r\n setNoaaCompareMaxEndDate(false);\r\n const { category, id, label, name, parameterData, type, value, master_server,\r\n api_url, } = Array.isArray(selectedOptions)\r\n ? selectedOptions[0]\r\n : selectedOptions;\r\n let selectedDataArray = [];\r\n const selectedObj = {\r\n category,\r\n id,\r\n label,\r\n name,\r\n parameterData,\r\n type,\r\n value,\r\n master_server,\r\n api_url,\r\n };\r\n selectedDataArray.push(selectedObj);\r\n setSelectedDataSource(prev => ({\r\n ...prev,\r\n secondDataSource: selectedDataArray,\r\n }));\r\n props.handleProps({\r\n compareDataSource: selectedDataArray,\r\n finalSelectedDate,\r\n });\r\n props.handleCompareParamsData(selectedDataArray[0], selectedDataSource?.firstDataSource[0]);\r\n setCompareIRIForecastTime({\r\n year: null,\r\n month: null,\r\n lead_time: null,\r\n });\r\n };\r\n\r\n const onSubmitHandler = e => {\r\n e.preventDefault();\r\n };\r\n\r\n const handleForecastTimeYear = e => {\r\n forecastTimeYearHandler(e);\r\n setIsIriNotSelected(false);\r\n };\r\n\r\n const handleForecastTimeMonth = e => {\r\n forecastTimeMonthHandler(e);\r\n setIsIriNotSelected(false);\r\n };\r\n\r\n const handleCompareForecastTimeYear = e => {\r\n compareForecastTimeYearHandler(e);\r\n };\r\n\r\n const handleCompareForecastTimeMonth = e => {\r\n compareForecastTimeMonthHandler(e);\r\n };\r\n\r\n const handleForecastLeadTimeChange = e => {\r\n // formData.forecast_lead_time = e;\r\n //setFormData({ ...formData });\r\n forecastLeadTimeHandler(e);\r\n setIsIriNotSelected(true);\r\n };\r\n\r\n const handleCompareForecastLeadTimeChange = e => {\r\n forecastCompareLeadTimeHandler(e);\r\n };\r\n\r\n //handle apply layers onclick\r\n const handleApplyLayers = () => {\r\n props.showCharts(false);\r\n props.handleApplyLayers(true);\r\n };\r\n\r\n //display chart\r\n const displayChart = () => {\r\n props.handleTimeSeries();\r\n props.showCharts(true);\r\n };\r\n\r\n const handleTemporalAggregation = selectedOption => {\r\n setTemporalAggregation(selectedOption);\r\n };\r\n const handleCompareLocationRender = () => {\r\n let isGraphCompare = isCompare.find(item => item.name === 'graph' && item.selected);\r\n if (isGraphCompare) {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n Select Region\r\n
\r\n \r\n );\r\n }\r\n };\r\n\r\n const renderAPIParameterOptions = (list, action) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n let default_option;\r\n if (action !== 'country') {\r\n default_option = { value: '', label: 'Select', id: 'select' };\r\n }\r\n if (\r\n action !== 'forecast_year_list' &&\r\n action !== 'forecast_month_list' &&\r\n action !== 'forecast_lead_time_list' &&\r\n action !== 'compare_forecast_year_list' &&\r\n action !== 'compare_forecast_month_list' &&\r\n action !== 'compare_forecast_lead_time_list'\r\n ) {\r\n options.push(default_option);\r\n }\r\n params.map(param => {\r\n options.push(param);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const renderIRIParameterOptions = (list, action) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n // let default_option = action === \"country\" ? { name: 'South Asia', label: 'South Asia', value: SOUTH_ASIA_CONST.id, id: SOUTH_ASIA_CONST.id } : { value: '', label: 'select', id: 'select' };\r\n // if(action !== \"forecast_year_list\" && action !== \"forecast_month_list\" && action !== \"forecast_lead_time_list\" && action !== \"compare_forecast_year_list\" && action !== \"compare_forecast_month_list\" && action !== \"compare_forecast_lead_time_list\"){\r\n // options.push(default_option);\r\n // }\r\n params.map(param => {\r\n if (!_.isEmpty(param)) {\r\n let data = {\r\n value: param?.name,\r\n label: `${param?.name}`,\r\n id: param?.id,\r\n };\r\n options.push(data);\r\n }\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const handleAdvanceSearchRender = () => {\r\n if (fromStaticResources) return <>;\r\n return (\r\n \r\n
\r\n {compareCountry && compareLocation?.country?.name !== SOUTH_ASIA_CONST.name && (\r\n \r\n
\r\n )}\r\n {compareState && (compareDistrictList?.length || districtList.length) ? (\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n
\r\n );\r\n };\r\n\r\n const handleOptions = (options, newValue, action) => {\r\n if (options && options.length) {\r\n let selectedOption = options.find(item => item.name === newValue?.value);\r\n if (selectedOption || action.name === 'country') {\r\n if (action.name === 'country') {\r\n if (newValue.name === SOUTH_ASIA_CONST.name) {\r\n setDefaultSelectedOption(newValue);\r\n setSelectedOption(newValue);\r\n setSelectedLocation(prev => {\r\n return {\r\n ...prev,\r\n [action.name]: newValue || '',\r\n };\r\n });\r\n } else {\r\n setDefaultSelectedOption(selectedOption);\r\n setSelectedOption(selectedOption);\r\n }\r\n } else {\r\n setSelectedOption(selectedOption);\r\n }\r\n } else {\r\n if (action.name === 'country') {\r\n setDefaultSelectedOption('');\r\n }\r\n setSelectedOption('');\r\n }\r\n if (\r\n (newValue?.name !== SOUTH_ASIA_CONST.name && !_.isEmpty(selectedOption)) ||\r\n newValue?.id === 'select'\r\n )\r\n setSelectedLocation(prev => {\r\n return {\r\n ...prev,\r\n country: action.name === 'country' ? selectedOption : prev.country,\r\n state:\r\n action.name === 'country'\r\n ? ''\r\n : action.name === 'state'\r\n ? selectedOption\r\n : prev.state,\r\n district: action.name === 'country' || action.name === 'state' ? '' : selectedOption,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleCompareOptions = (options, newValue, action) => {\r\n if (options && options.length) {\r\n if (newValue.value) {\r\n let selectedOption = options.find(item => item.name === newValue.value);\r\n if (!_.isEmpty(selectedOption)) {\r\n if (action.name === 'country') {\r\n setDefaultCompareSelectedOption(selectedOption);\r\n }\r\n setCompareSelectedOption(selectedOption);\r\n setCompareLocation(prev => {\r\n return {\r\n ...prev,\r\n [action.name]: selectedOption,\r\n };\r\n });\r\n }\r\n } else {\r\n if (action.name === 'country') {\r\n setDefaultCompareSelectedOption('');\r\n }\r\n setCompareSelectedOption('');\r\n setCompareLocation(prev => {\r\n return {\r\n ...prev,\r\n [action.name]: '',\r\n };\r\n });\r\n }\r\n }\r\n };\r\n\r\n //handling selected data from selector and setting to state\r\n const handleSelectedItem = (newValue, action) => {\r\n if (action.name === 'country') {\r\n props.handleCountry(newValue.value);\r\n setCountry(newValue.value);\r\n setParentCountryObj(newValue);\r\n handleOptions(countryList, newValue, action);\r\n setState(null);\r\n props.handleAdvancedSearch({ state: '', district: '' });\r\n if (newValue.name === SOUTH_ASIA_CONST.name) {\r\n setSelectedRegion(newValue);\r\n setCountry(newValue.name);\r\n setStateList([]);\r\n }\r\n handleCompareSelectedItem(newValue, action);\r\n } else if (action.name === 'state') {\r\n setState(newValue);\r\n setSelectedDistrict(null);\r\n props.handleAdvancedSearch({ state: newValue.value, district: '' });\r\n if (newValue.value) {\r\n setParentStateObj(newValue);\r\n handleOptions(stateList, newValue, action);\r\n } else {\r\n // handleOptions(countryList, parentCountryObj, 'country');\r\n setSelectedOption(parentCountryObj);\r\n setSelectedLocation(prev => {\r\n return {\r\n ...prev,\r\n state: {},\r\n };\r\n });\r\n }\r\n\r\n if (newValue.value === '') setDistrictList([]);\r\n if (_.isEmpty(compareCountry) || country === compareCountry) {\r\n handleCompareSelectedItem(newValue, action);\r\n }\r\n } else if (action.name === 'district') {\r\n setSelectedDistrict(newValue);\r\n\r\n if (newValue.value !== '') {\r\n handleOptions(districtList, newValue, action);\r\n } else {\r\n setSelectedOption(parentStateObj);\r\n setSelectedLocation(prev => {\r\n return {\r\n ...prev,\r\n district: {},\r\n };\r\n });\r\n //handleOptions(stateList, parentStateObj, 'state');\r\n }\r\n props.handleAdvancedSearch({ district: newValue.value });\r\n if (_.isEmpty(compareState) || state?.value === compareState?.value) {\r\n handleCompareSelectedItem(newValue, action);\r\n }\r\n }\r\n };\r\n\r\n const handleOnChangeBaseTime = selectedTime => {\r\n setSelectedBaseTime(selectedTime);\r\n if (SHOW_VALIDTIME_AND_LAYERS.includes(selectedEcmwfProducts?.slug)) {\r\n const modifiedArr = selectedTime?.validTime;\r\n\r\n setValidTimeOptions(modifiedArr); // by default selecting first element as options\r\n setSelectedValidTime(modifiedArr[0]); // by default selecting first element\r\n if (selectedEcmwfProducts?.slug === PARAMETER_SLUGS.SOIL_MOISTURE) {\r\n let sortedLayerOptions = [];\r\n sortedLayerOptions = staticResourceData?.find(\r\n each => each?.title === SOIL_MOISTURE_LAYER_ECMWF,\r\n );\r\n\r\n setValidLayerOptions(sortedLayerOptions?.values);\r\n setSelectedValidLayer(sortedLayerOptions?.values?.[0]);\r\n }\r\n if (selectedEcmwfProducts?.slug === PARAMETER_SLUGS.PRECEIPITATION_SEAS5) {\r\n let foreCastTypeOptions = [];\r\n const ForecastListData = staticResourceData?.find(\r\n each => each?.title === FORECAST_LIST_ECMWF,\r\n );\r\n\r\n foreCastTypeOptions = ForecastListData?.values;\r\n\r\n setForecastType({\r\n forecastTypeOptions: foreCastTypeOptions,\r\n selectedForecastType: foreCastTypeOptions?.[0],\r\n });\r\n\r\n // setForecastType({\r\n // forecastTypeOptions: foreCastTypeOptions,\r\n // selectedForecastType: foreCastTypeOptions?.[0],\r\n // });\r\n }\r\n }\r\n if (SHOW_DAY_AND_QUANTILE.includes(selectedEcmwfProducts?.slug)) {\r\n const ecmwfDayData = staticResourceData?.find(each => each.title === 'Day');\r\n\r\n const ecmwfQuantileData = staticResourceData?.find(each => each?.title === 'Quantile');\r\n\r\n if (ecmwfQuantileData) {\r\n setDaysData({\r\n daysOptions: ecmwfDayData?.values,\r\n selectedDay: ecmwfDayData?.values?.[0],\r\n });\r\n }\r\n\r\n setQuantileData({\r\n quantileOptions: ecmwfQuantileData?.values,\r\n selectedQuantile: ecmwfQuantileData?.values?.[0],\r\n });\r\n }\r\n };\r\n\r\n const handleOnChangeValidTime = validTime => {\r\n setSelectedValidTime(validTime);\r\n if (validTime?.layer) {\r\n let sortedLayerOptions = [];\r\n if (validTime?.layer) {\r\n sortedLayerOptions = _.sortBy(validTime?.layer, 'value');\r\n }\r\n setValidLayerOptions(sortedLayerOptions);\r\n setSelectedValidLayer(sortedLayerOptions?.[0]);\r\n }\r\n if (validTime?.forecastType) {\r\n let foreCastTypeOptions = [];\r\n if (validTime?.forecastType) {\r\n foreCastTypeOptions = _.sortBy(validTime?.forecastType, 'value');\r\n }\r\n setForecastType({\r\n forecastTypeOptions: foreCastTypeOptions,\r\n selectedForecastType: foreCastTypeOptions?.[0],\r\n });\r\n }\r\n };\r\n\r\n const handleOnChangeValidLayer = validlayer => {\r\n setSelectedValidLayer(validlayer);\r\n };\r\n const handleOnChangeForecastType = e => {\r\n setForecastType(oldState => ({\r\n ...oldState,\r\n selectedForecastType: e,\r\n }));\r\n };\r\n\r\n const handleOnChangeDays = selectedValue => {\r\n setDaysData(oldState => ({ ...oldState, selectedDay: selectedValue }));\r\n if (selectedValue?.quantile) {\r\n const sortedQuantile = selectedValue?.quantile\r\n .map(data => {\r\n return {\r\n ...data,\r\n qunatile: Number(data.value),\r\n };\r\n })\r\n .sort((a, b) => a.qunatile - b.qunatile);\r\n setQuantileData({\r\n quantileOptions: sortedQuantile,\r\n selectedQuantile: sortedQuantile?.[0],\r\n });\r\n }\r\n };\r\n const handleOnChangeQuantile = selectedQuantile => {\r\n setQuantileData(oldState => ({\r\n ...oldState,\r\n selectedQuantile,\r\n }));\r\n };\r\n\r\n //handling selected location for compare\r\n const handleCompareSelectedItem = (newValue, action) => {\r\n if (action.name === 'country') {\r\n props.handleCompareSearch({ country: newValue.value, state: '', district: '' });\r\n setCompareCountry(newValue.value);\r\n handleCompareOptions(countryList, newValue, action);\r\n setCompareState(null);\r\n if (newValue.name === SOUTH_ASIA_CONST.name) {\r\n props.handleCompareSearch({ country: newValue.name });\r\n setDefaultCompareSelectedOption(newValue);\r\n setCompareSelectedOption(newValue);\r\n setCompareLocation(prev => {\r\n return {\r\n ...prev,\r\n [action.name]: newValue,\r\n };\r\n });\r\n setCompareStateList([]);\r\n }\r\n if (newValue.value === '') setCompareStateList([]);\r\n } else if (action.name === 'state') {\r\n setCompareState(newValue);\r\n setSelectedCompareDistrict(null);\r\n props.handleCompareSearch({ state: newValue.value, district: '' });\r\n handleCompareOptions(\r\n !_.isEmpty(compareStateList) ? compareStateList : stateList,\r\n newValue,\r\n action,\r\n );\r\n props.stateValue(newValue);\r\n if (newValue.value === '') setCompareDistrictList([]);\r\n } else if (action.name === 'district') {\r\n props.handleCompareSearch({ district: newValue.value });\r\n handleCompareOptions(\r\n !_.isEmpty(compareDistrictList) ? compareDistrictList : districtList,\r\n newValue,\r\n action,\r\n );\r\n setSelectedCompareDistrict(newValue);\r\n }\r\n };\r\n\r\n const handleCompareToggle = ({ target }) => {\r\n let compareData = isCompare;\r\n const nextCompare = compareData.map(item => {\r\n if (item.value === target.value) {\r\n return {\r\n ...item,\r\n selected: target.checked,\r\n };\r\n } else {\r\n return {\r\n ...item,\r\n selected: false,\r\n };\r\n }\r\n });\r\n setIsCompare(nextCompare);\r\n setCompareData(target.value);\r\n setCompareIRIForecastTime({\r\n year: null,\r\n month: null,\r\n lead_time: null,\r\n });\r\n };\r\n const renderCompareDates = isCompare => {\r\n let isGraphCompare = isCompare.find(item => item.name === 'graph');\r\n if (!isGraphCompare.selected) {\r\n return selectedDataSource?.secondDataSource[0]?.id !== DATA_SOURCES.IRI.id ? (\r\n <>\r\n \r\n {TRANSLATIONS.FILTER.ADVANCE_SEARCH}\r\n setAdvanceSearch(false)}>\r\n {t('FILTER.HIDE')}\r\n \r\n
\r\n {/* \r\n
*/}\r\n \r\n
\r\n {country && selectedLocation?.country?.name !== SOUTH_ASIA_CONST.name && (\r\n \r\n
\r\n )}\r\n {state && districtList?.length ? (\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n
\r\n {renderCompareDates(isCompare)}\r\n \r\n );\r\n };\r\n const handleOnPlaceChange = event => {\r\n if (event && event?.target && event?.target?.value === '') {\r\n setLocation('');\r\n props.handleCountry(country);\r\n props.handleAdvancedSearch({\r\n state: state?.value || '',\r\n district: selectedDisctrict?.value || '',\r\n });\r\n } else {\r\n setLocation(event.target.value);\r\n }\r\n };\r\n\r\n // const handleInitialForecastYearMonth = type => {\r\n // return moment(selectedForecastYearMonth?.map[type]).format('YYYY-MM');\r\n // };\r\n\r\n // const handleforecastYearMonth = e => {\r\n // forecastYearMonthHandler(e.target.value);\r\n // };\r\n // const isFirstRun = useRef(true);\r\n\r\n const handleInitialDate = type => {\r\n if (isCompare?.length && isCompare.some(item => item.name === 'graph' && item.selected)) {\r\n return initialSelectedDate?.graph[type];\r\n } else {\r\n return initialSelectedDate?.map[type];\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (selectedDataSource?.firstDataSource[0]?.label === 'GFS - NOAA') {\r\n const nwdate = new Date(updatedSelectedDate?.startDate);\r\n nwdate.setDate(nwdate.getDate() + 15);\r\n const x = moment(nwdate).format(DATE_FORMAT);\r\n if (new Date(x).getTime() < new Date(updatedSelectedDate?.maxEndDate).getTime()) {\r\n setSelectedDate(prev => {\r\n return {\r\n ...prev,\r\n map: {\r\n ...initialSelectedDate.map,\r\n // startDate: e.target.value,\r\n endDate: x,\r\n },\r\n graph: {\r\n ...initialSelectedDate.graph,\r\n // startDate: e.target.value,\r\n endDate: x,\r\n },\r\n };\r\n });\r\n setFinalNoaaEndDate(x);\r\n setFinalNoaaMaxEndDate(x);\r\n } else if (new Date(x).getTime() > new Date(updatedSelectedDate?.maxEndDate).getTime()) {\r\n setSelectedDate(prev => {\r\n return {\r\n ...prev,\r\n map: {\r\n ...initialSelectedDate.map,\r\n // startDate: e.target.value,\r\n endDate: updatedSelectedDate?.maxEndDate,\r\n },\r\n graph: {\r\n ...initialSelectedDate.graph,\r\n // startDate: e.target.value,\r\n endDate: updatedSelectedDate?.maxEndDate,\r\n },\r\n };\r\n });\r\n setFinalNoaaEndDate(updatedSelectedDate?.maxEndDate);\r\n setFinalNoaaMaxEndDate(updatedSelectedDate?.maxEndDate);\r\n } else {\r\n setSelectedDate(prev => {\r\n return {\r\n ...prev,\r\n map: {\r\n ...initialSelectedDate.map,\r\n // startDate: e.target.value,\r\n endDate: updatedSelectedDate['endDate'],\r\n },\r\n graph: {\r\n ...initialSelectedDate.graph,\r\n // startDate: e.target.value,\r\n endDate: updatedSelectedDate['endDate'],\r\n },\r\n };\r\n });\r\n setFinalNoaaEndDate(updatedSelectedDate['endDate']);\r\n setFinalNoaaMaxEndDate(updatedSelectedDate['endDate']);\r\n }\r\n }\r\n }, [updatedSelectedDate]);\r\n\r\n const renderToolTip = () => {\r\n return (\r\n \r\n \r\n {t('FILTER.EXPAND_BAR')}\r\n \r\n props.setBar(!isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n \r\n \r\n {TRANSLATIONS.FILTER.APPLY_LAYERS}\r\n \r\n {showToolTip && region?.length ? (\r\n \r\n {TRANSLATIONS.FILTER.PLEASE_REMOVE_MARKERS}\r\n \r\n ) : (\r\n ''\r\n )}\r\n {showMapPreferenceTooltip && !showToolTip ? (\r\n \r\n {TRANSLATIONS.FILTER.PLEASE_REMOVE_MAP_PREFERENCE_LAYER}\r\n \r\n ) : (\r\n ''\r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n {!isAdvanceSearch && !fromStaticResources ? (\r\n \r\n setAdvanceSearch(!isAdvanceSearch)}\r\n >\r\n {' '}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n {isAdvanceSearch ? handleAdvanceSearchRender() : null}\r\n \r\n
\r\n {!fromStaticResources ? (\r\n selectedDataSource?.firstDataSource[0]?.id === DATA_SOURCES?.IRI?.id ? (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n {t('DROUGHT_MONITORING.CLICK_HERE_TO_KNOW_MORE')}\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n \r\n {\r\n if (selectedDataSource?.firstDataSource[0]?.label === 'GFS - NOAA') {\r\n setNoaaMaxEndDate(true);\r\n // handleSetNoaaEndDate();\r\n }\r\n setSelectedDate(prev => {\r\n return {\r\n ...prev,\r\n map: {\r\n ...initialSelectedDate.map,\r\n startDate: e.target.value,\r\n },\r\n graph: {\r\n ...initialSelectedDate.graph,\r\n startDate: e.target.value,\r\n },\r\n };\r\n });\r\n setUpdatedSelectedDate(prevdate => {\r\n return {\r\n ...prevdate,\r\n startDate: e.target.value,\r\n };\r\n });\r\n }}\r\n min={handleInitialDate('minStartDate')}\r\n max={handleInitialDate('maxStartDate')}\r\n disabled={isOpenWeatherDataSource(selectedDataSource?.firstDataSource)}\r\n />\r\n {\r\n setFinalNoaaEndDate(e.target.value);\r\n setSelectedDate(prev => {\r\n return {\r\n ...prev,\r\n map: {\r\n ...initialSelectedDate.map,\r\n endDate: e.target.value,\r\n },\r\n graph: {\r\n ...initialSelectedDate.graph,\r\n endDate: e.target.value,\r\n },\r\n };\r\n });\r\n if (selectedDataSource?.firstDataSource[0]?.label !== 'GFS - NOAA') {\r\n setUpdatedSelectedDate(prevdate => {\r\n return {\r\n ...prevdate,\r\n endDate: e.target.value,\r\n };\r\n });\r\n }\r\n }}\r\n min={handleInitialDate('startDate')}\r\n max={\r\n noaaMaxEndDate ? finalNoaaMaxEndDate : handleInitialDate('maxEndDate')\r\n }\r\n disabled={isOpenWeatherDataSource(selectedDataSource?.firstDataSource)}\r\n />\r\n
\r\n \r\n )\r\n ) : (\r\n <>\r\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\r\n \r\n \r\n handleEcmwfProducts(e)}\r\n isMulti={false}\r\n required={true}\r\n />\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\r\n \r\n \r\n handleOnChangeBaseTime(e)}\r\n isMulti={false}\r\n required={true}\r\n />\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n {SHOW_VALIDTIME_AND_LAYERS.includes(selectedEcmwfProducts?.slug) &&\r\n selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\r\n \r\n \r\n handleOnChangeValidTime(e)}\r\n // onChange={e => handleEcmwfProducts(e)}\r\n isMulti={false}\r\n required={true}\r\n />\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n {selectedEcmwfProducts?.slug === PARAMETER_SLUGS.SOIL_MOISTURE &&\r\n selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\r\n \r\n \r\n handleOnChangeValidLayer(e)}\r\n isMulti={false}\r\n required={true}\r\n />{' '}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n {selectedEcmwfProducts.slug === PARAMETER_SLUGS.PRECEIPITATION_SEAS5 &&\r\n selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\r\n \r\n \r\n handleOnChangeForecastType(e)}\r\n />{' '}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n {SHOW_DAY_AND_QUANTILE.includes(selectedEcmwfProducts?.slug) &&\r\n selectedDataSource?.firstDataSource?.[0]?.value === 'ECMWF (Static)' ? (\r\n \r\n \r\n handleOnChangeDays(e)}\r\n />{' '}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ERPAS (Static)' ? (\r\n \r\n \r\n handleOnChangeQuantile(e)}\r\n />{' '}\r\n
\r\n \r\n handleYearSelectionChange(e)}\r\n isMulti={false}\r\n required={true}\r\n />\r\n
\r\n ) : (\r\n ''\r\n )}\r\n {selectedDataSource?.firstDataSource?.[0]?.value === 'ERPAS (Static)' ? (\r\n \r\n handleDateSelectionChange(e)}\r\n isMulti={false}\r\n required={true}\r\n />\r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n )}\r\n {!fromStaticResources &&\r\n !isOpenWeather &&\r\n selectedDataSource?.firstDataSource[0]?.name != 'IRI' ? (\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n {!fromStaticResources && (\r\n \r\n
\r\n \r\n
\r\n \r\n {isClickedOnPlus && !region.length ? (\r\n addMoreDateFieldWhenClickedOnPlus()\r\n ) : (\r\n \r\n
\r\n )}\r\n {!fromStaticResources && (\r\n <>\r\n \r\n \r\n {t('LEAFLET_WRAPPER.PARAMETERS')}\r\n {isOpen ? \r\n {params?.parameterData?.map(item => {\r\n const { parameter, type } = item;\r\n if (type === '' || type === 'non-static') {\r\n return parameter.map((p, index) => {\r\n return (\r\n handleParentClick(p)}\r\n >\r\n \r\n handleParamsList(item)}\r\n >\r\n {item.type}\r\n \r\n {selectedParent === item.type ? \r\n \r\n handleChildParameter(data)}\r\n >\r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n }\r\n })}\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nParameterList.propTypes = {\r\n initialParams: PropTypes.string,\r\n handleParameters: PropTypes.func,\r\n dataSourceId: PropTypes.string,\r\n};\r\n\r\nexport default ParameterList;\r\n","import React from 'react';\r\n\r\nimport 'leaflet-side-by-side';\r\nimport 'leaflet/dist/leaflet.css';\r\n\r\nimport '../../../assets/CSS/LeafletWrapper.css';\r\nimport { LayersControlProvider } from './LayerControlContext';\r\nimport ParameterList from '../../../Components/Parameters';\r\n\r\n// Classes used by Leaflet to position controls\r\n// const POSITION_CLASSES = {\r\n// bottomleft: 'leaflet-bottom leaflet-left',\r\n// bottomright: 'leaflet-bottom leaflet-right',\r\n// topleft: 'leaflet-top leaflet-left',\r\n// topright: 'leaflet-top leaflet-right',\r\n// };\r\n\r\nfunction LayerControl({\r\n // position,\r\n children,\r\n isOpenWeather,\r\n handleParameters,\r\n handleDataSourceId,\r\n params,\r\n dataSourceId,\r\n isHideBar,\r\n}) {\r\n // const positionClass = (position && POSITION_CLASSES[position]) || POSITION_CLASSES.topright;\r\n\r\n return (\r\n \r\n
\r\n \r\n <>\r\n
\r\n {children}\r\n ' + labels.join('
');\r\n }\r\n else{\r\n if(layer.units){\r\n // containerDiv.innerHTML = ''+(layer?.fromMapPreferences ? layer?.dataSource : layer.parameter) +\" \" +\"(\" + layer.units+\")\" + '
' + labels.join('
');\r\n containerDiv.innerHTML = containerDiv.innerHTML = layer?.dataSource === 'IRI'\r\n ? ''+(layer?.dataSource) + '
' + ` White indicates Climatological odds
` +\r\n labels.join('
') +\r\n '
' +\r\n (layer?.fromMapPreferences ? layer?.dataSource : layer.parameter) +\r\n ' ' +\r\n '(' +\r\n layer.units +\r\n ')' +\r\n '
'\r\n : ''+(layer?.fromMapPreferences ? layer?.dataSource : layer.parameter) +\" \" +\"(\" + layer.units+\")\" + '
' + labels.join('
');\r\n }else{\r\n if(layer.dataSource === DRY_SPELL.FINAL_DROUGHT_MAP){\r\n containerDiv.innerHTML = ''+layer.dataSource + '
' + labels.join('
');\r\n }else{\r\n /**\r\n * added by sai krishna thalla\r\n * reason: lulc legends names are not displaying their respective label names\r\n * date: 19-sep-2022\r\n */\r\n containerDiv.innerHTML = ''+ (layer?.fromMapPreferences ? layer?.dataSource == LAND_USE_LAND_COVER ? (layer.id):(layer?.dataSource) : layer.parameter) + '
' + labels.join('
');\r\n }\r\n }\r\n }\r\n //\r\n let containerOfContainerDiv = L.DomUtil.create('div');\r\n containerOfContainerDiv.className= \"container-of-container-div\"\r\n let datesContainer = L.DomUtil.create('div');\r\n datesContainer.className = \"discrete-legend-container-of-container-div\"\r\n const monthSpanContainer = L.DomUtil.create(\"div\");\r\n monthSpanContainer.className = \"dates-span-container-iri\";\r\n if (layer?.selectedDates?.startDate && layer?.selectedDates?.endDate){\r\n datesContainer.innerHTML = ' ' + layer.selectedDates.startDate + \" to \" + layer.selectedDates.endDate + ' '\r\n\r\n\r\n containerOfContainerDiv.appendChild(datesContainer)\r\n // containerOfContainerDiv.appendChild(containerDiv)\r\n\r\n\r\n if (layer?.forecastMonth) {\r\n monthSpanContainer.innerHTML = `${layer?.forecastMonth} `;\r\n containerOfContainerDiv.appendChild(monthSpanContainer);\r\n legendDiv.appendChild(containerOfContainerDiv);\r\n }\r\n\r\n\r\n legendDiv.append(containerOfContainerDiv)\r\n containerOfContainerDiv.appendChild(containerDiv)\r\n\r\n\r\n\r\n legendDiv.append(containerOfContainerDiv)\r\n }\r\n else if (layer?.selectedDates?.startDate && !layer?.selectedDates?.endDate){\r\n datesContainer.innerHTML = ' ' + layer.selectedDates.startDate + ' '\r\n containerOfContainerDiv.appendChild(datesContainer)\r\n containerOfContainerDiv.appendChild(containerDiv)\r\n legendDiv.append(containerOfContainerDiv)\r\n }\r\n else{\r\n legendDiv.append(containerDiv);\r\n }\r\n return legendDiv;\r\n };\r\n if (layer && !_.isEmpty(legend) && !_.isEmpty(map)) {\r\n if(!_.isEmpty(map?._layers)){\r\n legend?.addTo(map);\r\n }\r\n }\r\n } else {\r\n if (layer) {\r\n const image = document.getElementById(id || 'legend_div');\r\n legend.onRemove = () => {\r\n if (image) {\r\n L.DomUtil.remove(image);\r\n }\r\n };\r\n legend.onRemove();\r\n }\r\n }\r\n }\r\n }, [add, map, layer]); //here add map\r\n return null;\r\n}\r\n\r\nexport default Legend;","export default __webpack_public_path__ + \"static/media/Zoom_In.5d73a332.svg\";","export default __webpack_public_path__ + \"static/media/Zoom-Out.72a4ca61.svg\";","import React from 'react';\r\n\r\nconst Loader = (props) => {\r\n return (\r\n <>\r\n
\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Loader;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';\r\nimport PropTypes from 'prop-types';\r\nimport ZoomInIcon from '../../assets/Images/Zoom_In.svg';\r\nimport ZoomOutIcon from '../../assets/Images/Zoom-Out.svg';\r\nimport ParameterList from '../../Components/Parameters';\r\nimport Download from '../../assets/Images/download.png';\r\nimport { saveAs } from 'file-saver';\r\nimport { Collapse, Button, Row, Col } from 'reactstrap';\r\nimport Loader from '../../Components/common/loader';\r\nimport { DATA_SOURCES } from '../../Components/constants';\r\nimport { t } from 'react-multi-lang';\r\nexport const StaticResource = props => {\r\n const {\r\n params,\r\n handleParameters,\r\n dataSourceId,\r\n handleDataSourceId,\r\n staticResourceWeekData,\r\n dataSource,\r\n } = props;\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [selectedStaticResourceData, setSelectedStaticResourceData] = useState({\r\n staticResourceImage: null,\r\n staticResourceTitle: '',\r\n selectedStaticResourceId: '',\r\n category: '',\r\n }); // new state added for category by Ramya.S on 5/9/2022\r\n const [orderedWeekData, setOrderedWeekData] = useState();\r\n\r\n const nextProps = useSelector(state => ({\r\n isStaticResourceRequesting: state.staticResource.isStaticResourceRequesting,\r\n isStaticResourceYearRequesting: state.staticResource.isStaticResourceYearRequesting,\r\n ecmwfDataByControlData: state?.Weather?.isEcmwfDataByControlData,\r\n isEcmwfDataByControlLoading: state?.Weather?.isEcmwfDataByControlLoading,\r\n }));\r\n\r\n useEffect(() => {\r\n setIsOpen(true);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (nextProps.isStaticResourceRequesting) {\r\n selectedStaticResourceData.staticResourceImage = null;\r\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\r\n } else {\r\n if (staticResourceWeekData?.length) {\r\n let ordered_list = staticResourceWeekData.sort((x, y) => {\r\n return x?.week_wise?.slice(4) - y?.week_wise?.slice(4);\r\n });\r\n setOrderedWeekData(ordered_list);\r\n selectedStaticResourceData.selectedStaticResourceId = ordered_list[0].id;\r\n selectedStaticResourceData.staticResourceImage = ordered_list[0].upload_image;\r\n selectedStaticResourceData.category = ordered_list[0].forecast_data_source_category_name;\r\n selectedStaticResourceData.staticResourceTitle = ordered_list[0].forecast_data_source_name;\r\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\r\n } else if (Array.isArray(staticResourceWeekData) && staticResourceWeekData !== null) {\r\n selectedStaticResourceData.selectedStaticResourceId = '';\r\n selectedStaticResourceData.staticResourceImage = '';\r\n selectedStaticResourceData.staticResourceTitle = '';\r\n selectedStaticResourceData.category = '';\r\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\r\n }\r\n }\r\n }, [staticResourceWeekData, nextProps.isStaticResourceRequesting]);\r\n\r\n const handleDownload = () => {\r\n saveAs(selectedStaticResourceData.staticResourceImage, 'image.gif');\r\n };\r\n\r\n useEffect(() => {\r\n if (nextProps.isEcmwfDataByControlLoading) {\r\n selectedStaticResourceData.staticResourceImage = null;\r\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\r\n } else {\r\n if (nextProps?.ecmwfDataByControlData?.statusCode === 200) {\r\n selectedStaticResourceData.selectedStaticResourceId = '';\r\n selectedStaticResourceData.staticResourceImage =\r\n nextProps?.ecmwfDataByControlData?.data?.result;\r\n selectedStaticResourceData.category = dataSource?.[0]?.category;\r\n selectedStaticResourceData.staticResourceTitle = 'ECMWF (Static)';\r\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\r\n \r\n }\r\n }\r\n }, [nextProps?.isEcmwfDataByControlLoading, nextProps?.ecmwfDataByControlData]);\r\n\r\n const handleSelectedWeek = data => {\r\n selectedStaticResourceData.selectedStaticResourceId = data.id;\r\n selectedStaticResourceData.staticResourceImage = data.upload_image;\r\n selectedStaticResourceData.staticResourceTitle = data.forecast_data_source_name;\r\n setSelectedStaticResourceData({ ...selectedStaticResourceData });\r\n };\r\n return (\r\n <>\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\nStaticResource.propTypes = {\r\n staticResourceImage: PropTypes.string,\r\n params: PropTypes.array,\r\n handleParameters: PropTypes.func,\r\n staticResourceTitle: PropTypes.string,\r\n dataSourceId: PropTypes.object,\r\n};\r\n","export default \"data:image/png;base64,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\"","import React, { useState, useEffect } from 'react';\r\nimport { FeatureGroup, Circle } from 'react-leaflet';\r\nimport { EditControl } from 'react-leaflet-draw';\r\nimport _ from 'lodash';\r\nimport 'leaflet-draw';\r\nimport 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package\r\nimport 'leaflet-defaulticon-compatibility';\r\nimport PropTypes from 'prop-types';\r\nimport { t } from 'react-multi-lang';\r\nimport { DRAW_SHAPE } from './../../Components/constants/index';\r\nimport { showError } from '../../Components/Notifications';\r\nimport { getRegionData, removeRegionTooltip, setRegionData } from '../../Components/common/utils';\r\n\r\nfunction DrawShape(props) {\r\n const { handleSelectedRegion, country, state, district } = props;\r\n const [editableFG, setEditableFG] = useState(null);\r\n const [mapLayers, setMapLayers] = useState([]);\r\n let drawControlRef = React.useRef();\r\n\r\n useEffect(() => {\r\n let mapData = JSON.parse(JSON.stringify(mapLayers));\r\n handleSelectedRegion(mapData);\r\n setRegionData(mapData);\r\n }, [mapLayers]);\r\n\r\n useEffect(() => {\r\n if (editableFG) {\r\n // here you have all the stored layers\r\n const drawnItems = editableFG?._layers;\r\n if (!_.isEmpty(drawnItems)) {\r\n Object.keys(drawnItems).forEach((layerid, index) => {\r\n if (index === 0) {\r\n if (_.isEmpty(mapLayers)) {\r\n editableFG.removeLayer(drawnItems[layerid]);\r\n return;\r\n }\r\n }\r\n if (index < DRAW_SHAPE.MAXIMUM_SHAPE) {\r\n return;\r\n } else {\r\n const layer = drawnItems[layerid];\r\n editableFG.removeLayer(layer);\r\n setMapLayers(mapLayers.filter((data) => data.id !== Number(layerid)));\r\n showError(t('EDIT_CONTROL.MAXIMUM_SHAPE_ERROR'));\r\n }\r\n });\r\n }\r\n }\r\n }, [editableFG]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(editableFG)) {\r\n // here you have all the stored layers\r\n const drawnItems = editableFG?._layers;\r\n // if the number of layers is bigger than 1 then delete the first\r\n if (!_.isEmpty(drawnItems)) {\r\n Object.keys(drawnItems).forEach((layerid, index) => {\r\n const layer = drawnItems[layerid];\r\n editableFG.removeLayer(layer);\r\n });\r\n setMapLayers([]);\r\n }\r\n }\r\n }, [country, state, district]);\r\n\r\n let tempArray = [];\r\n\r\n const onCreated = (e) => {\r\n const { layerType, layer } = e;\r\n let regionData = getRegionData();\r\n let polyCount = regionData?.length\r\n ? (regionData?.filter((item) => item.layerType === 'polygon')).length\r\n : 0;\r\n\r\n if (layerType === 'marker') {\r\n let latlang = [layer._latlng.lat, layer._latlng.lng];\r\n setMapLayers((data) => [\r\n ...data,\r\n { id: layer._leaflet_id, layerType, polygonCount: '', latlngs: [...latlang] },\r\n ]);\r\n tempArray.push(e);\r\n setEditableFG(tempArray);\r\n return;\r\n }\r\n if (layerType === 'polygon') {\r\n const { _leaflet_id } = layer;\r\n let layerLatLng = [];\r\n const cordinatesArray = layer.getLatLngs()[0];\r\n cordinatesArray?.map(({ lat, lng }) => {\r\n layerLatLng.push([lat, lng]);\r\n });\r\n if (_leaflet_id && layerLatLng?.length) {\r\n setMapLayers((layers) => [...layers, { id: _leaflet_id, layerType, latlngs: layerLatLng, polygonCount: polyCount + 1, }]);\r\n tempArray.push(e);\r\n setEditableFG(tempArray);\r\n }\r\n }\r\n };\r\n\r\n const onEdited = (e) => {\r\n const {\r\n layers: { _layers },\r\n } = e;\r\n Object.values(_layers).map(({ _leaflet_id, editing }) => {\r\n let layerLatLng = [];\r\n if (editing.latlngs?.length) {\r\n const cordinatesArray = editing.latlngs[0];\r\n cordinatesArray?.length &&\r\n cordinatesArray[0].map(({ lat, lng }) => {\r\n layerLatLng.push([lat, lng]);\r\n });\r\n setMapLayers((layers) =>\r\n layers.map((l) => (l.id === _leaflet_id ? { ...l, latlngs: [...layerLatLng] } : l)),\r\n );\r\n } else if (!_.isEmpty(editing._marker._latlng)) {\r\n let cordinates = editing._marker._latlng;\r\n setMapLayers((layers) =>\r\n layers.map((l) =>\r\n l.id === _leaflet_id ? { ...l, latlngs: [cordinates.lat, cordinates.lng] } : l,\r\n ),\r\n );\r\n }\r\n });\r\n };\r\n\r\n const onDelete = (e) => {\r\n const {\r\n layers: { _layers },\r\n } = e;\r\n\r\n Object.values(_layers).map(({ _leaflet_id }) => {\r\n setMapLayers((layers) => layers.filter((l) => l.id !== _leaflet_id));\r\n });\r\n };\r\n\r\n const onFeatureGroupReady = (reactFGref) => {\r\n if (reactFGref) {\r\n const drawnItems = reactFGref?._layers;\r\n let count = 1;\r\n var elements = document.getElementsByClassName('draw-polygon');\r\n var markerElements = document.getElementsByClassName('draw-marker');\r\n\r\n removeRegionTooltip(drawnItems, elements);\r\n removeRegionTooltip(drawnItems, markerElements);\r\n\r\n Object.values(drawnItems)?.forEach((layer, index) => {\r\n if (!_.isEmpty(layer)) {\r\n if (layer.hasOwnProperty('_latlngs')) {\r\n if (index <= 1) {\r\n layer.bindTooltip(`polygon-${count}`, {\r\n className: 'draw-polygon',\r\n permanent: true,\r\n direction: 'top',\r\n });\r\n count++;\r\n }\r\n }\r\n else if(layer?.hasOwnProperty('_latlng')){\r\n let tooltipName = `(${(layer.editing?._marker?._latlng.lat)?.toFixed(\r\n 2||''\r\n )},${(layer.editing?._marker?._latlng.lng)?.toFixed(2) || ''})`;\r\n layer.bindTooltip(tooltipName, {\r\n className: 'draw-marker',\r\n permanent: true,\r\n direction: 'top',\r\n });\r\n }\r\n }\r\n });\r\n }\r\n // store the ref for future access to content\r\n setEditableFG(reactFGref);\r\n };\r\n\r\n const handleMarker = (e) => {};\r\n const onMounted = (e) => {\r\n drawControlRef.current = e;\r\n };\r\n\r\n return (\r\n \r\n {params?.length ? \r\n {({ zoomIn, zoomOut, resetTransform, ...rest }) => (\r\n \r\n {selectedStaticResourceData.staticResourceImage?.length ? (\r\n \r\n \r\n \r\n {selectedStaticResourceData.staticResourceImage ? (\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n \r\n )}\r\n
\r\n \r\n
: \"\"}\r\n {nextProps.isStaticResourceRequesting === true ||\r\n nextProps.isStaticResourceYearRequesting ? (\r\n \r\n {selectedStaticResourceData?.category} | Data Source:{' '}\r\n {selectedStaticResourceData?.staticResourceTitle}\r\n
\r\n )}\r\n\r\n handleDownload()}\r\n />\r\n \r\n 
zoomIn()} />\r\n \r\n \r\n 
zoomOut()} />\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n {t('FILTER.NO_DATA_MESSAGE_FOR_STATIC_SOURCE')}\r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n )}\r\n\r\n {selectedStaticResourceData.staticResourceTitle === 'ERPAS (Static)' && (\r\n \r\n {orderedWeekData?.length &&\r\n orderedWeekData.map((item, index) => {\r\n return (\r\n handleSelectedWeek(item)}\r\n >\r\n {item.week_wise?.charAt(0).toUpperCase() +\r\n item.week_wise?.slice(1, 4) +\r\n ' ' +\r\n item.week_wise?.charAt(4)}\r\n \r\n );\r\n })}\r\n \r\n )}\r\n
\r\n \r\n \r\n {\r\n onFeatureGroupReady(featureGroupRef);\r\n }}\r\n >\r\n
\r\n );\r\n}\r\n\r\nDrawShape.propTypes = {\r\n handleSelectedRegion: PropTypes.func,\r\n};\r\n\r\nexport default DrawShape;\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from 'react';\r\nimport _ from 'lodash';\r\nimport Chart from 'react-apexcharts';\r\nimport { renderChartTime, renderGenericDateFormat } from '../common/utils';\r\nimport { CHART_LABEL_COLORS,POLYGON, DATA_SOURCES } from '../constants/index';\r\nimport closeIcon from '../../assets/Images/closeIcon.svg';\r\n\r\nfunction GeometryCharts(props) {\r\n const {\r\n renderCharts,\r\n dataSource,\r\n initialSelectedDate,\r\n noaaRegionTimeSeries,\r\n selectedParam,\r\n region,\r\n } = props;\r\n const [series, setSeries] = useState([]);\r\n const [compareCountries,setCompareCountries] = useState([])\r\n const [compareDataSource,setCompareDataSource] = useState([])\r\n\r\n const [YAxisOptions, setYAxisOptions] = useState([\r\n {\r\n axisTicks: {\r\n show: true,\r\n },\r\n axisBorder: {\r\n show: true,\r\n color: (CHART_LABEL_COLORS && CHART_LABEL_COLORS[0]) || '#008FFB',\r\n },\r\n labels: {\r\n style: {\r\n colors: (CHART_LABEL_COLORS && CHART_LABEL_COLORS[0]) || '#008FFB',\r\n fontSize: '12px',\r\n fontFamily: 'National',\r\n },\r\n formatter: function(value) {\r\n if (!value == null || !isNaN(value)) {\r\n if (value % 1 != 0) {\r\n return value.toFixed(2);\r\n } else {\r\n return value;\r\n }\r\n }\r\n },\r\n },\r\n title: {\r\n style: {\r\n color: (CHART_LABEL_COLORS && CHART_LABEL_COLORS[0]) || '#008FFB',\r\n },\r\n },\r\n tooltip: {\r\n enabled: true,\r\n },\r\n scaleLabel: {\r\n display: true,\r\n },\r\n ticks: {\r\n callback: function(value) {\r\n return value;\r\n },\r\n },\r\n },\r\n ]);\r\n\r\n const [options, setOptions] = useState({\r\n chart: {\r\n type: 'column',\r\n stacked: false,\r\n zoom: {\r\n enabled: true,\r\n type: 'x',\r\n },\r\n },\r\n dataLabels: {\r\n enabled: true,\r\n enabledOnSeries: [0, 1],\r\n },\r\n stroke: {\r\n // width: [1, 1, 4],\r\n width: 4,\r\n },\r\n title: {\r\n text: 'Data Sources',\r\n align: 'left',\r\n offsetX: 110,\r\n style: {\r\n fontSize: '14px',\r\n fontWeight: 'normal',\r\n fontFamily: 'National',\r\n color: '#2A547C',\r\n },\r\n },\r\n plotOptions: {\r\n bar: {\r\n columnWidth: '55%',\r\n barHeight: '70%',\r\n },\r\n },\r\n xaxis: {\r\n categories: [],\r\n labels: {\r\n showDuplicates: false,\r\n style: {\r\n fontSize: '12px',\r\n fontFamily: 'National',\r\n },\r\n crossShair: {\r\n stroke: {\r\n curve: 'straight',\r\n },\r\n },\r\n },\r\n },\r\n yaxis: YAxisOptions,\r\n tooltip: {\r\n fixed: {\r\n enabled: true,\r\n position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft\r\n offsetY: 30,\r\n offsetX: 60,\r\n },\r\n },\r\n legend: {\r\n horizontalAlign: 'left',\r\n offsetX: 40,\r\n },\r\n });\r\n \r\n useEffect(() => {\r\n if (dataSource.length && initialSelectedDate) {\r\n const startDate = renderChartTime(initialSelectedDate?.graph?.startDate);\r\n const endDate = renderChartTime(initialSelectedDate?.graph?.endDate);\r\n let titleText = '';\r\n if (!region?.length) {\r\n titleText = `Parameter: ${selectedParam?.parameter?.name}`;\r\n } else {\r\n titleText = `Data Source: ${dataSource[0]?.name}( ${selectedParam?.parameter?.name})`;\r\n }\r\n\r\n let a;\r\n if (region.length && region){\r\n if(region[0].polygonCount == 1){\r\n a = POLYGON\r\n }\r\n }\r\n /**\r\n * changed by: sai krishna thalla\r\n * reason: compare data source has not been adding to the downloaded file name\r\n * date : 7-sep-2022\r\n */\r\n let countriesAndCompareDataSrc = \"(\" + compareCountries[0]+ \")\" + compareDataSource + \"(\" + compareCountries[1]+ \")\"\r\n if(dataSource[0].id === DATA_SOURCES.IRI.id){\r\n setOptions(prev => ({\r\n ...prev,\r\n chart:{\r\n ...options.chart,\r\n toolbar: {\r\n show: true,\r\n export: {\r\n csv: {\r\n filename: a? (compareCountries.length ? (dataSource[0]?.name + countriesAndCompareDataSrc + a ): (dataSource[0]?.name + \"-\" + a)) : (compareCountries.length ? (dataSource[0]?.name +countriesAndCompareDataSrc) : (dataSource[0]?.name)),\r\n columnDelimiter: ',',\r\n headerCategory: 'Date',\r\n headerValue: 'value',\r\n dateFormatter(timestamp) {\r\n return new Date(timestamp).toDateString();\r\n },\r\n },\r\n svg: {\r\n filename: a? (compareCountries.length ? (dataSource[0]?.name + countriesAndCompareDataSrc + a ): (dataSource[0]?.name + \"-\" + a)) : (compareCountries.length ? (dataSource[0]?.name +countriesAndCompareDataSrc) : (dataSource[0]?.name)),\r\n columnDelimiter: ',',\r\n headerCategory: 'Date',\r\n headerValue: 'value',\r\n dateFormatter(timestamp) {\r\n return new Date(timestamp).toDateString();\r\n },\r\n },\r\n png: {\r\n filename: a? (compareCountries.length ? (dataSource[0]?.name + countriesAndCompareDataSrc + a ): (dataSource[0]?.name + \"-\" + a)) : (compareCountries.length ? (dataSource[0]?.name +countriesAndCompareDataSrc) : (dataSource[0]?.name)),\r\n columnDelimiter: ',',\r\n headerCategory: 'Date',\r\n headerValue: 'value',\r\n dateFormatter(timestamp) {\r\n return new Date(timestamp).toDateString();\r\n },\r\n },\r\n },\r\n tools: {\r\n customIcons: [\r\n {\r\n icon: `\r\n
\r\n );\r\n}\r\n\r\nexport default GeometryCharts;\r\n\r\n","export default __webpack_public_path__ + \"static/media/mapPreferenceIcon.5f864bfe.svg\";","import L from 'leaflet';\r\nimport { useRef, useEffect } from 'react';\r\nimport { MONTHS_LIST } from '../constants';\r\nimport moment from 'moment';\r\n\r\nimport {SHOW_VALIDTIME_AND_LAYERS, PARAMETER_SLUGS, SHOW_DAY_AND_QUANTILE} from \"../../Components/constants\"\r\n\r\n/**\r\n * Remove Legends\r\n */\r\n\r\nexport const removeLegend = id => {\r\n const legend = L.control();\r\n const image = document.getElementById(`${id}`);\r\n legend.onRemove = () => {\r\n if (image) {\r\n L.DomUtil.remove(image);\r\n }\r\n };\r\n legend.onRemove();\r\n};\r\n\r\n//global utility to create querystring\r\nexport const createJSON = search => {\r\n return JSON.parse(\r\n '{\"' +\r\n decodeURI(search)\r\n .replace(/\"/g, '\\\\\"')\r\n .replace(/&/g, '\",\"')\r\n .replace(/=/g, '\":\"') +\r\n '\"}',\r\n );\r\n};\r\n//global function to rename name as label in dropdown options\r\nexport const renderOptions = optionsList => {\r\n if (optionsList?.length) {\r\n let newOptions = [];\r\n optionsList.forEach(element => {\r\n newOptions.push({\r\n ...element,\r\n value: element.id,\r\n label: element.name,\r\n });\r\n });\r\n return newOptions;\r\n }\r\n return [];\r\n};\r\n\r\n//global function to compare props\r\nexport function usePrevious(value) {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n}\r\n//get selected element from nested object of array's data\r\nexport const getNestedObjectData = (dataArray, id) => {\r\n return dataArray\r\n .filter(x => x.parameter.some(child => id === child.name))\r\n .map(y => ({\r\n ...y.parameter.find(child => id === child.name),\r\n parentIndiceName: y.name,\r\n }))?.[0];\r\n};\r\nexport const getDateSuffix = function(d) {\r\n if (d > 3 && d < 21) return 'th';\r\n switch (d % 10) {\r\n case 1:\r\n return 'st';\r\n case 2:\r\n return 'nd';\r\n case 3:\r\n return 'rd';\r\n default:\r\n return 'th';\r\n }\r\n};\r\nexport const getBulletinDateFormat = dateString => {\r\n const givenDate = new Date(dateString);\r\n const date = givenDate.getDate(),\r\n month = MONTHS_LIST[givenDate.getMonth()],\r\n year = givenDate.getFullYear();\r\n\r\n return date + getDateSuffix(date) + ' ' + month + ' ' + year;\r\n //return `${month}-${year}`; \r\n};\r\n\r\nexport const getBulletinMonthFormat = dateString =>{\r\n const givenDate = new Date(dateString);\r\n const month = MONTHS_LIST[givenDate.getMonth()],\r\n year = givenDate.getFullYear();\r\n\r\n return `${month}-${year}`;\r\n}\r\n\r\n\r\nexport const iriDate = (selectedDate, dateListing) => {\r\n const date = {\r\n startDate: '',\r\n endDate: '',\r\n };\r\n const endIriDate = selectedDate?.month?.id + '-' + selectedDate?.year?.value;\r\n const addValue = dateListing.find(each => each?.id === selectedDate?.lead_time?.id);\r\n const endIriEnd12 = moment(endIriDate, 'MM-YYYY')\r\n .add(addValue?.indexValue, 'months')\r\n .format('MM-YYYY');\r\n let iriStartDate = moment(endIriEnd12, 'MM-YYYY')\r\n .startOf('month')\r\n .format('DD-MM-YYYY');\r\n let iriEndDate = moment(endIriEnd12, 'MM-YYYY')\r\n .endOf('month')\r\n .format('DD-MM-YYYY');\r\n date.startDate = iriStartDate\r\n date.endDate = iriEndDate\r\n return date;\r\n};\r\n\r\n\r\nexport const renderStaticResourceImageApi = (\r\n staticResourceData,\r\n selectedBasetime,\r\n selectedValidTime,\r\n selectedValidLayer,\r\n forecastType,\r\n daysData,\r\n quantileData,\r\n\r\n selectedStaticParam,\r\n selectedLocation,\r\n) => {\r\n const requestData = {};\r\n\r\n if (staticResourceData && staticResourceData.length) {\r\n requestData.ecmwf_base_time = selectedBasetime?.value;\r\n requestData.country_id = selectedLocation?.country?.id;\r\n // requestData.country_id = \"e2f886a7-3299-4c82-af2e-987fe92fab44\";\r\n requestData.parameter_slug = selectedStaticParam?.slug;\r\n if (SHOW_VALIDTIME_AND_LAYERS.includes(selectedStaticParam?.slug)) {\r\n requestData.ecmwf_valid_time = selectedValidTime?.value;\r\n }\r\n // selectedStaticParam?.slug === PARAMETER_SLUGS.SOIL_MOISTURE\r\n if (selectedStaticParam?.slug === PARAMETER_SLUGS.SOIL_MOISTURE) {\r\n requestData.ecmwf_level = selectedValidLayer?.value;\r\n }\r\n\r\n if (selectedStaticParam?.slug === PARAMETER_SLUGS.PRECEIPITATION_SEAS5) {\r\n requestData.ecmwf_forecast_type =\r\n forecastType?.selectedForecastType?.value;\r\n }\r\n if (SHOW_DAY_AND_QUANTILE.includes(selectedStaticParam?.slug)) {\r\n // daysData?.selectedDay\r\n requestData.ecmwf_day = daysData?.selectedDay?.value;\r\n requestData.ecmwf_quantile = quantileData?.selectedQuantile?.value;\r\n }\r\n }\r\n return requestData;\r\n}","import React, { useState, useEffect, useRef } from 'react';\r\nimport {\r\n MapContainer,\r\n TileLayer,\r\n GeoJSON,\r\n useMap,\r\n useMapEvents,\r\n ZoomControl,\r\n LayersControl,\r\n LayerGroup,\r\n} from 'react-leaflet';\r\nimport _ from 'lodash';\r\nimport moment from 'moment';\r\nimport L from 'leaflet';\r\nimport 'leaflet-side-by-side';\r\nimport 'leaflet.control.opacity/dist/L.Control.Opacity.css';\r\nimport 'leaflet.control.opacity';\r\nimport { Button, Row, Col, FormGroup, Label, Input, Alert } from 'reactstrap';\r\nimport SplitterLayout from 'react-splitter-layout';\r\nimport 'react-splitter-layout/lib/index.css';\r\nimport PropTypes from 'prop-types';\r\nimport GraphLoader from '../../Components/common/GraphLoader';\r\nimport Loader from '../../Components/common/TextLoader';\r\nimport 'leaflet/dist/leaflet.css';\r\nimport MapPreferences from './MapPreferences';\r\nimport '../../assets/CSS/LeafletWrapper.css';\r\nimport '../../assets/CSS/Header.css';\r\nimport myConstClass from '../../Constants';\r\n\r\nimport {\r\n BASE_TIME_ECMWF,\r\n FORECAST_LIST_ECMWF,\r\n SHOW_VALIDTIME_AND_LAYERS,\r\n PARAMETER_SLUGS,\r\n SOIL_MOISTURE_LAYER_ECMWF,\r\n SHOW_DAY_AND_QUANTILE,\r\n} from '../../Components/constants';\r\nimport LeftFilter from '../../Components/common/Filter';\r\nimport { t } from 'react-multi-lang';\r\nimport LayerControl from './CustomLayerControl/LayerControl';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n getWeatherForecastData,\r\n getWeatherForecastDataSuccess,\r\n getNoaaTimeSeries,\r\n getMapPreferencesSuccess,\r\n getErpasTimeSeries,\r\n getIRITimeSeries,\r\n getIRIAvailableDatesDataRequest,\r\n getEcmwfProductsRequest,\r\n getEcmwfControlsRequest,\r\n getEcmwfDataByControlsRequest,\r\n} from '../../redux/actions';\r\nimport {\r\n staticResourceYearRequest,\r\n staticResourceRequest,\r\n staticResourceAllDateRequest,\r\n} from '../../redux/staticResource/staticResourceAction';\r\nimport {\r\n DATA_SOURCES,\r\n ERPAS_PARAMETER_SLUG,\r\n MAP_PREFERENCES_lABELS,\r\n NOAA_PARAMETER_SLUG,\r\n OPEN_WEATHER_CHART_PARAMS,\r\n OPEN_WEATHER_PARAMETERS_CONST,\r\n IRI_PARAMETER_SLUG,\r\n SOUTH_ASIA_CONST,\r\n STATIC_RESOURCE_GET_CATEGORY_LIST,\r\n GEOJSON_COUNTRY_TOOLTIP_DATA,\r\n GEOJSON_COUNTRY_DATA,\r\n DEFAULT_COUNTRY,\r\n} from '../../Components/constants/index';\r\nimport {\r\n AXIOS_INSTANCE,\r\n ERPAS_TIMESERIES,\r\n NOAA_TIMESERIES,\r\n IRI_TIMESERIES,\r\n WEATHER_FORECAST_DATA_URL,\r\n AXIOS_INSTANCE_MASTER_SERVER,\r\n MASTER_SERVER_BASE_URL,\r\n} from '../../redux/api/apiEndPoint';\r\nimport CustomLegend from './CustomLayerControl/CustomLegend';\r\nimport DiscreteLegend from './CustomLayerControl/DiscreteLegend';\r\nimport { StaticResource } from './StaticResource';\r\nimport Charts from '../../Components/Charts';\r\nimport {\r\n handleOpenWeatherCompareRes,\r\n renderGenericDateFormat,\r\n renderGeometricTimeSeries,\r\n renderOpenWeatherResponse,\r\n renderParamList,\r\n setWeatherForecastDefaultParam,\r\n isStaffUser,\r\n isSuperAdmin,\r\n isLogedIn,\r\n} from '../../Components/common/utils';\r\nimport { showError } from '../../Components/Notifications.js';\r\nimport 'leaflet-draw/dist/leaflet.draw.css';\r\nimport DrawShape from '../../pages/drawShape';\r\nimport { CgCloseO } from 'react-icons/cg';\r\nimport GeometryCharts from '../../Components/common/GeometryCharts';\r\nimport mapPreferenceIcon from '../../assets/Images/mapPreferenceIcon.svg';\r\nimport Cookies from 'js-cookie';\r\nimport { FORECAST_LEAD_TIME_LIST } from '../../Components/constants/index';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { iriDate, renderStaticResourceImageApi } from '../../Components/helpers/index.js';\r\n\r\nexport default function LeafletWrapper(props) {\r\n const history = useHistory();\r\n const dispatch = useDispatch();\r\n const { Overlay } = LayersControl;\r\n const [map, setMap] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const layerRef = useRef([]);\r\n const [stateData, setStateData] = useState();\r\n const [mapPreferRefs, setMapPreferRefs] = useState([]);\r\n const [isOpenWeather, setIsOpenWeather] = useState(false);\r\n const [mapLayerOpacity, setMapLayerOpacity] = useState({ layer: '' });\r\n const [opacityControl, setOpacityControl] = useState('');\r\n const [mapUrl, setMapUrl] = useState('');\r\n const [mapPreferUrl, setMapPreferUrl] = useState('');\r\n const [isOpenMapModel, setIsOpenMapModel] = useState(false);\r\n const [isHideBar, setBar] = useState(false);\r\n const [selectedParams, setSelectedParams] = useState([]);\r\n const [selectedYear, setSelectedYear] = useState({});\r\n const [params, setParams] = useState('');\r\n const [initialParams, setInitialParams] = useState('');\r\n const [compareParams, setCompareParams] = useState('');\r\n const [selectedParam, setSelectedParam] = useState('');\r\n const [country, setCountry] = useState('');\r\n const [selectedState, setSelectedState] = useState('');\r\n const [selectedDistrict, setSelectedDistrict] = useState('');\r\n const [region, setRegion] = useState('');\r\n const [dataSources, setDataSources] = useState([]);\r\n const [compareDataSources, setCompareDataSources] = useState([]);\r\n const [initialSelectedDate, setInitialSelectedDate] = useState([]);\r\n const [finalSelectedDate, setFinalSelectedDate] = useState([]);\r\n const [dateSourceWeatherData, setWeatherData] = useState({});\r\n const [forecastData, setForecastData] = useState([]);\r\n const [parameterData, setParameterData] = useState([]);\r\n const [hasQueryParam, setHasQueryParam] = useState(false);\r\n const [regionId, setRegionId] = useState();\r\n //const [selectedForecastLeadTime, setSelectedForecastLeadTime] = useState(null);\r\n const [selectedDataSourceId, setSelectedDataSourceId] = useState();\r\n const [staticResourceParams, setStaticResourceParams] = useState([]);\r\n const [staticResourceDates, setStaticResourceDates] = useState();\r\n const [staticResourceImage, setStaticResourceImage] = useState();\r\n const [showEcmwf, setShowEcmwf] = useState(false);\r\n const [staticResourceTitle, setStaticResourceTitle] = useState();\r\n const [mapPreferencesData, setMapPreferencesData] = useState([]);\r\n const [geoJsonData, setGeoJsonData] = useState([]);\r\n const [geoJsonAllData, setGeoJsonAllData] = useState([]);\r\n const [geoJsonLayersData, setGeoJsonLayerData] = useState([]);\r\n const [getBoundariesData, setGetBoundariesData] = useState([]);\r\n const [selectedParamDataSourceId, setSelectedParamDataSourceId] = useState();\r\n const [compareParamLegendData, setCompareParamLegendData] = useState([]);\r\n const [selectedParamLegendData, setSelectedParamLegendData] = useState([]);\r\n const [selectedMapPreferLegendData, setSelectedMapPreferLegendData] = useState([]);\r\n const [showCharts, setShowCharts] = useState(false);\r\n const [selectedChartTimeRange, setSelectedChartTimeRange] = useState('This week');\r\n const [chartSeriesData, setChartSeriesData] = useState([]);\r\n const [isDefaultDataSource, setIsDefaultDataSource] = useState(false);\r\n const [graphData, setGraphData] = useState('');\r\n const [selectedDate, setSelectedDate] = useState();\r\n const [staticResourceWeekData, setStaticResourceWeekData] = useState(null);\r\n // const [selectedFinalForercastLeadTime, setSelectedFinalForercastLeadTime] = useState(null);\r\n const [mapPreferenceGeoJsonloading, setMapPreferenceGeoJsonloading] = useState(false);\r\n const [compareView, setCompareView] = useState([]);\r\n const [mapPreferences, setMapPreferences] = useState({\r\n country: { layer: useRef(), color: '', data: '', country: '' },\r\n states_or_provinces: { layer: useRef(), color: '', data: '', country: '' },\r\n districts_or_cities: { layer: useRef(), color: '', data: '', country: '' },\r\n meteorological_locations: { layer: useRef(), color: '', data: '', country: '' },\r\n basins: { layer: useRef(), color: '', data: '', country: '' },\r\n rivers_or_reservoirs: { layer: useRef(), color: '', data: '', country: '' },\r\n talukas: { layer: useRef(), color: '', data: '', country: '' },\r\n });\r\n const [requestBody, setRequestBody] = useState({\r\n forecast_data_source_id: [],\r\n parameter_id: [],\r\n group_date: '',\r\n order_by: 'start_date',\r\n page: 1,\r\n });\r\n const [urlDataSourceId, setUrlDataSourceId] = useState('');\r\n const [isDefaultSelectedSourceId, setIsDefaultSelectedSourceId] = useState(false);\r\n const [staticResourceSelectedLocation, setStaticResourceSelectedLocation] = useState(null);\r\n const mapRef = useRef(null);\r\n const [mapControl, setMapControl] = useState({});\r\n const [categoryParams, setCategoryParams] = useState([]);\r\n const [categorizedCompareParams, setCategoryCompareParams] = useState([]);\r\n const [selectedParamLegend, setSelectedParamLegend] = useState([]);\r\n const [temporalAggregation, setTemporalAggregation] = useState([]);\r\n const [errorData, setErrorData] = useState({ showError: false, data: '' });\r\n const splitterRef = useRef(null);\r\n const [forecastLeadTimeList, setForecastLeadTimeList] = useState([]);\r\n const [currentUserLocation, setCurrenUserLocation] = useState();\r\n const [selectedLocation, setSelectedLocation] = useState('');\r\n const [range, setRange] = useState({\r\n min: null,\r\n max: null,\r\n });\r\n const [applyLayers, setApplyLayers] = useState(false);\r\n const [updateGraph, setUpdateGraph] = useState(false);\r\n const [isGraphLoading, setIsGraphLoading] = useState();\r\n //state for timeseries data\r\n const [noaaTimeSeriesData, setNoaaTimeSeriesData] = useState(null);\r\n const [erpasTimeSeriesData, setErpasTimeSeriesData] = useState(null);\r\n const [iriTimeSeriesData, setIRITimeSeriesData] = useState(null);\r\n const [noaaRegionTimeSeries, setNoaaRegionTimeSeries] = useState([]);\r\n const [compareSearch, setCompareSearch] = useState({});\r\n const [forecastAvailableDates, setForecastAvailableDates] = useState([]);\r\n const [IRIAvailableYearList, setIRIAvailableYearList] = useState([]);\r\n const [compareIRIAvailableYearList, setCompareIRIAvailableYearList] = useState([]);\r\n const [IRIAvailableMonthList, setIRIAvailableMonthList] = useState([]);\r\n const [compareIRIAvailableMonthList, setCompareIRIAvailableMonthList] = useState([]);\r\n const [IRIAvailableLeadTimeList, setIRIAvailableLeadTimeList] = useState([]);\r\n const [compareIRIAvailableLeadTimeList, setCompareIRIAvailableLeadTimeList] = useState([]);\r\n const [IRIForecastTime, setIRIForecastTime] = useState({\r\n year: null,\r\n month: null,\r\n lead_time: null,\r\n });\r\n const [compareIRIForecastTime, setCompareIRIForecastTime] = useState({\r\n year: null,\r\n month: null,\r\n lead_time: null,\r\n });\r\n const [isHideToolBar, setIsHideToolBar] = useState(false);\r\n const [isCompareClicked, setIsCompareClicked] = useState(false);\r\n const [compareCordinates, setCompareCordinates] = useState([]);\r\n const [selectedRegionId, setSelectedRegionId] = useState('');\r\n const [forecastCompareLeadTimeList, setForecastCompareLeadTimeList] = useState([]);\r\n const [yearsList, setYearsList] = useState([]);\r\n const [indexLayers, setIndexLayers] = useState([]);\r\n const [layerControl, setLayerControl] = useState({\r\n firstLayer: {},\r\n secondLayer: {},\r\n });\r\n const [cordinateAndZoom, setCordinateAndZoom] = useState({\r\n cordinates: [28.259, 83.9461],\r\n locationCordinates: [28.259, 83.9461],\r\n markerCordinates: [28.259, 83.9461],\r\n zoom: 4.4,\r\n });\r\n const [cordinateAndZoomReset, setCordinateAndZoomReset] = useState({\r\n cordinates: [28.259, 83.9461],\r\n locationCordinates: [28.259, 83.9461],\r\n markerCordinates: [28.259, 83.9461],\r\n zoom: 4.4,\r\n });\r\n const [selectedForecastYearMonth, setSelectedForecastYearMonth] = useState({\r\n graph: {\r\n forecastYearMonth: moment().format('YYYY-MM'),\r\n },\r\n map: {\r\n forecastYearMonth: moment().format('YYYY-MM'),\r\n },\r\n });\r\n const [selectedForecastCompareYearMonth, setSelectedForecastCompareYearMonth] = useState({\r\n graph: {\r\n forecastYearMonth: moment().format('YYYY-MM'),\r\n },\r\n map: {\r\n forecastYearMonth: moment().format('YYYY-MM'),\r\n },\r\n });\r\n\r\n const [ecmwfProducts, setEcmwfProducts] = useState([]);\r\n const [selectedEcmwfProducts, setSelectedEcmwfProducts] = useState('');\r\n const [selectedDataSource, setSelectedDataSource] = useState({\r\n firstDataSource: [],\r\n secondDataSource: [],\r\n });\r\n const [staticResourceBaseTimeData, setStatiResourceBaseTimeData] = useState([]);\r\n const [validTimeOptions, setValidTimeOptions] = useState([]);\r\n const [validLayerOptions, setValidLayerOptions] = useState([]);\r\n const [selectedValidTime, setSelectedValidTime] = useState({});\r\n const [selectedValidLayer, setSelectedValidLayer] = useState([]);\r\n\r\n const [daysData, setDaysData] = useState({\r\n daysOptions: [],\r\n selectedDay: null,\r\n });\r\n const [quantileData, setQuantileData] = useState({\r\n quantileOptions: [],\r\n selectedQuantile: null,\r\n });\r\n\r\n const [forecastType, setForecastType] = useState({\r\n forecastTypeOptions: [],\r\n selectedForecastType: null,\r\n });\r\n\r\n const [selectedBasetime, setSelectedBaseTime] = useState({});\r\n\r\n const [staticResourceData, setStatiResourceData] = useState([]);\r\n const selectedParam_current = selectedParam;\r\n const selectedParam_prev = usePrevious(selectedParam_current);\r\n\r\n // state for noaa timeseries data\r\n const { Weather, boundries, ecmwfProductData, ecmwfControlData , isEcmwfDataByControlLoading} = useSelector(state => ({\r\n Weather: state.Weather,\r\n DroughtMonitor: state.DroughtMonitor,\r\n boundries: state.Map_Preference,\r\n ecmwfProductData: state?.Weather?.isEcmwfProductData?.data,\r\n ecmwfControlData: state?.Weather?.isEcmwfControlData,\r\n isEcmwfDataByControlLoading: state?.Weather?.isEcmwfDataByControlLoading,\r\n }));\r\n const nextProps = useSelector(state => ({\r\n isStaticResourceRequesting: state.staticResource.isStaticResourceRequesting,\r\n StaticResource: state.staticResource.staticResourceData || null,\r\n staticResourceDataError: state.staticResource.staticResourceDataError || null,\r\n id: state.staticResource.id,\r\n StaticResourceAllDateData: state.staticResource.staticResourceAllDateData,\r\n staticResourceYearData: state.staticResource.staticResourceYearData || null,\r\n }));\r\n\r\n //useeffect for getting map layers data from redux\r\n useEffect(() => {\r\n if (!isLogedIn()) {\r\n let path = window.location.pathname;\r\n history.push(`/login?prevPath=${path.substring(1, path.length)}`);\r\n }\r\n dispatch(getEcmwfProductsRequest({}));\r\n return () => {\r\n dispatch(getMapPreferencesSuccess(''));\r\n dispatch(getWeatherForecastDataSuccess(''));\r\n Cookies.remove('weather-forecast-default-param', { path: '/' });\r\n setShowCharts(false);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(selectedParam)) {\r\n if (!hasQueryParam) {\r\n if (selectedParam?.forecast_data_source_id === DATA_SOURCES.IRI.id) {\r\n dispatch(getIRIAvailableDatesDataRequest());\r\n }\r\n }\r\n }\r\n }, [selectedParam]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(compareDataSources)) {\r\n if (!hasQueryParam) {\r\n if (compareDataSources[0].id === DATA_SOURCES.IRI.id) {\r\n dispatch(getIRIAvailableDatesDataRequest());\r\n }\r\n }\r\n }\r\n }, [compareDataSources]);\r\n\r\n useEffect(() => {\r\n if (Weather.iriAvailableDatesData) {\r\n const {\r\n data: { result },\r\n } = Weather.iriAvailableDatesData;\r\n if (result) {\r\n setForecastAvailableDates(result);\r\n }\r\n }\r\n }, [Weather.iriAvailableDatesData]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(forecastAvailableDates)) {\r\n let list = [];\r\n forecastAvailableDates?.map(i => {\r\n list.push({\r\n id: i?.category,\r\n name: i?.category,\r\n value: i?.category,\r\n label: i?.category,\r\n data: i?.data,\r\n });\r\n });\r\n setIRIAvailableYearList(list);\r\n setCompareIRIAvailableYearList(list);\r\n }\r\n }, [forecastAvailableDates]);\r\n useEffect(() => {\r\n if (!_.isEmpty(IRIForecastTime.year)) {\r\n let data;\r\n let list = [];\r\n IRIAvailableYearList?.map(i => {\r\n if (i?.value === IRIForecastTime?.year?.value) {\r\n data = i?.data;\r\n }\r\n });\r\n data?.map(a => {\r\n list.push(handleForecastLeadMonthFormat(a));\r\n });\r\n setIRIAvailableMonthList(list);\r\n }\r\n }, [IRIForecastTime.year]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(compareIRIForecastTime.year)) {\r\n let data;\r\n let list = [];\r\n compareIRIAvailableYearList?.map(i => {\r\n if (i?.value === compareIRIForecastTime?.year?.value) {\r\n data = i?.data;\r\n }\r\n });\r\n data?.map(a => {\r\n list.push(handleForecastLeadMonthFormat(a));\r\n });\r\n setCompareIRIAvailableMonthList(list);\r\n }\r\n }, [compareIRIForecastTime.year]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(IRIForecastTime.month)) {\r\n let data;\r\n let list = [];\r\n IRIAvailableMonthList.map(i => {\r\n if (i?.value === IRIForecastTime.month?.value) {\r\n data = i?.data;\r\n }\r\n });\r\n data?.map(a => {\r\n list.push(handleForecastLeadTimeFormat(a));\r\n });\r\n setIRIAvailableLeadTimeList(list);\r\n }\r\n }, [IRIForecastTime.month]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(compareIRIForecastTime.month)) {\r\n let data;\r\n let list = [];\r\n compareIRIAvailableMonthList.map(i => {\r\n if (i?.value === compareIRIForecastTime.month?.value) {\r\n data = i?.data;\r\n }\r\n });\r\n data?.map(a => {\r\n list.push(handleForecastLeadTimeFormat(a));\r\n });\r\n setCompareIRIAvailableLeadTimeList(list);\r\n }\r\n }, [compareIRIForecastTime.month]);\r\n\r\n const handleForecastLeadMonthFormat = a => {\r\n let b;\r\n FORECAST_LEAD_TIME_LIST.map(i => {\r\n if (parseInt(i?.value) === parseInt(a?.category)) {\r\n b = {\r\n name: i?.name,\r\n value: i?.name,\r\n label: i?.name,\r\n id: i?.id,\r\n data: a?.data,\r\n };\r\n }\r\n });\r\n return b;\r\n };\r\n\r\n const handleForecastLeadTimeFormat = a => {\r\n let latest_list;\r\n let list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let option_list = list?.splice(parseInt(a?.forecast_time_month), 4);\r\n let new_list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let new_arr = new_list?.splice(parseInt(0), 4 - option_list.length);\r\n latest_list = option_list.concat(new_arr);\r\n latest_list?.map((i, index) => {\r\n i.name = i.name + '(' + `${index + 1} Month` + ')';\r\n i.indexValue = index + 1;\r\n });\r\n return latest_list[parseInt(a?.forecast_lead_time) - 1];\r\n };\r\n\r\n useEffect(() => {\r\n if (boundries?.mapPreferenceData) {\r\n setGetBoundariesData(boundries?.mapPreferenceData?.data?.result);\r\n }\r\n }, [boundries?.mapPreferenceData]);\r\n\r\n //handle time series data for iri\r\n useEffect(() => {\r\n if (Weather.iriTimeSeriesData) {\r\n if (Weather.iriTimeSeriesData?.data) {\r\n let { code } = Weather.iriTimeSeriesData?.data;\r\n if (code === 200) {\r\n let { result } = Weather.iriTimeSeriesData?.data;\r\n const keys = Object.keys(result);\r\n const parameter = IRI_PARAMETER_SLUG.find(item => item.api_slug === keys[0]);\r\n if (keys.length === 1 && !_.isEmpty(parameter)) {\r\n let attribute = keys[0];\r\n setIRITimeSeriesData(prev => {\r\n return {\r\n ...prev,\r\n [parameter.name]: result[attribute],\r\n };\r\n });\r\n }\r\n //setIRITimeSeriesData(result)\r\n } else {\r\n setIsGraphLoading(false);\r\n setErrorData({ showError: true, data: 'No records found. please try again' });\r\n }\r\n }\r\n }\r\n if (Weather.iriTimeSeriesDataError) {\r\n setIsGraphLoading(false);\r\n if (Weather.iriTimeSeriesDataError?.data) {\r\n if (Weather.iriTimeSeriesDataError?.data?.response) {\r\n let {\r\n data: { message },\r\n } = Weather.iriTimeSeriesDataError?.data?.response;\r\n setErrorData({ showError: true, data: message });\r\n }\r\n }\r\n }\r\n }, [Weather.iriTimeSeriesData, Weather.iriTimeSeriesDataError]);\r\n\r\n useEffect(() => {\r\n // let iriParameters = IRI_PARAMETER_SLUG.map(item => item.name);\r\n // let arr = [];\r\n if (!_.isEmpty(iriTimeSeriesData)) {\r\n // arr = iriParameters.map(item => iriTimeSeriesData.hasOwnProperty(item));\r\n // if (!arr.includes(false)) {\r\n setIsGraphLoading(false);\r\n setChartSeriesData(iriTimeSeriesData);\r\n //}\r\n }\r\n }, [iriTimeSeriesData]);\r\n\r\n useEffect(() => {\r\n if (selectedForecastCompareYearMonth) {\r\n //setSelectedFinalForercastLeadTime(null);\r\n let a = selectedForecastCompareYearMonth?.map?.forecastYearMonth.split('-')[1];\r\n let c = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let b = c?.splice(parseInt(a), 4);\r\n setForecastCompareLeadTimeList(b);\r\n }\r\n }, [selectedForecastCompareYearMonth]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(ecmwfProductData)) {\r\n let list = [];\r\n ecmwfProductData?.result?.map(i => {\r\n list.push({\r\n ...i,\r\n value: i.slug,\r\n label: i.name,\r\n });\r\n });\r\n setEcmwfProducts(list);\r\n setSelectedEcmwfProducts(list[0]);\r\n }\r\n }, [ecmwfProductData]);\r\n\r\n useEffect(() => {\r\n if (splitterRef && splitterRef.current) {\r\n if (errorData?.showError) {\r\n splitterRef.current.setState({ secondaryPaneSize: '30%' });\r\n } else {\r\n splitterRef.current.setState({ secondaryPaneSize: '70%' });\r\n }\r\n }\r\n }, [errorData]);\r\n\r\n useEffect(() => {\r\n if (getBoundariesData && getBoundariesData?.length) {\r\n let API_URL = [];\r\n mapPreferRefs.current = [];\r\n getBoundariesData?.map(item => {\r\n if (item?.data && item?.data.length) {\r\n item.data.map(boundary => {\r\n if (boundary?.boundary_data_url.length) {\r\n setGeoJsonData([]);\r\n setGeoJsonAllData([]);\r\n let mapPreferKeys = Object.keys(mapPreferences);\r\n if (mapPreferKeys) {\r\n mapPreferKeys.map(item => {\r\n let selectedLayer = mapPreferences[item];\r\n if (selectedLayer?.layer && selectedLayer?.layer?.current)\r\n selectedLayer?.layer?.current?.clearLayers();\r\n selectedLayer.color = '';\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [item]: selectedLayer,\r\n };\r\n });\r\n });\r\n }\r\n setMapPreferenceGeoJsonloading(true);\r\n let config = {\r\n name: boundary?.boundarytype?.slug,\r\n id: boundary?.boundarytype_id,\r\n color: boundary?.boundarytype?.color?.code,\r\n category: boundary?.category,\r\n country_id: boundary?.country_id,\r\n };\r\n if (\r\n currentUserLocation === DEFAULT_COUNTRY.name &&\r\n selectedLocation?.country?.name === SOUTH_ASIA_CONST.name &&\r\n boundary?.boundarytype?.slug === MAP_PREFERENCES_lABELS.COUNTRY\r\n ) {\r\n API_URL.push(AXIOS_INSTANCE.get(boundary?.boundary_data_india_url, config));\r\n } else {\r\n API_URL.push(AXIOS_INSTANCE.get(boundary?.boundary_data_url, config));\r\n }\r\n } else {\r\n let ref = React.createRef();\r\n ref.current = {\r\n boundary_id: boundary?.boundarytype_id,\r\n layer: React.createRef(),\r\n };\r\n mapPreferRefs.current.push(ref);\r\n }\r\n });\r\n }\r\n });\r\n Promise.all(API_URL).then(response => {\r\n let res = JSON.parse(JSON.stringify(response));\r\n setMapPreferenceGeoJsonloading(false);\r\n setGeoJsonLayerData(res);\r\n });\r\n }\r\n }, [getBoundariesData]);\r\n\r\n useEffect(() => {\r\n let selectedGeoJsonData = [];\r\n if (geoJsonLayersData?.length && geoJsonData?.length) {\r\n geoJsonData?.map(item => {\r\n let filteredObj = geoJsonLayersData?.find(\r\n layer => layer.config.id === item.id && layer.config.country_id === item.country_id,\r\n );\r\n if (!_.isEmpty(filteredObj)) {\r\n filteredObj.fromMapPreferences = item.fromMapPreferences;\r\n selectedGeoJsonData.push(filteredObj);\r\n }\r\n });\r\n } else {\r\n selectedGeoJsonData = [];\r\n }\r\n setGeoJsonAllData(selectedGeoJsonData);\r\n }, [geoJsonLayersData, geoJsonData]);\r\n\r\n useEffect(() => {\r\n if (selectedForecastYearMonth) {\r\n //setSelectedForecastLeadTime(null)\r\n let month = selectedForecastYearMonth?.map?.forecastYearMonth.split('-')[1];\r\n let list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let option_list = list?.splice(parseInt(month), 4);\r\n let latest_list;\r\n if (month >= 9) {\r\n let new_list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let new_arr = new_list?.splice(parseInt(0), 4 - option_list.length);\r\n latest_list = option_list.concat(new_arr);\r\n } else {\r\n latest_list = option_list;\r\n }\r\n latest_list?.map((i, index) => {\r\n i.name = i.name + '(' + `${index + 1}.0` + ')';\r\n });\r\n setForecastLeadTimeList(latest_list);\r\n }\r\n }, [selectedForecastYearMonth]);\r\n\r\n useEffect(() => {\r\n if (selectedForecastCompareYearMonth) {\r\n // setSelectedFinalForercastLeadTime(null)\r\n let month = selectedForecastCompareYearMonth?.map?.forecastYearMonth.split('-')[1];\r\n let list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let option_list = list?.splice(parseInt(month), 4);\r\n let latest_list;\r\n if (month >= 9) {\r\n let new_list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let new_arr = new_list?.splice(parseInt(0), 4 - option_list.length);\r\n latest_list = option_list.concat(new_arr);\r\n } else {\r\n latest_list = option_list;\r\n }\r\n latest_list?.map((i, index) => {\r\n i.name = i.name + '(' + `${index + 1}.0` + ')';\r\n });\r\n setForecastCompareLeadTimeList(latest_list);\r\n }\r\n }, [selectedForecastCompareYearMonth]);\r\n\r\n useEffect(() => {\r\n let search = window.location.search;\r\n let URLParams = new URLSearchParams(search);\r\n let paramId;\r\n let isDefaultSourceId = URLParams.get('isDefaultSelectedSourceId');\r\n setIsDefaultSelectedSourceId(isDefaultSourceId);\r\n paramId = URLParams.get('dataSourceId');\r\n STATIC_RESOURCE_GET_CATEGORY_LIST.map(item => {\r\n item.data.map(i => {\r\n if (i.forecast_data_source.id === paramId) {\r\n if (i.forecast_data_source.type === 'static') {\r\n setSelectedDataSourceId(paramId);\r\n setUrlDataSourceId(paramId);\r\n setHasQueryParam(true);\r\n setShowEcmwf(!(i.forecast_data_source?.name === 'ECMWF (Static)'));\r\n } else {\r\n setHasQueryParam(false);\r\n setShowEcmwf(true);\r\n setUrlDataSourceId('');\r\n setSelectedDataSourceId(paramId);\r\n }\r\n }\r\n });\r\n });\r\n }, [window.location.href]);\r\n\r\n useEffect(() => {\r\n if (nextProps.staticResourceYearData) {\r\n const {\r\n data: { result },\r\n } = nextProps.staticResourceYearData;\r\n if (result?.length !== 0) {\r\n let arr = [];\r\n result?.map(i => {\r\n arr.push({\r\n value: i,\r\n label: i,\r\n });\r\n });\r\n setYearsList(arr);\r\n }\r\n }\r\n }, [nextProps.staticResourceYearData]);\r\n\r\n //global function to compare props\r\n function usePrevious(value) {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n }\r\n\r\n useEffect(() => {\r\n requestBody.group_date = '';\r\n setRequestBody({ ...requestBody });\r\n if (hasQueryParam) {\r\n let req_body = {\r\n forecast_data_source_id: urlDataSourceId,\r\n };\r\n dispatch(staticResourceYearRequest(req_body));\r\n }\r\n }, [urlDataSourceId]);\r\n\r\n useEffect(() => {\r\n if (hasQueryParam) {\r\n if (\r\n !_.isEmpty(requestBody?.parameter_id) &&\r\n !_.isEmpty(requestBody?.forecast_data_source_id) &&\r\n !_.isEmpty(requestBody?.group_date)\r\n ) {\r\n dispatch(staticResourceRequest(requestBody));\r\n }\r\n }\r\n }, [requestBody]);\r\n\r\n useEffect(() => {\r\n if (hasQueryParam) {\r\n if (\r\n JSON.stringify(selectedParam_current?.parameter_id) !==\r\n JSON.stringify(selectedParam_prev?.parameter_id)\r\n ) {\r\n if (\r\n selectedDataSourceId &&\r\n selectedParam_current?.parameter_id &&\r\n requestBody?.group_date\r\n ) {\r\n setRequestBody({\r\n forecast_data_source_id: [selectedDataSourceId],\r\n parameter_id: [selectedParam_current?.parameter_id],\r\n group_date: requestBody.group_date,\r\n order_by: 'start_date',\r\n page: 1,\r\n });\r\n }\r\n }\r\n }\r\n }, [selectedParam_current?.parameter_id, selectedParam_prev?.parameter_id]);\r\n\r\n useEffect(() => {\r\n if (selectedLocation?.country) {\r\n setMapPreferencesData([]);\r\n removeGeoJsonLayer(mapPreferences);\r\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\r\n let updatedLegend = [];\r\n if (selectedLegend.length) {\r\n updatedLegend = selectedLegend?.map((value, i) => {\r\n if (value.add) value.add = false;\r\n return value;\r\n });\r\n\r\n setSelectedMapPreferLegendData(updatedLegend);\r\n }\r\n }\r\n }, [selectedLocation?.country]);\r\n\r\n //useeffect to reset all the map preferences states data when country gets changed\r\n useEffect(() => {\r\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\r\n setMapPreferencesData([]);\r\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\r\n let compareArr = [];\r\n // let updatedLegendArray = [];\r\n\r\n let updatedLegend = [];\r\n if (selectedLegend.length) {\r\n updatedLegend = selectedLegend?.map((value, i) => {\r\n if (value.add) value.add = false;\r\n return value;\r\n });\r\n setSelectedMapPreferLegendData(updatedLegend);\r\n }\r\n let previousParamRef = '';\r\n if (selectedParams.length) {\r\n previousParamRef = layerRef.current[selectedParams[0]?.parameter?.paramIndex];\r\n }\r\n if (previousParamRef && previousParamRef.current) {\r\n removeLayers(previousParamRef);\r\n }\r\n let legendArray = [...selectedParamLegendData];\r\n let compareLegendArray = [...compareParamLegendData];\r\n if (selectedParamLegendData.length) {\r\n // updatedLegendArray = legendArray?.map((value,i)=>{\r\n // if(value.add) value.add = false;\r\n // return value;\r\n // })\r\n legendArray.forEach((value, i) => {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n }\r\n if (compareParamLegendData.length) {\r\n compareArr = compareLegendArray?.map(value => {\r\n if (value.add) value.add = false;\r\n return value;\r\n });\r\n }\r\n if (!_.isEmpty(layerControl?.firstLayer)) {\r\n map?.removeControl(layerControl?.firstLayer);\r\n }\r\n if (!_.isEmpty(layerControl?.secondLayer)) {\r\n map?.removeControl(layerControl?.secondLayer);\r\n }\r\n if (!_.isEmpty(mapControl)) {\r\n map?.removeControl(mapControl);\r\n }\r\n setMapControl('');\r\n setLayerControl({\r\n firstLayer: {},\r\n secondLayer: {},\r\n });\r\n // setSelectedParamLegendData(updatedLegendArray);\r\n setSelectedParamLegendData(legendArray);\r\n setCompareParamLegendData(compareArr);\r\n }, [selectedRegionId]);\r\n\r\n useEffect(() => {\r\n if (isOpenWeather) {\r\n const leafletEle = document.getElementById('leaflet-map');\r\n if (leafletEle) {\r\n leafletEle.classList.add('open-weather-polygon-style');\r\n }\r\n } else {\r\n const leafletEle = document.getElementById('leaflet-map');\r\n if (leafletEle) {\r\n leafletEle.classList.remove('open-weather-polygon-style');\r\n }\r\n }\r\n }, [isOpenWeather]);\r\n\r\n useEffect(() => {\r\n if (isCompareClicked && compareDataSources?.length) {\r\n if (compareParamLegendData?.length && compareParamLegendData?.some(i => i.add)) {\r\n const leafletEle = document.getElementsByClassName('left-legend-style');\r\n\r\n if (leafletEle && leafletEle[0]) {\r\n leafletEle[0].classList.add('left-legend-pos-st');\r\n }\r\n }\r\n if (\r\n selectedMapPreferLegendData?.length &&\r\n selectedMapPreferLegendData?.some(i => i.add) &&\r\n compareParamLegendData?.length &&\r\n compareParamLegendData?.some(i => i.add)\r\n ) {\r\n const discreteLeafletEle = document.getElementsByClassName('left-discrete-legend-style');\r\n if (discreteLeafletEle && discreteLeafletEle[0]) {\r\n discreteLeafletEle[0].classList.add('left-discrete-legend-pos-st');\r\n }\r\n }\r\n } else if (compareParamLegendData?.every(i => !i.add) && !isCompareClicked) {\r\n const leafletEle = document.getElementsByClassName('left-legend-style');\r\n const discreteLeafletEle = document.getElementsByClassName('left-discrete-legend-style');\r\n if (leafletEle && leafletEle[0]) {\r\n leafletEle[0].classList.remove('left-legend-pos-st');\r\n }\r\n if (discreteLeafletEle && discreteLeafletEle[0]) {\r\n discreteLeafletEle[0].classList.remove('left-discrete-legend-pos-st');\r\n }\r\n }\r\n }, [isCompareClicked, compareDataSources, compareParamLegendData, selectedMapPreferLegendData]);\r\n\r\n useEffect(() => {\r\n if (forecastData) {\r\n forecastData.map(item => {\r\n let val = {};\r\n for (let [key, value] of Object.entries(item)) {\r\n val = value;\r\n if (val) {\r\n if (Array.isArray(val)) {\r\n val[0].name = key;\r\n } else {\r\n val.name = key;\r\n }\r\n }\r\n }\r\n setSelectedParamLegendData([]);\r\n setWeatherData({\r\n ...dateSourceWeatherData,\r\n data: Array.isArray(val) ? val[0] : val,\r\n });\r\n });\r\n }\r\n }, [forecastData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.isStaticResourceRequesting) {\r\n setStaticResourceWeekData(null);\r\n }\r\n if (nextProps.StaticResource) {\r\n const {\r\n data: { result },\r\n } = nextProps.StaticResource;\r\n if (result && result.results && result.results[0]) {\r\n setStaticResourceWeekData(result.results);\r\n setStaticResourceSelectedLocation(\r\n result.results[0].region_name\r\n ? result.results[0].region_name\r\n : result.results[0].country_name,\r\n );\r\n setStaticResourceImage(result.results[0].upload_image);\r\n setStaticResourceTitle(result.results[0].forecast_data_source_name);\r\n } else {\r\n setStaticResourceImage('');\r\n setStaticResourceWeekData([]);\r\n setStaticResourceTitle('');\r\n }\r\n } else if (nextProps.staticResourceDataError) {\r\n setStaticResourceImage('');\r\n setStaticResourceWeekData([]);\r\n setStaticResourceTitle('');\r\n }\r\n }, [\r\n nextProps.StaticResource,\r\n nextProps.staticResourceDataError,\r\n nextProps.isStaticResourceRequesting,\r\n ]);\r\n\r\n useEffect(() => {\r\n if (nextProps.StaticResourceAllDateData) {\r\n setIsLoading(false);\r\n const {\r\n data: { result },\r\n } = nextProps.StaticResourceAllDateData;\r\n if (result?.length) {\r\n setStaticResourceDates(result);\r\n } else {\r\n setStaticResourceWeekData([]);\r\n setStaticResourceDates([]);\r\n }\r\n } else {\r\n setStaticResourceDates([]);\r\n setIsLoading(false);\r\n }\r\n }, [nextProps.StaticResourceAllDateData]);\r\n\r\n // Handle timeseries data for NOAA GFS\r\n useEffect(() => {\r\n if (Weather.noaaTimeSeriesDataRequesting) {\r\n setIsGraphLoading(true);\r\n setChartSeriesData([]);\r\n }\r\n if (Weather.noaaTimeSeriesData) {\r\n if (Weather.noaaTimeSeriesData.data) {\r\n let { code } = Weather.noaaTimeSeriesData?.data;\r\n if (code === 200) {\r\n let { result } = Weather.noaaTimeSeriesData?.data;\r\n const keys = Object.keys(result);\r\n const parameter = NOAA_PARAMETER_SLUG.find(item => item.api_slug === keys[0]);\r\n if (keys.length === 1 && !_.isEmpty(parameter)) {\r\n let attribute = keys[0];\r\n setNoaaTimeSeriesData(prev => {\r\n return {\r\n ...prev,\r\n [parameter.name]: result[attribute],\r\n };\r\n });\r\n }\r\n } else {\r\n setIsGraphLoading(false);\r\n setErrorData({ showError: true, data: 'No records found. please try again' });\r\n }\r\n }\r\n } else if (Weather.noaaTimeSeriesDataError) {\r\n if (Weather?.noaaTimeSeriesDataError?.data) {\r\n let noaaData = Weather.noaaTimeSeriesDataError?.data || '';\r\n if (noaaData?.response) {\r\n if (noaaData?.response?.data) {\r\n setErrorData({ showError: true, data: noaaData?.response?.data.message });\r\n }\r\n } else {\r\n setErrorData({ showError: true, data: t('DROUGHT_MONITORING.API_FAILURE_ERROR') });\r\n }\r\n }\r\n setIsGraphLoading(false);\r\n }\r\n }, [\r\n Weather.noaaTimeSeriesDataRequesting,\r\n Weather.noaaTimeSeriesData,\r\n Weather.noaaTimeSeriesDataError,\r\n ]);\r\n\r\n //handle time series data for erpas\r\n useEffect(() => {\r\n if (Weather.erpasTimeSeriesData) {\r\n if (Weather.erpasTimeSeriesData?.data) {\r\n let { code } = Weather.erpasTimeSeriesData?.data;\r\n if (code === 200) {\r\n let { result } = Weather.erpasTimeSeriesData?.data;\r\n const keys = Object.keys(result);\r\n const parameter = ERPAS_PARAMETER_SLUG.find(item => item.api_slug === keys[0]);\r\n if (keys.length === 1 && !_.isEmpty(parameter)) {\r\n let attribute = keys[0];\r\n setErpasTimeSeriesData(prev => {\r\n return {\r\n ...prev,\r\n [parameter.name]: result[attribute],\r\n };\r\n });\r\n }\r\n } else {\r\n setIsGraphLoading(false);\r\n setErrorData({ showError: true, data: 'No records found. please try again' });\r\n }\r\n }\r\n }\r\n if (Weather.erpasTimeSeriesDataError) {\r\n setIsGraphLoading(false);\r\n if (Weather.erpasTimeSeriesDataError.data) {\r\n if (Weather.erpasTimeSeriesDataError.data.response) {\r\n let {\r\n data: { message },\r\n } = Weather.erpasTimeSeriesDataError.data.response;\r\n setErrorData({ showError: true, data: message });\r\n } else {\r\n setErrorData({ showError: true, data: t('DROUGHT_MONITORING.API_FAILURE_ERROR') });\r\n }\r\n }\r\n }\r\n }, [Weather.erpasTimeSeriesData, Weather.erpasTimeSeriesDataError]);\r\n\r\n useEffect(() => {\r\n if (\r\n noaaTimeSeriesData?.Temperature &&\r\n noaaTimeSeriesData?.Humidity &&\r\n noaaTimeSeriesData?.Precipitation &&\r\n noaaTimeSeriesData?.Wind_speed\r\n ) {\r\n setIsGraphLoading(false);\r\n setChartSeriesData(noaaTimeSeriesData);\r\n }\r\n }, [noaaTimeSeriesData]);\r\n\r\n useEffect(() => {\r\n let erpasParameters = ERPAS_PARAMETER_SLUG.map(item => item.name);\r\n let arr = [];\r\n if (!_.isEmpty(erpasTimeSeriesData)) {\r\n arr = erpasParameters.map(item => erpasTimeSeriesData.hasOwnProperty(item));\r\n if (!arr.includes(false)) {\r\n setIsGraphLoading(false);\r\n setChartSeriesData(erpasTimeSeriesData);\r\n }\r\n }\r\n }, [erpasTimeSeriesData]);\r\n\r\n useEffect(() => {\r\n if (Weather.weatherForecastData) {\r\n if (Weather.weatherForecastData.data) {\r\n setIsLoading(false);\r\n const { result } = Weather.weatherForecastData.data;\r\n if (!isOpenWeather) {\r\n setForecastData(result);\r\n }\r\n setCompareParamLegendData([]);\r\n result.map(item => {\r\n if (item.Open_Weather) {\r\n const OpenWeather = item.Open_Weather;\r\n if (Array.isArray(OpenWeather)) {\r\n if (OpenWeather.some(x => x.cod === '400')) {\r\n const errorCode = OpenWeather.find(x => x.cod === '400');\r\n setIsGraphLoading(false);\r\n //showError(`No record found.${errorCode.message}`);\r\n setErrorData({ showError: true, data: errorCode?.message });\r\n setGraphData({\r\n ...graphData,\r\n OPEN_WEATHER_API: [],\r\n });\r\n setChartSeriesData([]);\r\n return false;\r\n }\r\n } else if (OpenWeather?.code) {\r\n setIsGraphLoading(false);\r\n //showError(`No record found.${errorCode.message}`);\r\n setErrorData({ showError: true, data: OpenWeather?.message });\r\n setGraphData({\r\n ...graphData,\r\n OPEN_WEATHER_API: [],\r\n });\r\n setChartSeriesData([]);\r\n return false;\r\n } else {\r\n setIsGraphLoading(false);\r\n setGraphData({\r\n ...graphData,\r\n OPEN_WEATHER_API: OpenWeather,\r\n });\r\n setChartSeriesData(item.Open_Weather?.hourly);\r\n }\r\n }\r\n });\r\n }\r\n } else if (Weather.weatherForecastDataError) {\r\n if (Weather.weatherForecastDataError) {\r\n let {\r\n data: { response },\r\n } = Weather.weatherForecastDataError;\r\n if (!_.isEmpty(response)) {\r\n if (!_.isEmpty(response?.data?.errors)) {\r\n showError(Object.values(response?.data?.errors)[0]);\r\n } else {\r\n showError(response?.data?.message);\r\n }\r\n } else {\r\n setIsGraphLoading(false);\r\n setErrorData({ showError: true, data: t('DROUGHT_MONITORING.API_FAILURE_ERROR') });\r\n }\r\n } else {\r\n showError('No records found. please try again');\r\n }\r\n\r\n removeMapLayers(layerControl, compareParamLegendData, selectedParamLegendData);\r\n setIsLoading(false);\r\n } else if (Weather.weatherForecastDataNetworkError) {\r\n setIsLoading(false);\r\n }\r\n }, [\r\n Weather.weatherForecastData,\r\n Weather.isWeatherForecastRequesting,\r\n Weather.weatherForecastDataError,\r\n Weather.weatherForecastDataNetworkError,\r\n ]);\r\n\r\n useEffect(() => {\r\n setShowCharts(false);\r\n }, [\r\n selectedParam,\r\n country,\r\n dataSources,\r\n initialSelectedDate,\r\n temporalAggregation,\r\n range,\r\n region,\r\n ]);\r\n\r\n useEffect(() => {\r\n let selectedLegend = [...selectedParamLegendData];\r\n let compareLegend = [...compareParamLegendData];\r\n let previousParamRef = '';\r\n let updatedCompareLegend = [];\r\n if (selectedParams.length) {\r\n previousParamRef = layerRef.current[selectedParams[0]?.parameter?.paramIndex];\r\n }\r\n if (selectedLegend.length) {\r\n if (selectedLegend.length) {\r\n selectedLegend.forEach(function(value, i) {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n removeLegend(selectedParamLegendData);\r\n const defaultChartTimeRange = renderGenericDateFormat(new Date());\r\n setSelectedChartTimeRange(defaultChartTimeRange);\r\n }\r\n }\r\n\r\n updatedCompareLegend = compareLegend?.map(value => {\r\n if (value.add) value.add = false;\r\n return value;\r\n });\r\n setCompareParamLegendData(updatedCompareLegend);\r\n\r\n removeLayers(previousParamRef);\r\n if (!_.isEmpty(layerControl?.firstLayer)) {\r\n map?.removeControl(layerControl?.firstLayer);\r\n }\r\n if (!_.isEmpty(layerControl?.secondLayer)) {\r\n map?.removeControl(layerControl?.secondLayer);\r\n }\r\n if (!_.isEmpty(mapControl)) {\r\n map?.removeControl(mapControl);\r\n }\r\n setMapControl('');\r\n setLayerControl({\r\n firstLayer: {},\r\n secondLayer: {},\r\n });\r\n dispatch(getWeatherForecastDataSuccess(''));\r\n setWeatherData('');\r\n setParameterData([]);\r\n }, [dataSources]);\r\n\r\n useEffect(() => {\r\n if (initialParams && initialParams?.length) {\r\n if (compareDataSources?.length) {\r\n if (compareParams && compareParams?.length) {\r\n handleCommonParameters(compareDataSources, initialParams, compareParams);\r\n }\r\n }\r\n }\r\n }, [dataSources, initialParams]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(mapControl)) {\r\n mapControl?.on('dividermove', map.dragging.disable());\r\n } else if (!_.isEmpty(map)) {\r\n map?.dragging?.enable();\r\n }\r\n }, [mapControl]);\r\n\r\n useEffect(() => {\r\n if (mapPreferencesData?.length) {\r\n let MapPrefereArr = [];\r\n mapPreferencesData?.map(item => {\r\n let legendItem = JSON.parse(JSON.stringify(item.result));\r\n legendItem.id = item?.dataSource;\r\n legendItem.dataSource =\r\n item.slug === MAP_PREFERENCES_lABELS.JRC\r\n ? t('WEATHER_FORECAST.MAP_PREFERENCES.WATER_OCCURRENCE')\r\n : item.slug === MAP_PREFERENCES_lABELS.MOD44\r\n ? t('WEATHER_FORECAST.MAP_PREFERENCES.PERMANENT_WATER')\r\n : item?.category;\r\n legendItem.parameter = item?.legendName;\r\n legendItem.add = true;\r\n legendItem.measure = legendItem.units;\r\n legendItem.isCompare = false;\r\n legendItem.id = item?.dataSource;\r\n legendItem.legendId = item.id;\r\n legendItem.fromMapPreferences = true;\r\n if (selectedMapPreferLegendData?.length) {\r\n let isDuplicate = selectedMapPreferLegendData?.find(\r\n x => x.legendId === item.id && item.add === true,\r\n );\r\n if (_.isEmpty(isDuplicate)) {\r\n MapPrefereArr.push(legendItem);\r\n }\r\n } else {\r\n MapPrefereArr.push(legendItem);\r\n }\r\n });\r\n setSelectedMapPreferLegendData(MapPrefereArr);\r\n }\r\n }, [mapPreferencesData]);\r\n\r\n useEffect(() => {\r\n if (compareDataSources?.length) {\r\n if (compareParams && compareParams?.length) {\r\n if (initialParams && initialParams?.length) {\r\n handleCommonParameters(compareDataSources, compareParams, initialParams);\r\n }\r\n }\r\n }\r\n }, [compareDataSources, compareParams]);\r\n\r\n useEffect(() => {\r\n if (layerRef?.current?.length) {\r\n const currentParamRef = layerRef.current[selectedParam?.parameter?.paramIndex];\r\n if (!_.isEmpty(currentParamRef) && !_.isEmpty(currentParamRef?.current)) {\r\n currentParamRef?.current?.eachLayer(layer => {\r\n setMapLayerOpacity({ layer });\r\n });\r\n }\r\n }\r\n }, [layerRef?.current]);\r\n // useEffect(() => {\r\n // if (!_.isEmpty(mapLayerOpacity) && !_.isEmpty(mapLayerOpacity?.layer)) {\r\n // if (!_.isEmpty(opacityControl)) map?.removeControl(opacityControl);\r\n // let customOpacityControl = '';\r\n // customOpacityControl = L?.control?.opacity(mapLayerOpacity, {\r\n // collapsed: false,\r\n // position: 'topright',\r\n // });\r\n // setOpacityControl(customOpacityControl);\r\n // if (!_.isEmpty(map) && !_.isEmpty(map?._layers)) {\r\n // if (!_.isEmpty(customOpacityControl)) {\r\n // customOpacityControl?.addTo(map);\r\n // }\r\n // }\r\n // }\r\n // }, [mapLayerOpacity]);\r\n\r\n const removeGeoJsonLayer = mapPreferences => {\r\n let mapPreferKeys = Object.keys(mapPreferences);\r\n if (mapPreferKeys) {\r\n mapPreferKeys.map(item => {\r\n let selectedLayer = mapPreferences[item];\r\n if (selectedLayer?.layer && selectedLayer?.layer?.current)\r\n selectedLayer?.layer?.current?.clearLayers();\r\n selectedLayer.color = '';\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [item]: selectedLayer,\r\n };\r\n });\r\n });\r\n }\r\n };\r\n\r\n const getMapPreferencesGeojsonData = geoJsonList => {\r\n let data = JSON.parse(JSON.stringify(geoJsonList));\r\n removeGeoJsonLayer(mapPreferences);\r\n setGeoJsonData(data);\r\n };\r\n\r\n const handleCommonParameters = (compareSource, comparePar, param) => {\r\n if (compareSource?.length) {\r\n if (comparePar && comparePar?.length) {\r\n if (param && param?.length) {\r\n let paramArr = [];\r\n let commonParam = JSON.parse(JSON.stringify(param[0]));\r\n commonParam.parameterData = [];\r\n param[0]?.parameterData?.map(item => {\r\n comparePar[0]?.parameterData?.map(compareItem => {\r\n let filteredObj = JSON.parse(JSON.stringify(item));\r\n const filteredParams = item?.parameter.filter(o1 =>\r\n compareItem?.parameter.some(o2 => o1.parameter_id === o2.parameter_id),\r\n );\r\n if (filteredParams?.length) {\r\n filteredObj.parameter = filteredParams;\r\n commonParam?.parameterData?.push(filteredObj);\r\n }\r\n });\r\n });\r\n paramArr.push(commonParam);\r\n setParams(paramArr);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const handleMapModel = () => {\r\n setIsOpenMapModel(!isOpenMapModel);\r\n };\r\n\r\n useEffect(() => {\r\n let selectedParamArr = selectedParams;\r\n let legendArray = selectedParamLegendData;\r\n let compareLegendArray = _.cloneDeep(compareParamLegendData);\r\n if (dateSourceWeatherData?.data) {\r\n const { data } = dateSourceWeatherData;\r\n let legendObj = {};\r\n let compareObj = {};\r\n let selectedParamItem = '';\r\n let opacityControl = '';\r\n if (selectedParamArr[0] && !_.isEmpty(selectedParamArr[0])) {\r\n selectedParamItem = selectedParamArr[0]?.parameter;\r\n }\r\n let previousParamRef = layerRef.current[selectedParamItem?.paramIndex];\r\n const currentParamRef = layerRef.current[selectedParam?.parameter?.paramIndex];\r\n let item = _.cloneDeep(selectedParam);\r\n if (item?.parameter?.parameter_type) {\r\n let arr1 = [];\r\n let updatedName = '';\r\n const [first, ...rest] = item?.parameter?.name?.split(' ');\r\n arr1?.push(first);\r\n\r\n if (arr1?.length) {\r\n arr1?.push(item?.parameter?.parameter_type);\r\n }\r\n updatedName = arr1?.concat(rest)?.join(' ');\r\n item.parameter.name = updatedName;\r\n }\r\n const paramName = item?.parameter?.name;\r\n let legendData = {};\r\n if (Array.isArray(data)) {\r\n if (data[0]?.map_data?.code === 400 || data[1]?.map_data?.code === 400) {\r\n const filteredMapData = data.find(i => i?.map_data?.code === 400);\r\n showError(filteredMapData?.map_data?.message);\r\n return false;\r\n }\r\n compareObj = data[0]?.map_data;\r\n compareObj.measure = data[0]?.map_data?.units;\r\n compareObj.dataSource = dataSources[0]?.name;\r\n compareObj.name = paramName;\r\n compareObj.parameter =\r\n DATA_SOURCES?.IRI.id === dataSources[0]?.id ? DATA_SOURCES?.IRI.parameterName : paramName;\r\n compareObj.add = true;\r\n compareObj.isCompare = true;\r\n compareObj.id = paramName;\r\n compareObj.fromMapPreferences = false;\r\n\r\n if (DATA_SOURCES?.IRI.id === dataSources[0]?.id) {\r\n const iriDateRanger = iriDate(IRIForecastTime, IRIAvailableLeadTimeList);\r\n compareObj.selectedDates = {\r\n startDate: iriDateRanger?.startDate,\r\n endDate: iriDateRanger?.endDate,\r\n };\r\n compareObj.forecastMonth = IRIForecastTime?.month?.value;\r\n } else {\r\n compareObj.selectedDates = {\r\n startDate: moment(initialSelectedDate.map.startDate).format('DD-MM-YYYY'),\r\n endDate: moment(initialSelectedDate.map.endDate).format('DD-MM-YYYY'),\r\n };\r\n }\r\n legendObj = data[1]?.map_data;\r\n legendObj.measure = data[1]?.map_data?.units;\r\n legendObj.dataSource = compareDataSources[0]?.name;\r\n legendObj.name = paramName;\r\n legendObj.parameter =\r\n DATA_SOURCES?.IRI.id === compareDataSources[0]?.id\r\n ? DATA_SOURCES?.IRI.parameterName\r\n : paramName;\r\n legendObj.isCompare = false;\r\n legendObj.id = paramName;\r\n legendObj.fromMapPreferences = false;\r\n\r\n if (currentParamRef.current) {\r\n currentParamRef.current._url = data[0].map_data.map_url;\r\n currentParamRef.current._url1 = data[1].map_data.map_url;\r\n if (previousParamRef?.current?._url1?.length) {\r\n if (!_.isEmpty(layerControl?.firstLayer)) {\r\n map?.removeControl(layerControl?.firstLayer);\r\n }\r\n if (!_.isEmpty(layerControl?.secondLayer)) {\r\n map?.removeControl(layerControl?.secondLayer);\r\n }\r\n if (!_.isEmpty(mapControl)) {\r\n map?.removeControl(mapControl);\r\n }\r\n legendArray.forEach((value, i) => {\r\n if (value.add) value.add = false;\r\n });\r\n }\r\n if (currentParamRef.current._url1) {\r\n const firstLayer = L.tileLayer(currentParamRef.current._url);\r\n firstLayer.addTo(map);\r\n const secondLayer = L.tileLayer(currentParamRef.current._url1);\r\n secondLayer.addTo(map);\r\n\r\n let updatedIndexLayer = [...indexLayers];\r\n updatedIndexLayer.push(firstLayer);\r\n updatedIndexLayer.push(secondLayer);\r\n setIndexLayers(updatedIndexLayer);\r\n\r\n const control = L.control.sideBySide(firstLayer, secondLayer);\r\n setLayerControl({ firstLayer, secondLayer });\r\n setMapControl(control);\r\n control.addTo(map);\r\n }\r\n }\r\n } else {\r\n let map_data = '';\r\n if (data?.hasOwnProperty('map_url')) {\r\n map_data = data;\r\n } else if (data?.map_data && !_.isEmpty(data.map_data)) {\r\n map_data = data?.map_data;\r\n } else if (data?.code === 400) {\r\n showError(data?.message);\r\n return false;\r\n }\r\n if (map_data.code === 400) {\r\n if (map_data?.message) {\r\n showError(map_data.message);\r\n } else {\r\n showError('No record found . Please select different date range');\r\n }\r\n return false;\r\n }\r\n legendObj = { ...map_data };\r\n legendObj.name = paramName;\r\n legendObj.parameter =\r\n DATA_SOURCES?.IRI.id === dataSources[0]?.id ? DATA_SOURCES?.IRI.parameterName : paramName;\r\n legendObj.measure = map_data?.units;\r\n legendObj.dataSource = dataSources[0]?.name;\r\n legendObj.isCompare = false;\r\n legendObj.id = paramName;\r\n legendObj.fromMapPreferences = false;\r\n\r\n if (DATA_SOURCES?.IRI.id === dataSources[0]?.id) {\r\n const iriDateRanger = iriDate(IRIForecastTime, IRIAvailableLeadTimeList);\r\n legendObj.selectedDates = {\r\n startDate: iriDateRanger?.startDate,\r\n endDate: iriDateRanger?.endDate,\r\n };\r\n legendObj.forecastMonth = IRIForecastTime?.month?.value;\r\n } else {\r\n legendObj.selectedDates = {\r\n startDate: moment(initialSelectedDate.map.startDate).format('DD-MM-YYYY'),\r\n endDate: moment(initialSelectedDate.map.endDate).format('DD-MM-YYYY'),\r\n };\r\n }\r\n if (map?.opacityControl) {\r\n map.removeControl(opacityControl);\r\n }\r\n // TODO: need to change looping through layers\r\n if (currentParamRef && currentParamRef.current) {\r\n currentParamRef.current?.eachLayer(layer => {\r\n if (map_data) {\r\n layer.setUrl(map_data?.map_url);\r\n let updatedIndexLayer = [...indexLayers];\r\n updatedIndexLayer.push(layer);\r\n setMapUrl({ name: selectedParam?.parameter?.name, url: map_data?.map_url, layer });\r\n setMapLayerOpacity({\r\n layer,\r\n });\r\n setIndexLayers(updatedIndexLayer);\r\n }\r\n });\r\n }\r\n }\r\n //need to optimize this redundant part\r\n if (!_.isEmpty(selectedParam)) {\r\n const index = legendArray.findIndex(\r\n item => item.name === paramName && item.dataSource === legendObj.dataSource,\r\n );\r\n if (!_.isEmpty(legendObj)) {\r\n if (!selectedParamArr.length || index === -1) {\r\n legendData = legendObj;\r\n legendData.add = true;\r\n } else if (index !== -1) {\r\n for (let x of legendArray) {\r\n if (x.name === paramName) {\r\n if (x.hasOwnProperty('add') && x.add === false) {\r\n if (x.dataSource === legendObj.dataSource) {\r\n x.add = true;\r\n }\r\n }\r\n }\r\n }\r\n }\r\n\r\n if (selectedParamArr.length) {\r\n if (\r\n (compareDataSources.length && compareDataSources[0].name === legendObj.dataSources) ||\r\n selectedParamItem?.dataSource === legendObj.dataSource\r\n )\r\n if (legendArray.length) {\r\n for (let x of legendArray) {\r\n if (x.name !== paramName) {\r\n x.add = false;\r\n }\r\n }\r\n }\r\n selectedParamArr = [];\r\n }\r\n }\r\n removeLayers(previousParamRef);\r\n if (Array.isArray(data)) {\r\n if (selectedParamArr[0]?.dataSource === legendObj.dataSource) {\r\n addLayers(currentParamRef);\r\n }\r\n } else {\r\n if (selectedParam?.dataSource === legendObj.dataSource) {\r\n addLayers(currentParamRef);\r\n }\r\n }\r\n\r\n selectedParamArr.push(selectedParam);\r\n\r\n if (!_.isEmpty(legendData)) {\r\n legendArray.push(legendData);\r\n // setSelectedParamLegendData(legendArray);\r\n }\r\n if (!_.isEmpty(compareObj)) {\r\n compareLegendArray.push(compareObj);\r\n // setCompareParamLegendData(compareLegendArray);\r\n }\r\n if (!_.isEmpty(compareParams)) {\r\n legendArray.map(item => {\r\n if (item.add == true) {\r\n if (DATA_SOURCES?.IRI.id === compareDataSources[0]?.id) {\r\n const iriDateRanger = iriDate(\r\n compareIRIForecastTime,\r\n compareIRIAvailableLeadTimeList,\r\n );\r\n item.selectedDates = {\r\n startDate: iriDateRanger?.startDate,\r\n endDate: iriDateRanger?.endDate,\r\n };\r\n item.forecastMonth = compareIRIForecastTime?.month?.value;\r\n } else {\r\n item.selectedDates = {\r\n startDate: moment(finalSelectedDate.startDate).format('DD-MM-YYYY'),\r\n endDate: moment(finalSelectedDate.endDate).format('DD-MM-YYYY'),\r\n };\r\n }\r\n }\r\n });\r\n }\r\n\r\n setSelectedParamLegendData(legendArray);\r\n setCompareParamLegendData(compareLegendArray);\r\n setSelectedParamLegend(legendArray);\r\n setSelectedParams(selectedParamArr);\r\n }\r\n }\r\n }, [dateSourceWeatherData]);\r\n\r\n const clearDatesHandler = () => {\r\n setStaticResourceDates([]);\r\n };\r\n\r\n const removeMapLayers = (layerControl, compareParamLegendData, selectedParamLegendData) => {\r\n if (!_.isEmpty(layerControl?.firstLayer)) {\r\n map?.removeControl(layerControl?.firstLayer);\r\n }\r\n if (!_.isEmpty(layerControl?.secondLayer)) {\r\n map?.removeControl(layerControl?.secondLayer);\r\n }\r\n if (!_.isEmpty(mapControl)) {\r\n map?.removeControl(mapControl);\r\n\r\n setMapControl('');\r\n setLayerControl({\r\n firstLayer: {},\r\n secondLayer: {},\r\n });\r\n }\r\n\r\n let previousParamRef = '';\r\n if (selectedParams.length) {\r\n previousParamRef = layerRef.current[selectedParams[0]?.parameter?.paramIndex];\r\n }\r\n if (previousParamRef && previousParamRef.current) {\r\n removeLayers(previousParamRef);\r\n }\r\n\r\n let compareArray = [...compareParamLegendData];\r\n let updatedCompareArray = [];\r\n if (compareArray?.length) {\r\n updatedCompareArray = compareArray?.map(value => {\r\n if (value.add) value.add = false;\r\n return value;\r\n });\r\n }\r\n setCompareParamLegendData(updatedCompareArray);\r\n removeLegend(selectedParamLegendData);\r\n };\r\n\r\n const handleDataSourceId = id => {\r\n setSelectedParamDataSourceId(id);\r\n };\r\n\r\n const handleParameters = paramsList => {\r\n let selectedParamArr = selectedParams;\r\n let legendArray = selectedParamLegendData;\r\n let compareArray = _.cloneDeep(compareParamLegendData);\r\n let updatedCompareArray = [];\r\n let selectedParamItem = '';\r\n if (selectedParamArr[0] && !_.isEmpty(selectedParamArr[0])) {\r\n selectedParamItem = selectedParamArr[0]?.parameter;\r\n }\r\n const previousParamRef = layerRef.current[selectedParamItem?.paramIndex];\r\n\r\n removeLayers(previousParamRef);\r\n if (legendArray.length) {\r\n // updatedParamArray = legendArray?.map((value,i)=>{\r\n // value.add = false;\r\n // return value;\r\n // })\r\n for (let x of legendArray) {\r\n //if (x.name !== paramName) {\r\n x.add = false;\r\n //}\r\n }\r\n }\r\n if (compareArray.length) {\r\n updatedCompareArray = compareArray?.map(value => {\r\n if (value.add) value.add = false;\r\n return value;\r\n });\r\n }\r\n if (!_.isEmpty(layerControl?.firstLayer)) {\r\n map?.removeControl(layerControl?.firstLayer);\r\n }\r\n if (!_.isEmpty(layerControl?.secondLayer)) {\r\n map?.removeControl(layerControl?.secondLayer);\r\n }\r\n if (!_.isEmpty(mapControl)) {\r\n map?.removeControl(mapControl);\r\n setMapControl('');\r\n setLayerControl({\r\n firstLayer: {},\r\n secondLayer: {},\r\n });\r\n }\r\n if (!_.isEmpty(paramsList)) {\r\n selectedParamArr.push(paramsList);\r\n setSelectedParam(paramsList);\r\n setSelectedParams(selectedParamArr);\r\n // setSelectedParamLegend(updatedParamArray);\r\n // setSelectedParamLegendData(updatedParamArray);\r\n setSelectedParamLegend(legendArray);\r\n setSelectedParamLegendData(legendArray);\r\n setCompareParamLegendData(updatedCompareArray);\r\n } else {\r\n setSelectedParam({});\r\n setSelectedParams([]);\r\n }\r\n };\r\n\r\n function ChangeView({ center, zoom }) {\r\n const mapEvents = useMapEvents({\r\n zoomend: () => {\r\n setCordinateAndZoom(prev => {\r\n return {\r\n ...prev,\r\n zoom: mapEvents.getZoom(),\r\n cordinates: mapEvents.getCenter(),\r\n };\r\n });\r\n },\r\n dragend: () => {\r\n setCordinateAndZoom(prev => {\r\n return {\r\n ...prev,\r\n zoom: mapEvents.getZoom(),\r\n cordinates: mapEvents.getCenter(),\r\n };\r\n });\r\n },\r\n });\r\n\r\n const map = useMap();\r\n setInterval(function() {\r\n if (!_.isEmpty(map) && !_.isEmpty(map?._layers)) map.invalidateSize();\r\n }, 500);\r\n if (zoom && center) map.setView(center, zoom);\r\n return null;\r\n }\r\n\r\n const handleCordinates = (cordinates, zoom) => {\r\n let zoom_level = zoom || cordinateAndZoom?.zoom;\r\n setCordinateAndZoom(prev => {\r\n return {\r\n ...prev,\r\n locationCordinates: cordinates,\r\n cordinates,\r\n zoom: zoom_level,\r\n };\r\n });\r\n setCordinateAndZoomReset(prev => {\r\n return {\r\n ...prev,\r\n locationCordinates: cordinates,\r\n cordinates,\r\n zoom: zoom_level,\r\n };\r\n });\r\n };\r\n\r\n const handleSelectedDefaultYear = selectedValue => {\r\n if (selectedValue !== selectedYear) {\r\n setSelectedYear(selectedValue);\r\n setSelectedDate();\r\n setStaticResourceWeekData();\r\n }\r\n setSelectedYear(selectedValue);\r\n if (hasQueryParam) {\r\n if (selectedParam?.forecast_data_source_id === selectedDataSourceId) {\r\n if (selectedParam?.parameter_id && selectedDataSourceId && selectedValue) {\r\n dispatch(\r\n staticResourceAllDateRequest({\r\n forecast_data_source_id: selectedDataSourceId,\r\n year: selectedValue,\r\n }),\r\n );\r\n }\r\n }\r\n }\r\n };\r\n\r\n const setParamData = ({ values, fromCompare }) => {\r\n layerRef.current = [];\r\n let arr = [];\r\n arr.push(values);\r\n if (!_.isEmpty(arr)) {\r\n let categoriedArr = renderParamList(arr);\r\n let updatedCategoriedArr = _.cloneDeep(categoriedArr);\r\n if (dataSources?.length && dataSources[0]?.name === DATA_SOURCES.ERPAS.name) {\r\n updatedCategoriedArr = categoriedArr?.map(i => {\r\n let item = _.cloneDeep(i);\r\n if (i?.parameter?.parameter_type) {\r\n let arr1 = [];\r\n let updatedName = '';\r\n const [first, ...rest] = i?.parameter?.name?.split(' ');\r\n arr1?.push(first);\r\n\r\n if (arr1?.length) {\r\n arr1?.push(i?.parameter?.parameter_type);\r\n }\r\n updatedName = arr1?.concat(rest)?.join(' ');\r\n item.parameter.name = updatedName;\r\n }\r\n return item;\r\n });\r\n }\r\n setCategoryParams(updatedCategoriedArr);\r\n categoriedArr?.map(item => {\r\n const ref = React.createRef();\r\n layerRef.current.push(ref);\r\n });\r\n }\r\n if (hasQueryParam && arr?.[0]?.value !== 'ECMWF (Static)') {\r\n setStaticResourceParams(arr);\r\n } else {\r\n setStaticResourceParams([]);\r\n }\r\n // if (!_.isEmpty(values)) {\r\n // setInitialParams(arr);\r\n // if (fromCompare || _.isEmpty(params) || params[0]?.id !== arr[0]?.id) {\r\n // setParams(arr);\r\n // }\r\n if (!_.isEmpty(values) && arr?.[0]?.value !== 'ECMWF (Static)') {\r\n setInitialParams(arr);\r\n if (fromCompare || _.isEmpty(params) || params[0]?.id !== arr[0]?.id) {\r\n setParams(arr);\r\n }\r\n } else {\r\n setInitialParams([]);\r\n setParams([]);\r\n }\r\n // }\r\n };\r\n\r\n const setCompareParam = (values, firstDataSource) => {\r\n let arr = [];\r\n if (!_.isEmpty(values)) {\r\n arr.push(values);\r\n }\r\n if (!_.isEmpty(arr)) {\r\n let categoriedArr = renderParamList(arr);\r\n setCategoryCompareParams(categoriedArr);\r\n } else {\r\n setCategoryCompareParams([]);\r\n setCompareParams([]);\r\n setParamData({ values: firstDataSource, fromCompare: true });\r\n }\r\n setCompareParams(arr);\r\n };\r\n\r\n const forecastLeadTimeHandler = e => {\r\n IRIForecastTime.lead_time = e;\r\n setIRIForecastTime({ ...IRIForecastTime });\r\n };\r\n\r\n const handleSelectedFilterRegion = id => {\r\n setSelectedRegionId(id);\r\n };\r\n\r\n const removeMapPreferenceLayer = (mapPreferRefs, mapPreferencesData) => {\r\n if (mapPreferRefs?.current?.length && mapPreferencesData?.length) {\r\n mapPreferencesData?.map(item => {\r\n let selectedMapIndex = _.findIndex(\r\n mapPreferRefs.current,\r\n list => list.current.boundary_id === item.id,\r\n );\r\n let previousParamRef = mapPreferRefs?.current[selectedMapIndex].current.layer;\r\n if (previousParamRef && previousParamRef?.current) {\r\n removeLayers(previousParamRef);\r\n }\r\n });\r\n }\r\n };\r\n\r\n const handleCountry = name => {\r\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\r\n removeMapLayers(layerControl, compareParamLegendData, selectedParamLegendData);\r\n setCountry(name);\r\n setSelectedState('');\r\n setSelectedDistrict('');\r\n };\r\n\r\n const handleSelectedDate = data => {\r\n setSelectedDate(data);\r\n let reqBody = {\r\n forecast_data_source_id: [],\r\n parameter_id: [],\r\n group_date: '',\r\n order_by: 'start_date',\r\n page: 1,\r\n };\r\n if (\r\n selectedDataSourceId === 'e2f886a7-3299-4c82-af2e-123fe92faf88' ||\r\n selectedDataSourceId === 'e2f886a7-3299-4c82-af2e-123fe92faf87'\r\n ) {\r\n reqBody.group_date = data;\r\n } else {\r\n reqBody.group_date = data ? moment(data, 'DD-MM-YYYY').format('YYYY-MM-DD') : '';\r\n }\r\n if (selectedParam?.forecast_data_source_id === selectedDataSourceId) {\r\n if (selectedParam?.parameter_id && selectedDataSourceId && selectedYear) {\r\n setRequestBody({\r\n forecast_data_source_id: [selectedDataSourceId],\r\n parameter_id: [selectedParam?.parameter_id],\r\n group_date: reqBody.group_date,\r\n order_by: 'start_date',\r\n page: 1,\r\n });\r\n }\r\n }\r\n };\r\n\r\n const handleProps = props => {\r\n if (props?.temporalAggregation) {\r\n setTemporalAggregation(props?.temporalAggregation);\r\n }\r\n if (props?.range) {\r\n if (props?.range.min !== null) setRange(props?.range);\r\n }\r\n if (props?.compareDataSource) {\r\n setCompareDataSources(props?.compareDataSource);\r\n } else {\r\n setCompareDataSources([]);\r\n }\r\n if (props?.dataSources?.length) {\r\n if (props?.dataSources[0]?.name !== dataSources[0]?.name) {\r\n setDataSources(props?.dataSources);\r\n }\r\n }\r\n if (props?.initialSelectedDate) {\r\n setInitialSelectedDate(props?.initialSelectedDate);\r\n }\r\n if (props?.finalSelectedDate) {\r\n setFinalSelectedDate(props?.finalSelectedDate);\r\n }\r\n };\r\n\r\n const handleRegionId = value => {\r\n setRegionId(value);\r\n };\r\n\r\n const handleSelectedDataSourceId = value => {\r\n setSelectedDataSourceId(value);\r\n };\r\n\r\n const handleChartDisplay = () => {\r\n setShowCharts(!showCharts);\r\n };\r\n\r\n const setMapReference = mapInstance => {\r\n mapRef.current = mapInstance;\r\n setMap(mapInstance);\r\n };\r\n\r\n const addLegend = paramLegendData => {\r\n if (paramLegendData?.length) {\r\n return paramLegendData?.map((item, index) => {\r\n return (\r\n <>\r\n {item?.descret_legend ? (\r\n \r\n
\r\n \r\n {series.length || !_.isEmpty(options) ? (\r\n <>\r\n
\r\n \r\n
\r\n )}\r\n No Chart Data Found
\r\n\r\n
\r\n \r\n );\r\n }\r\n };\r\n const renderMapContainer = () => {\r\n return (\r\n <>\r\n \r\n \r\n {errorData?.showError ||\r\n (parameterData?.length && parameterData?.every(i => !i.checked)) ||\r\n isHideToolBar ? (\r\n \r\n {!_.isEmpty(chartSeriesData) ? (\r\n <>\r\n \r\n {region?.length === 1 && !_.isEmpty(region[0]) ? (\r\n region[0]?.layerType === 'marker' ? (\r\n <>\r\n \r\n \r\n ) : (\r\n <>\r\n {noaaRegionTimeSeries?.length ? (\r\n <>\r\n
\r\n \r\n
\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n point({region[0]?.latlngs[1].toFixed(2)},\r\n {region[0]?.latlngs[0].toFixed(2)})\r\n
\r\n \r\n ) : (\r\n ''\r\n )\r\n ) : (\r\n ''\r\n )}\r\n\r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n )}\r\n \r\n )}\r\n \r\n {errorData?.data} \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n handleModule(DROUGHT_MODULES_CONST[1]);\r\n }}\r\n >\r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nLeafletWrapper.propTypes = {\r\n cordinates: PropTypes.array,\r\n zoom: PropTypes.number,\r\n parameters: PropTypes.array,\r\n};\r\n","import React from 'react';\r\nimport LeafletWrapper from './leafletWrapper';\r\n\r\nfunction index(props) {\r\n return (\r\n \r\n {isLoading || isEcmwfDataByControlLoading ? \r\n
\r\n \r\n ) : (\r\n
\r\n \r\n
\r\n {(!hasQueryParam && selectedDataSource?.firstDataSource?.[0]?.name !== 'ECMWF (Static)') ||\r\n (!showEcmwf && selectedDataSource?.firstDataSource?.[0]?.name === 'ECMWF (Static)') ? (\r\n <>\r\n \r\n <>\r\n \r\n
\r\n \r\n {renderMapContainer()}
\r\n {renderChartsUI()}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default index;\r\n","export default __webpack_public_path__ + \"static/media/zadms-drought-popup.6bcfe61b.png\";","import React, { useEffect } from 'react';\r\nimport { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';\r\nimport { t } from 'react-multi-lang';\r\nimport Drought from '../../assets/Images/zadms-drought-popup.png';\r\nimport Arrow from '../../assets/Images/right-arrow.png';\r\nimport DroughtImage1 from '../../assets/Images/droughtIndices.png';\r\nimport DroughtImage2 from '../../assets/Images/decisionFramework.png';\r\nimport DroughtImage3 from '../../assets/Images/otherDroughtIndices.png';\r\nimport DroughtImage4 from '../../assets/Images/digital-survay.png'\r\nimport { DROUGHT_MODULES_CONST } from '../../Components/constants';\r\nimport ReactTooltip from 'react-tooltip';\r\n\r\nconst Droughtmodal = props => {\r\n const {modal,handleModal}= props\r\n\r\n const viewtoggle = () => handleModal(!modal);\r\n useEffect(() => {\r\n handleModal(!modal);\r\n }, []);\r\n\r\n const handleStartDroughtMonitorLink = () => {\r\n handleModal(!modal);\r\n };\r\n\r\n const handleModule = data => {\r\n props.moduleHandler(data);\r\n handleModal(!modal);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {t('DROUGHT_MONITORING.WELCOME_TO_DROUGHT')}\r\n \r\n \r\n \r\n {\r\n // handleModule(DROUGHT_MODULES_CONST[0]);\r\n // }}\r\n >\r\n \r\n {t('DROUGHT_MONITORING.COMING_SOON')}\r\n \r\n
\r\n \r\n 
\r\n
\r\n \r\n
\r\n \r\n \r\n {t('DROUGHT_MONITORING.DROUGHT_MODAL_DESC_ONE')}\r\n {
}\r\n {t('DROUGHT_MONITORING.DROUGHT_MODAL_DESC_TWO')}\r\n \r\n \r\n
\r\n
\r\n {t('DROUGHT_MONITORING.DROUGHT_PREDICTION')}
\r\n\r\n
\r\n {t('DROUGHT_MONITORING.DROUGHT_MONITOR')}
\r\n\r\n
\r\n {t('DROUGHT_MONITORING.DSS')}
\r\n \r\n\r\n
\r\n {t('DROUGHT_MONITORING.DROUGHT_INDICES')}
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default Droughtmodal;\r\n","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,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\"","import React, { useMemo } from 'react';\r\nimport { Button, Modal, ModalBody, ModalFooter, Table, Alert } from 'reactstrap';\r\nimport { useTable, usePagination, useSortBy, useGlobalFilter } from 'react-table';\r\nimport _ from 'lodash';\r\nimport { t } from 'react-multi-lang';\r\nimport { ALERT_TABLE_INDICES_THRESHOLD_CONSTS } from '../../../Components/constants';\r\n\r\nconst AlertIndicesModal = props => {\r\n const { isOpen, toggle, tableData } = props;\r\n const columns = useMemo(() => tableData?.columns);\r\n const data = useMemo(() => tableData?.rowData, [tableData?.rowData]);\r\n const tableInstance = useTable(\r\n {\r\n columns,\r\n data,\r\n initialState: { pageSize: tableData?.rowData?.length },\r\n },\r\n useGlobalFilter,\r\n useSortBy,\r\n usePagination,\r\n );\r\n const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } = tableInstance;\r\n return (\r\n\r\n \r\n \r\n {' '}\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default AlertIndicesModal;","import _ from 'lodash';\r\nimport ReactTooltip from 'react-tooltip';\r\nimport { t } from 'react-multi-lang';\r\nimport {DROUGHT_MANAGEMENT_MODULE_ID,DROUGHT_MODULES_CONST, DROUGHT_MONITOR_MODULE ,FINAL_DROUGHT_MAP,SPI,SPI_GPM,CHECK_DROUGHT, SMCI,VHI,CROP_COVER} from '../../Components/constants/index'\r\n\r\nconst IndicesInfoIcons = props => {\r\n\r\n\r\n const handleInfo = e => {\r\n e?.stopPropagation();\r\n // TODO Remove Hard coded text in compare \r\n if(props.dss && props?.indicesName === FINAL_DROUGHT_MAP){\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DSS}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n }else{\r\n switch (props?.selectedModule?.label) {\r\n case DROUGHT_MODULES_CONST[0].label:\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_PREDICTION}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n break;\r\n case DROUGHT_MODULES_CONST[1].label:\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_MONITOR}&&sub-topic-name=${props?.indicesName}&topic_name=${ DROUGHT_MONITOR_MODULE.label}`);\r\n break;\r\n case DROUGHT_MODULES_CONST[2].label:\r\n if(props?.indicesName === SPI){\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_MONITOR}&&sub-topic-name=${SPI_GPM}&topic_name=${props?.selectedModule?.label}`);\r\n }else if(props?.indicesName === CHECK_DROUGHT){\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DSS}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n }\r\n else if(props?.indicesName === CROP_COVER){\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DSS}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n }\r\n else if(props?.indicesName === VHI){\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DSS}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n } \r\n else if(props?.indicesName === SMCI){\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DSS}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n }\r\n else{\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_MONITOR}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n }\r\n break;\r\n case DROUGHT_MODULES_CONST[3].label:\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.OTHER_INDICES}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n break;\r\n case DROUGHT_MONITOR_MODULE.label:\r\n window.open(`/user-guide-details?topicId=${DROUGHT_MANAGEMENT_MODULE_ID.DROUGHT_MONITOR}&&sub-topic-name=${props?.indicesName}&topic_name=${props?.selectedModule?.label}`);\r\n break;\r\n }\r\n }\r\n \r\n };\r\n\r\n\r\n if (props.dss) {\r\n return (\r\n \r\n
\r\n {tableData?.columns.length === 1 &&\r\n tableData?.rowData[0]?.slug === \"dryspell\" &&\r\n tableData?.rowData?.length === 1 ? (\r\n \r\n \r\n {headerGroups.map(headerGroup => (\r\n
\r\n \r\n )}\r\n
{' '}\r\n \r\n
\r\n ) : tableData?.columns.length === 1 &&\r\n tableData?.rowData[0]?.slug === 'spi' &&\r\n tableData?.rowData?.length === 1 ? (\r\n \r\n \r\n Dry Spell (Days){t('DROUGHT_MONITORING.DRYSPELL_MESSAGE')}\r\n \r\n
\r\n \r\n
\r\n \r\n ) : tableData?.columns?.length === 1 ? (\r\n \r\n \r\n SPI{t('DROUGHT_MONITORING.DRYSPELL_MESSAGE')}\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n <>\r\n \r\n \r\n {t('DROUGHT_MONITORING.DRYSPELL_SPI_MESSAGE')}\r\n \r\n
\r\n | {column.render('Header')} | \r\n ))}\r\n
|---|
\r\n
\r\n \r\n
\r\n \r\n \r\n handleChange(i)}\r\n checked={i?.checked}\r\n className=\"stage-options\"\r\n boxShadow=\"1px 1px 1px 1px #848F9A\"\r\n disabled={i?.disabled}\r\n />\r\n \r\n \r\n \r\n
\r\n
\r\n {i?.slug === 'checkdroughtcondition' && i?.checked ? (\r\n <>\r\n \r\n \r\n
\r\n \r\n \r\n props.handleSPIThreshold(e.target.value)}\r\n />\r\n
\r\n \r\n ):''}\r\n {i.slug === DRY_SPELL.DRY_SPELL_SLUG ? (\r\n <>\r\n \r\n \r\n props?.setDrySpellPrecipitationThreshold(e.target.value)}\r\n />\r\n
\r\n \r\n \r\n ) : (\r\n ''\r\n )}\r\n {i?.slug === 'finaldroughtmap' && i.checked ? (\r\n <>\r\n {props?.finalDroughtParameterMonthsList?.length\r\n ? props?.finalDroughtParameterMonthsList?.map((i,index) => {\r\n return (\r\n <>\r\n \r\n \r\n props.handleFinalDroughtParamMonthChange(i.slug,value)}\r\n isMulti={false}\r\n required={true}\r\n value={i?.selectedOption}\r\n />\r\n
\r\n \r\n );\r\n })\r\n : ''}\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n );\r\n })}\r\n \r\n );\r\n};\r\nexport default DroughtStageSwitch;\r\n","import React from 'react';\r\nimport { RiArrowDropDownLine, RiArrowDropUpLine } from 'react-icons/ri';\r\nimport { Collapse } from 'reactstrap';\r\nimport _ from 'lodash';\r\nimport Select from 'react-select';\r\nimport {\r\n DSS_MODULE_CONSTS,\r\n} from '../../../Components/constants';\r\nimport DroughtStageSwitch from './DroughtStageOptions';\r\n\r\nconst DSSDroughtIndicatorsCollapse = props => {\r\n const {\r\n isCompare,\r\n checkedIndicesList,\r\n handleCategory,\r\n droughtModuleIndicators,\r\n impactMonthsDropdownList,\r\n selectedModule,\r\n DroughtIndicators,\r\n CompareDroughtIndicators,\r\n handleCompareIndices,\r\n handleIndices,\r\n handleCompareCategory,\r\n handleCategoryToggle,\r\n handleImpactDropdownChange,\r\n handleDroughtIndices,\r\n thresholdDataList,\r\n setThresholdDataList,\r\n } = props;\r\n\r\n const checkboxStyle = {\r\n color: '#2A547C',\r\n };\r\n\r\n\r\n\r\nconst renderImpactDropdown = data => {\r\n return (\r\n <>\r\n \r\n handleImpactDropdownChange(val, data)}\r\n isMulti={false}\r\n required={true}\r\n value={data?.selectedOption}\r\n />\r\n
\r\n \r\n );\r\n};\r\n\r\nconst renderDSSCheckboxes = ({\r\n item,\r\n index,\r\n data,\r\n handleCategory,\r\n isSubCategory,\r\n isCategory,\r\n isCompare,\r\n}) => {\r\n const selectedItem = handleCategory?.find(\r\n x => x.name === item.name && x.category === item.category,\r\n );\r\n if (!_.isEmpty(item)) {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n )\r\n ) : (\r\n returnCheckbox(\r\n item,\r\n data,\r\n isCompare ? handleCompareIndices : handleIndices,\r\n index,\r\n isCompare,\r\n )\r\n )}\r\n \r\n \r\n );\r\n } else {\r\n return <>;\r\n }\r\n};\r\n\r\nconst returnCheckbox = (categoryList, list) => {\r\n let filteredCategory = impactMonthsDropdownList?.find(x => x.id === categoryList?.name);\r\n return (\r\n <>\r\n {!_.isEmpty(filteredCategory) && categoryList?.category === DSS_MODULE_CONSTS.IMPACT\r\n ? renderImpactDropdown(filteredCategory)\r\n : ''}\r\n {list?.length !== 0 && (\r\n No Indicators are available
\r\n\r\n {droughtModuleIndicators?.map((item, index) => {\r\n let data = '';\r\n if (item.name === DSS_MODULE_CONSTS.MANDATORY) {\r\n data = isCompare ? CompareDroughtIndicators.mandatory : DroughtIndicators.mandatory;\r\n } else if (item.name === DSS_MODULE_CONSTS.IMPACT) {\r\n data = isCompare ? CompareDroughtIndicators.impact : DroughtIndicators.impact;\r\n }\r\n\r\n return (\r\n <>\r\n {renderDSSCheckboxes({\r\n item,\r\n index,\r\n data,\r\n handleCategory: isCompare ? handleCompareCategory : handleCategory,\r\n isSubCategory: false,\r\n isCategory: true,\r\n isCompare: isCompare,\r\n })}\r\n \r\n );\r\n })}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default DSSDroughtIndicatorsCollapse;\r\n","export default __webpack_public_path__ + \"static/media/mandatory-design-three-resize.308a1650.png\";","export default __webpack_public_path__ + \"static/media/impact-design.7ede86e2.png\";","import React from 'react';\r\nimport { Modal, ModalHeader, ModalBody, ModalFooter, Row, Col } from 'reactstrap';\r\nimport _ from 'lodash';\r\nimport MandatoryDesign from '../../../assets/Images/mandatory-design-three-resize.png';\r\nimport ImpactDesign from '../../../assets/Images/impact-design.png'\r\nimport { t } from 'react-multi-lang';\r\n\r\nconst DroughtPhaseInfoModal = props => {\r\n return (\r\n \r\n \r\n \r\n \r\n 
\r\n {/* 
\r\n {/*
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DroughtPhaseInfoModal;\r\n","import React from 'react';\r\nimport { Modal, ModalBody, Row, Col } from 'reactstrap';\r\nimport _ from 'lodash';\r\nimport { MdOutlineClose } from 'react-icons/md';\r\nimport { Link } from 'react-router-dom';\r\nimport { t } from 'react-multi-lang';\r\nimport { DEFAULT_COUNTRY } from '../../../Components/constants';\r\n\r\nconst DroughtCheckModal = props => {\r\n const { isDrought, isOpen, toggle, selectedLocation } = props;\r\n return (\r\n \r\n {t('DROUGHT_DSS.DROUGHT_PHASE_INFO')}\r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default DroughtCheckModal;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Modal, ModalHeader, ModalBody, Row, Col } from 'reactstrap';\r\nimport _ from 'lodash';\r\nimport { MdOutlineClose } from 'react-icons/md';\r\nimport moment from 'moment';\r\nimport { t } from 'react-multi-lang';\r\nimport { WEATHER_STATUS } from '../../../Components/constants';\r\n\r\nconst WeatherForecastModal = props => {\r\n const { weatherForecastData, isOpen, toggle, cordinateAndZoom,countryFor,stateFor,districtFor} = props;\r\n\r\n const [tableData, setTableData] = useState([]);\r\n\r\n useEffect(() => {\r\n if (weatherForecastData?.length) {\r\n let { Open_Weather: openWeatherData } = weatherForecastData[0];\r\n if (openWeatherData && !_.isEmpty(openWeatherData?.daily)) {\r\n setTableData(openWeatherData.daily);\r\n }\r\n }\r\n }, [weatherForecastData]);\r\n\r\n const returnDateString = () => {\r\n const startDate = new Date();\r\n const endDate = new Date();\r\n endDate.setDate(endDate.getDate() + 6);\r\n let formattedStartDate = '';\r\n let formattedEndDate = '';\r\n if (startDate?.getFullYear() === endDate?.getFullYear()) {\r\n formattedStartDate = moment(startDate)\r\n .local()\r\n .format('Do MMMM');\r\n formattedEndDate = moment(endDate)\r\n .local()\r\n .format('Do MMMM');\r\n return `${formattedStartDate} to ${formattedEndDate}, ${startDate?.getFullYear()}`;\r\n } else {\r\n formattedStartDate = moment(startDate)\r\n .local()\r\n .format('Do MMMM YYYY');\r\n formattedEndDate = moment(endDate)\r\n .local()\r\n .format('Do MMMM YYYY');\r\n return `${formattedStartDate} to ${formattedEndDate}`;\r\n }\r\n };\r\n\r\n const checkLoaction=()=>{\r\n if (districtFor === null && stateFor === null){\r\n return `${countryFor?.name}`\r\n }\r\n else if(districtFor === null){\r\n return `${stateFor?.name}`\r\n }\r\n else{\r\n return `${districtFor?.name}`\r\n }\r\n}\r\n\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n Drought Alert
\r\n\r\n {isDrought ? (\r\n \r\n \r\n {selectedLocation?.country?.id === DEFAULT_COUNTRY?.id ? (\r\n <>\r\n {t('DROUGHT_DSS.CHANCE_TO_DROUGHT')}{' '}\r\n {t('DROUGHT_DSS.FULL_STOP')}\r\n \r\n ) \r\n : (\r\n <>\r\n {t('DROUGHT_DSS.EXTRA_TEXT_FOR_NON_INDIA_COUNTRY')}\r\n \r\n )}\r\n \r\n ) : (\r\n {t('DROUGHT_DSS.NO_CHANCE_TO_DROUGHT')}\r\n )}\r\n
\r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default WeatherForecastModal;\r\n","import React from 'react';\r\nimport _ from 'lodash';\r\nimport { Button } from 'reactstrap';\r\nimport Select from 'react-select';\r\nimport {\r\n DSS_DROUGHT_PHASES_CONST,\r\n} from '../../../Components/constants';\r\nimport { useSelector } from 'react-redux';\r\nimport { t } from 'react-multi-lang';\r\nimport AlertIndicesModal from './AlertIndicesTableModal';\r\nimport DSSDroughtIndicatorsCollapse from './DSSDroughtIndicators';\r\nimport DroughtPhaseInfoModal from './DroughtPhaseInfoModal';\r\nimport DroughtCheckModal from './DroughtCheckModal';\r\nimport WeatherForecastModal from './WeatherForecastModal';\r\nimport ReactTooltip from 'react-tooltip';\r\n\r\nfunction DSSDroughtSidebar(props) {\r\n const {\r\n selectedLocation,\r\n isOpenAlertIndicesTable,\r\n isOpenWeatherForecastDataModal,\r\n setIsOpenWeatherForecastDataModal,\r\n weatherForecastData,\r\n isShowDroughtCheckModal,\r\n setIsShowDroughtCheckModal,\r\n selectedModule,\r\n thresholdDataList,\r\n setThresholdDataList,\r\n } = props;\r\n \r\n const {\r\n isGetDroughtAllSeasonRequesting,\r\n } = useSelector(state => ({\r\n isGetDroughtAllSeasonRequesting: state.DroughtMonitor.isGetDroughtAllSeasonRequesting,\r\n getDroughtAllSeasonData: state.DroughtMonitor.getDroughtAllSeasonData,\r\n getDroughtAllSeasonDataError: state.DroughtMonitor.getDroughtAllSeasonDataError,\r\n getDSSIndicesData: state.DroughtMonitor.getDSSIndicesData,\r\n getDSSIndicesDataError: state.DroughtMonitor.getDSSIndicesDataError,\r\n checkDroughtCriteriaData: state.DroughtMonitor.checkDroughtCriteriaData,\r\n checkDroughtCriteriaDataError: state.DroughtMonitor.checkDroughtCriteriaDataError,\r\n getDroughtTimeseriesData: state.DroughtMonitor.getDroughtTimeseriesData,\r\n }));\r\n\r\n return (\r\n <>\r\n {isOpenAlertIndicesTable && !_.isEmpty(props.alertTableData) ? (\r\n \r\n \r\n
\r\n
\r\n \r\n {t('DROUGHT_DSS.WEATHER_DATA_INFO')}\r\n \r\n
\r\n
\r\n {tableData?.length\r\n ? tableData?.map(item => {\r\n return (\r\n <>\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n })\r\n : ''}\r\n
\r\n {t('DROUGHT_DSS.SELECT_MONSOON')}
\r\n\r\n
\r\n \r\n
\r\n\r\n \r\n
\r\n {t('DROUGHT_DSS.SELECT_TIMEFRAME')}
\r\n\r\n\r\n
\r\n {props.yearsList?.length ? (\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n Select Indicators
\r\n\r\n props.handleApplyLayers(true)}\r\n type=\"submit\"\r\n disabled={!props.isApplyLayers}\r\n >\r\n {t('CONTINGENCY_PLAN.APPLY_LAYERS')}\r\n \r\n
\r\n\r\n {/* {isDrought && !isShowImpactIndicators ? (\r\n <>\r\n \r\n
\r\n \r\n ) : (\r\n ''\r\n )} */}\r\n {!props.isDrought && (props?.checkDroughtConditonToggle?.length && props?.checkDroughtConditonToggle[0]?.checked) ? (\r\n \r\n handleImpactIndicators(!isShowImpactIndicators)}\r\n >\r\n {t('DROUGHT_DSS.CHECK_IMPACT_INDICATORS')}\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n {t('DROUGHT_DSS.CHECK_DROUGHT_CONDITION')}\r\n \r\n
\r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n );\r\n}\r\n\r\nexport default DSSDroughtSidebar;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { RiArrowDropDownLine, RiArrowDropUpLine } from 'react-icons/ri';\r\nimport { Collapse, Input } from 'reactstrap';\r\nimport _ from 'lodash';\r\nimport { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';\r\nimport { DROUGHT_MODULE_INDICATORS, INDICES_PARAMS } from '../../Components/constants';\r\nimport IndicesInfoIcons from './IndicesInfoIcons';\r\n\r\nconst DroughtIndicatorsCollapse = (props) => {\r\n const {\r\n DroughtIndicesData,\r\n setMinStartDate,\r\n setSelectedParam,\r\n setCompareParam,\r\n isCompare,\r\n selectedModule,\r\n selectedParam,\r\n } = props;\r\n const checkboxStyle = {\r\n color: '#2A547C',\r\n };\r\n const [DroughtIndicators, setDroughtIndicators] = useState({\r\n mandatory: '',\r\n impact: '',\r\n });\r\n const [CompareDroughtIndicators, setCompareDroughtIndicators] = useState({\r\n mandatory: '',\r\n impact: '',\r\n });\r\n\r\n const [handleCategory, setHandleCategory] = useState([\r\n { name: 'Mandatory', id: 'Mandatory', category: 'Mandatory', checked: true },\r\n { name: 'Impact', id: 'Impact', category: 'Impact', checked: true },\r\n ]);\r\n\r\n const [handleCompareCategory, setCompareCategory] = useState([]);\r\n const [handleIndices, setHandleIndices] = useState();\r\n const [handleCompareIndices, setHandleCompareIndices] = useState();\r\n\r\n useEffect(() => {\r\n if (DroughtIndicesData) {\r\n const { data } = DroughtIndicesData;\r\n let mandatoryData = [];\r\n let impactData = [];\r\n let paramsList = [];\r\n let count = 0;\r\n let categoriesList = JSON.parse(JSON.stringify(handleCategory));\r\n\r\n data?.result?.map((item) => {\r\n let mandatoryCategoryData = Object.assign({}, item);\r\n mandatoryCategoryData.category = 'Mandatory';\r\n let impactCategoryData = Object.assign({}, item);\r\n impactCategoryData.category = 'Impact';\r\n\r\n let mandatoryParamData = item?.parameter?.filter(\r\n (x) => x.mandatory === true && x.status === true,\r\n );\r\n let mandatoryParamUpdatedData = mandatoryParamData?.map((i) => {\r\n let obj = JSON.parse(JSON.stringify(i));\r\n obj.paramIndex = count;\r\n count = count + 1;\r\n if(selectedParam?.id === obj?.id) \r\n obj.checked = true\r\n else \r\n obj.checked = false;\r\n return obj;\r\n });\r\n if (mandatoryParamUpdatedData?.length) {\r\n categoriesList.push({\r\n name: item.name,\r\n id: item.name,\r\n category: 'Mandatory',\r\n checked: true,\r\n });\r\n mandatoryCategoryData.parameter = mandatoryParamUpdatedData;\r\n mandatoryData.push(mandatoryCategoryData);\r\n }\r\n\r\n let impactParamData = item?.parameter?.filter(\r\n (x) => x.impact === true && x.status === true,\r\n );\r\n let impactParamUpdatedData = impactParamData?.map((i) => {\r\n let obj = JSON.parse(JSON.stringify(i));\r\n obj.paramIndex = count;\r\n if(selectedParam?.id === obj?.id) \r\n obj.checked = true\r\n else \r\n obj.checked = false;\r\n count = count + 1;\r\n return obj;\r\n });\r\n if (impactParamUpdatedData?.length) {\r\n categoriesList?.push({\r\n name: item.name,\r\n id: item.name,\r\n category: 'Impact',\r\n checked: true,\r\n });\r\n impactCategoryData.parameter = impactParamUpdatedData;\r\n impactData.push(impactCategoryData);\r\n }\r\n\r\n item?.parameter?.map((param) => {\r\n if ((param?.impact || param?.mandatory) && param.status) {\r\n paramsList?.push({ name: param?.name, id: param?.id, checked: selectedParam?.id === param?.id ? true : false});\r\n }\r\n });\r\n });\r\n setDroughtIndicators({\r\n mandatory: mandatoryData,\r\n impact: impactData,\r\n });\r\n setCompareDroughtIndicators({\r\n mandatory: mandatoryData,\r\n impact: impactData,\r\n });\r\n setHandleCategory(categoriesList);\r\n setCompareCategory(categoriesList);\r\n setHandleCompareIndices(paramsList);\r\n setHandleIndices(paramsList);\r\n } else {\r\n setDroughtIndicators({\r\n mandatory: [],\r\n impact: [],\r\n });\r\n setCompareDroughtIndicators({\r\n mandatory: [],\r\n impact: [],\r\n });\r\n }\r\n }, [DroughtIndicesData]);\r\n\r\n const handleCategoryToggle = (indicatorItem, categoryArr, isCompare) => {\r\n let categoryList = JSON.parse(JSON.stringify(categoryArr));\r\n let indicatorList;\r\n const index = _.findIndex(categoryList, function (list) {\r\n if (list.name === indicatorItem.name && list.category === indicatorItem.category) {\r\n return true;\r\n } else {\r\n return false;\r\n }\r\n });\r\n\r\n if (indicatorItem.name === 'Mandatory' || indicatorItem.name === 'Impact') {\r\n indicatorList = handleDefaultCategoryToggle(\r\n indicatorItem.category,\r\n categoryList[index].checked,\r\n categoryList,\r\n );\r\n } else {\r\n if (index >= 0) {\r\n categoryList[index] = {\r\n ...categoryList[index],\r\n checked: !categoryList[index].checked,\r\n };\r\n }\r\n indicatorList = categoryList;\r\n }\r\n if (isCompare) {\r\n setCompareCategory(indicatorList);\r\n } else {\r\n setHandleCategory(indicatorList);\r\n }\r\n };\r\n\r\n\r\n\r\n const handleDefaultCategoryToggle = (category, isChecked, categoryList) => {\r\n categoryList?.map((item, index) => {\r\n if (item.category === category) {\r\n categoryList[index] = {\r\n ...categoryList[index],\r\n checked: !isChecked,\r\n };\r\n }\r\n });\r\n return categoryList;\r\n };\r\n\r\n const renderCheckboxes = ({\r\n item,\r\n index,\r\n data,\r\n handleCategory,\r\n isSubCategory,\r\n isCategory,\r\n isCompare,\r\n }) => {\r\n const selectedItem = handleCategory?.find(\r\n (x) => x?.name === item?.name && x?.category === item?.category,\r\n );\r\n if (!_.isEmpty(item)) {\r\n return (\r\n <>\r\n \r\n props.handleModalToggle()}\r\n disabled={!props.showPreviewData}\r\n >\r\n {t('DROUGHT_DSS.PREVIEW_INDICES')}\r\n \r\n
\r\n \r\n
\r\n \r\n )\r\n ) : (\r\n returnCheckbox(\r\n data,\r\n isCompare ? handleCompareIndices : handleIndices,\r\n index,\r\n isCompare,\r\n )\r\n )}\r\n \r\n \r\n );\r\n } else {\r\n return <>;\r\n }\r\n };\r\n\r\n const handleCheckbox = (param, indicesList, isCompare) => {\r\n let checkedParam = indicesList?.find((item) => item.id === param.id);\r\n if (!checkedParam.checked) {\r\n let indicesData = JSON.parse(JSON.stringify(indicesList));\r\n indicesData?.length &&\r\n indicesData?.map((value, i) => {\r\n if (value?.id !== param?.id) {\r\n value.checked = false;\r\n } else {\r\n value.checked = true;\r\n }\r\n });\r\n if (isCompare) {\r\n setHandleCompareIndices(indicesData);\r\n setCompareParam(param);\r\n } else {\r\n setMinStartDate(param.min_date);\r\n setSelectedParam({ ...param, checked: true });\r\n setHandleIndices(indicesData);\r\n }\r\n }\r\n };\r\n\r\n const returnCheckbox = (category, handleIndices, index, isCompare) => {\r\n return (\r\n category?.length &&\r\n category?.map((param, index) => {\r\n let parameter = handleIndices?.find((item) => item?.id === param?.id);\r\n return (\r\n <>\r\n No Indicators are available
\r\n- \r\n
\r\n \r\n props.setDrySpellPrecipitationThreshold(e.target.value)}\r\n />\r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n {DROUGHT_MODULE_INDICATORS?.map((item, index) => {\r\n let data = '';\r\n if (item.name === 'Mandatory') {\r\n data = isCompare ? CompareDroughtIndicators?.mandatory : DroughtIndicators?.mandatory;\r\n } else if (item.name === 'Impact') {\r\n data = isCompare ? CompareDroughtIndicators?.impact : DroughtIndicators?.impact;\r\n }\r\n return (\r\n <>\r\n {renderCheckboxes({\r\n item,\r\n index,\r\n data,\r\n handleCategory: isCompare ? handleCompareCategory : handleCategory,\r\n isSubCategory: false,\r\n isCategory: true,\r\n isCompare: isCompare,\r\n })}\r\n \r\n );\r\n })}\r\n
\r\n ) : (\r\n <>\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default DroughtIndicatorsCollapse;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { RiArrowDropDownLine, RiArrowDropUpLine } from 'react-icons/ri';\r\nimport { Collapse, Input } from 'reactstrap';\r\nimport Select from 'react-select';\r\nimport _ from 'lodash';\r\nimport { AiFillEye, AiFillEyeInvisible } from 'react-icons/ai';\r\nimport IndicesInfoIcons from './IndicesInfoIcons';\r\nimport {OTHER_INDICES_API_INDICES_SLUGS} from '../../Components/constants';\r\n\r\nexport const DroughtOtherIndicatorsCollapse = props => {\r\n const {\r\n setMinStartDate,\r\n setSelectedParam,\r\n setCompareParam,\r\n isCompare,\r\n precipitationThreshold,\r\n precipitationThresholdFlood,\r\n setPrecipitationThreshold,\r\n selectedModule,\r\n selectedParam,\r\n } = props?.data;\r\n\r\n const checkboxStyle = {\r\n color: '#2A547C',\r\n };\r\n const [DroughtIndicators, setDroughtIndicators] = useState('');\r\n const [CompareDroughtIndicators, setCompareDroughtIndicators] = useState('');\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(props.DroughtIndicesData)) {\r\n const { data } = props.DroughtIndicesData;\r\n let count = 0;\r\n\r\n let updatedData = data?.result?.map(item => {\r\n let x = _.clone(item);\r\n x.isShowCategory = true;\r\n x.parameter = x?.parameter?.map(i => {\r\n i.checked = i?.id === selectedParam?.id ? true : false;\r\n count = count + 1;\r\n i.paramIndex = count;\r\n return i;\r\n });\r\n return x;\r\n });\r\n setDroughtIndicators(updatedData);\r\n setCompareDroughtIndicators(updatedData);\r\n } else {\r\n setDroughtIndicators([]);\r\n }\r\n }, [props.DroughtIndicesData]);\r\n\r\n const handleCategoryToggle = (categoryArr, categoryItem, isCompare) => {\r\n let categoryList = JSON.parse(JSON.stringify(categoryArr));\r\n let updatedItem = JSON.parse(JSON.stringify(categoryItem));\r\n let updatedList = categoryList?.map((item) => {\r\n if (item.name === updatedItem.name) {\r\n item.isShowCategory = !updatedItem.isShowCategory;\r\n }\r\n return item;\r\n });\r\n if (isCompare) setCompareDroughtIndicators(updatedList);\r\n else setDroughtIndicators(updatedList);\r\n };\r\n\r\n const renderCheckboxes = ({ DroughtIndicators, isCompare }) => {\r\n return DroughtIndicators.map((item, index) => {\r\n return (\r\n <>\r\n \r\n {item.name}\r\n \r\n \r\n {item?.isShowCategory ? (\r\n
- \r\n
\r\n \r\n setPrecipitationThreshold(e.target.value)}\r\n />\r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n {!_.isEmpty(DroughtIndicators) ? (\r\n renderCheckboxes({\r\n DroughtIndicators: isCompare ? CompareDroughtIndicators : DroughtIndicators,\r\n isCompare: isCompare,\r\n })\r\n ) : (\r\n <>\r\n
\r\n \r\n );\r\n};\r\n\r\nexport const DroughtPredictionCollapse = props => {\r\n const {\r\n DroughtIndicesData,\r\n setMinStartDate,\r\n setSelectedParam,\r\n setCompareParam,\r\n isCompare,\r\n droughtPredictionIndicesMonths,\r\n selectedDPIndicesMonth,\r\n setSelectedDPIndicesMonth,\r\n selectedModule,\r\n selectedParam,\r\n } = props.data;\r\n\r\n const [DroughtIndicators, setDroughtIndicators] = useState('');\r\n const [CompareDroughtIndicators, setCompareDroughtIndicators] = useState('');\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(DroughtIndicesData)) {\r\n const { data } = DroughtIndicesData;\r\n let parameterArr = [];\r\n let count = 0;\r\n data?.result?.map(item => {\r\n let x = _.clone(item);\r\n x?.parameter?.map(i => {\r\n if (i?.id === selectedParam?.id) {\r\n i.checked = true;\r\n } else {\r\n i.checked = false;\r\n }\r\n i.paramIndex = count;\r\n count = count + 1;\r\n parameterArr?.push(i);\r\n });\r\n });\r\n setDroughtIndicators(parameterArr || []);\r\n setCompareDroughtIndicators(parameterArr || []);\r\n } else {\r\n setDroughtIndicators([]);\r\n }\r\n }, [DroughtIndicesData]);\r\n\r\n const handleCheckbox = (DroughtIndicators, param, isCompare) => {\r\n let indicesData = JSON.parse(JSON.stringify(DroughtIndicators));\r\n let updatedData = indicesData;\r\n if (!_.isEmpty(indicesData)) {\r\n updatedData = indicesData?.map((value, i) => {\r\n if (value.id === param?.id) {\r\n value.checked = true;\r\n } else {\r\n value.checked = false;\r\n }\r\n return value;\r\n });\r\n }\r\n if (isCompare) {\r\n setCompareDroughtIndicators(updatedData);\r\n setCompareParam(param);\r\n } else {\r\n setDroughtIndicators(updatedData);\r\n setMinStartDate(param?.min_date);\r\n setSelectedParam({ ...param, checked: true });\r\n }\r\n };\r\n\r\n const ReturnCheckbox = ({ DroughtIndicators, isCompare }) => {\r\n return (\r\n DroughtIndicators?.length &&\r\n DroughtIndicators?.map((param, index) => {\r\n return (\r\n <>\r\n \r\n
\r\n \r\n )}\r\n No Indicators are available
\r\n- \r\n
\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n {!_.isEmpty(DroughtIndicators) ? (\r\n ReturnCheckbox({\r\n DroughtIndicators: isCompare ? CompareDroughtIndicators : DroughtIndicators,\r\n isCompare: isCompare,\r\n })\r\n ) : (\r\n <>\r\n
\r\n \r\n );\r\n};\r\n\r\nconst DroughtMonitorOtherIndicesCollapse = props => {\r\n const { selectedModule, isCompare } = props;\r\n let DroughtIndicesData = '';\r\n if (isCompare) {\r\n DroughtIndicesData = props?.compareDroughtIndicesData;\r\n } else DroughtIndicesData = props?.DroughtIndicesData;\r\n return (\r\n <>\r\n {selectedModule.api_slug === 'drought-monitor-v2' ||\r\n selectedModule.api_slug === 'drought-prediction' ? (\r\n <>\r\n {selectedModule.api_slug === 'drought-monitor-v2' ? (\r\n <>\r\n \r\n
\r\n \r\n )}\r\n No Indicators are available
\r\n\r\n {compareError?.msg}\r\n
\r\n )}\r\n \r\n );\r\n }\r\n };\r\n\r\n const handleCompareOptions = (options, newValue, action) => {\r\n if (options && options.length) {\r\n if (newValue.value) {\r\n let selectedOption = options.find((item) => item.name === newValue.value);\r\n if (selectedOption) {\r\n if (action.name === 'country') {\r\n // setDefaultCompareSelectedOption(selectedOption);\r\n setCompareLocation((prev) => {\r\n return {\r\n [action.name]: selectedOption,\r\n };\r\n });\r\n } else {\r\n setCompareLocation((prev) => {\r\n return {\r\n ...prev,\r\n [action.name]: selectedOption,\r\n };\r\n });\r\n }\r\n setCompareSelectedOption(selectedOption);\r\n }\r\n } else {\r\n // setDefaultCompareSelectedOption('');\r\n setCompareLocation((prev) => {\r\n return {\r\n [action.name]: '',\r\n };\r\n });\r\n setCompareSelectedOption('');\r\n }\r\n }\r\n };\r\n\r\n const handleCompareToggle = ({ target }) => {\r\n let compareData = isCompare;\r\n const nextCompare = compareData.map((item) => {\r\n if (item.value === target.value) {\r\n return {\r\n ...item,\r\n selected: target.checked,\r\n };\r\n } else {\r\n return {\r\n ...item,\r\n selected: false,\r\n };\r\n }\r\n });\r\n setIsCompare(nextCompare);\r\n };\r\n const handleCompareLocationRender = () => {\r\n let isGraphCompare = isCompare.find((item) => item.name === 'graph' && item.selected);\r\n if (isGraphCompare) {\r\n return (\r\n <>\r\n \r\n Select Region\r\n
\r\n \r\n );\r\n }\r\n };\r\n\r\n //used to add more date field on click of + icon\r\n const addMoreDateFieldWhenClickedOnPlus = () => {\r\n return (\r\n <>\r\n \r\n
\r\n {compareCountry && compareCountry?.name !== SOUTH_ASIA_CONST.name && (\r\n \r\n
\r\n )}\r\n {compareState && (compareDistrictList?.length || districtList.length) ? (\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n Select Indicators
\r\n\r\n {selectedModule.api_slug === 'drought-monitor' ? (\r\n\r\n
\r\n )}\r\n {compareParam?.id === INDICES_PARAMS?.RAINFALL_ANAMOLY?.id ? (\r\n No Indicators available
\r\n\r\n handleCompareRaSelectedStartYearChange(JSON?.stringify(e?.getFullYear()))}\r\n value={compareRainfallAnomalyTime?.selectedStartYear}\r\n />\r\n \r\n handleCompareRaSelectedEndYearChange(JSON?.stringify(e?.getFullYear()))}\r\n value={compareRainfallAnomalyTime?.selectedEndYear}\r\n />\r\n {compareError?.showError && (\r\n
\r\n ) : (\r\n renderCompareDates(isCompare)\r\n )}\r\n \r\n );\r\n };\r\n\r\n\r\n \r\n useEffect(() => {\r\n let isMapSubmit, isGraphSubmit;\r\n let mapPreferenceCount = mapPreferencesData?.length;\r\n let regionData = props.isSelectedRegion?.region;\r\n let minMaxYearError = false;\r\n let compareMinMaxYearError = false;\r\n let rainfallAnamolyParamsSelected = true;\r\n let compareRainfallAnamolyParamsSelected = true;\r\n if (selectedParam?.name === INDICES_PARAMS.RAINFALL_ANAMOLY.name) {\r\n if (\r\n rainfallAnomalyTime?.end_year &&\r\n rainfallAnomalyTime?.month\r\n ) {\r\n rainfallAnamolyParamsSelected = true;\r\n } else {\r\n rainfallAnamolyParamsSelected = false;\r\n }\r\n }\r\n if (compareParam?.id === INDICES_PARAMS.RAINFALL_ANAMOLY.id) {\r\n if (\r\n compareRainfallAnomalyTime?.end_year &&\r\n compareRainfallAnomalyTime?.month\r\n ) {\r\n compareRainfallAnamolyParamsSelected = true;\r\n } else {\r\n compareRainfallAnamolyParamsSelected = false;\r\n }\r\n }\r\n if (regionData?.length) setShowRegionTooltip(true);\r\n else setShowRegionTooltip(false);\r\n if (!_.isEmpty(selectedParam) && !error) {\r\n if (mapPreferenceCount < 2 && rainfallAnamolyParamsSelected && !minMaxYearError) {\r\n if (!regionData?.length) {\r\n isMapSubmit = true;\r\n }\r\n isGraphSubmit = true;\r\n } else {\r\n if (\r\n !_.isEmpty(selectedLocation?.country) &&\r\n mapPreferenceCount < 2 &&\r\n rainfallAnamolyParamsSelected &&\r\n !minMaxYearError\r\n ) {\r\n if (!regionData?.length) {\r\n isMapSubmit = true;\r\n } else isMapSubmit = false;\r\n isGraphSubmit = true;\r\n } else {\r\n isMapSubmit = false;\r\n isGraphSubmit = false;\r\n }\r\n }\r\n if (isClickedOnPlus) {\r\n let isMap = isCompare?.some((item) => item.name === 'map' && item.selected);\r\n let isGraph = isCompare?.some((item) => item.name === 'graph' && item.selected);\r\n if (isMap) {\r\n isGraphSubmit = false;\r\n if (\r\n _.isEmpty(compareParam) ||\r\n compareError?.showError ||\r\n mapPreferenceCount === 2 ||\r\n !compareRainfallAnamolyParamsSelected ||\r\n compareMinMaxYearError ||\r\n !rainfallAnamolyParamsSelected ||\r\n minMaxYearError ||\r\n regionData?.length\r\n ) {\r\n isMapSubmit = false;\r\n } else {\r\n isMapSubmit = true;\r\n }\r\n }\r\n if (isGraph) {\r\n isMapSubmit = false;\r\n if (\r\n _.isEmpty(compareParam) ||\r\n !compareRainfallAnamolyParamsSelected ||\r\n compareMinMaxYearError ||\r\n !rainfallAnamolyParamsSelected ||\r\n minMaxYearError\r\n )\r\n isGraphSubmit = false;\r\n else isGraphSubmit = true;\r\n }\r\n }\r\n } else {\r\n isMapSubmit = false;\r\n isGraphSubmit = false;\r\n }\r\n setCompareMinMaxYearError(compareMinMaxYearError);\r\n setMinMaxYearError(minMaxYearError);\r\n setApplyLayers(isMapSubmit);\r\n setUpdateGraph(isGraphSubmit);\r\n }, [\r\n selectedParam,\r\n temporalAggregation,\r\n props?.isSelectedRegion,\r\n selectedLocation.country,\r\n isCompare,\r\n compareParam,\r\n isClickedOnPlus,\r\n error,\r\n compareError.showError,\r\n mapPreferencesData,\r\n compareRainfallAnomalyTime,\r\n rainfallAnomalyTime,\r\n ]);\r\n\r\n useEffect(() => {\r\n props.handleIsCompare(isClickedOnPlus);\r\n if (!isClickedOnPlus) {\r\n setIsCompare(DROUGHT_COMPARE_OPTIONS);\r\n }\r\n }, [isClickedOnPlus]);\r\n\r\n useEffect(() => {\r\n if (props?.isSelectedRegion?.region?.length) {\r\n setIsClickedOnPlus(false);\r\n }\r\n }, [props.isSelectedRegion]);\r\n useEffect(()=>{\r\n if(!_.isEmpty(selectedParam) && INDICES_PARAMS?.RAINFALL_ANAMOLY?.id === selectedParam?.id){\r\n let list= renderRainfallAnamolyYearsList(selectedParam)\r\n // let monthsList = renderMonthsList(MONTHS, rainfallAnamolyTime);\r\n setRainfallAnamolyTimeList(prev=>{\r\n return{\r\n ...prev,\r\n yearList: list,\r\n }\r\n });\r\n }\r\n },[selectedParam])\r\n\r\n\r\n\r\n useEffect(()=>{\r\n if(rainfallAnamolyTimeList?.yearList?.length){\r\n if(rainfallAnamolyTimeList?.yearList?.length ===1){\r\n handleRainfallAnamolyStartYearChange(rainfallAnamolyTimeList?.yearList[0]);\r\n handleRainfallAnamolyEndYearChange(rainfallAnamolyTimeList?.yearList[0])\r\n handleRaSelectedStartYearChange(rainfallAnamolyTimeList?.yearList[0]?.value?.toString())\r\n handleRaSelectedEndYearChange(rainfallAnamolyTimeList?.yearList[0]?.value?.toString())\r\n }\r\n else if(rainfallAnamolyTimeList?.yearList?.length >=1){\r\n handleRainfallAnamolyStartYearChange(rainfallAnamolyTimeList?.yearList[1]);\r\n handleRainfallAnamolyEndYearChange(rainfallAnamolyTimeList?.yearList[0])\r\n handleRaSelectedStartYearChange(rainfallAnamolyTimeList?.yearList[0]?.value?.toString())\r\n handleRaSelectedEndYearChange(rainfallAnamolyTimeList?.yearList[0]?.value?.toString())\r\n \r\n }\r\n }\r\n },[rainfallAnamolyTimeList?.yearList])\r\n\r\n\r\n useEffect(()=>{\r\n if(rainfallAnomalyTime?.end_year){\r\n let monthsList = renderMonthsList(MONTHS, rainfallAnomalyTime);\r\n setRainfallAnamolyTimeList(prev=>{\r\n return{\r\n ...prev,\r\n monthList: monthsList,\r\n }\r\n });\r\n }\r\n },[rainfallAnomalyTime?.end_year])\r\n\r\n useEffect(()=>{\r\n if(rainfallAnamolyTimeList?.monthList?.length){\r\n handleRainfallAnamolyMonthChange(rainfallAnamolyTimeList?.monthList[0])\r\n }\r\n },[rainfallAnamolyTimeList?.monthList])\r\n\r\n useEffect(()=>{\r\n if(rainfallAnamolyTimeList?.compareMonthList?.length){\r\n handleCompareRainfallAnamolyMonthChange(rainfallAnamolyTimeList?.compareMonthList[0])\r\n }\r\n },[rainfallAnamolyTimeList?.compareMonthList])\r\n\r\n useEffect(()=>{\r\n if(compareRainfallAnomalyTime?.end_year){\r\n let monthsList = renderMonthsList(MONTHS, compareRainfallAnomalyTime);\r\n setRainfallAnamolyTimeList(prev=>{\r\n return{\r\n ...prev,\r\n compareMonthList: monthsList,\r\n }\r\n });\r\n }\r\n },[compareRainfallAnomalyTime?.end_year])\r\n\r\n useEffect(()=>{\r\n if(rainfallAnamolyTimeList?.compareYearList?.length){ \r\n if(rainfallAnamolyTimeList?.compareYearList?.length ===1){\r\n handleCompareRainfallAnamolyStartYearChange(rainfallAnamolyTimeList?.compareYearList[0]);\r\n handleCompareRainfallAnamolyEndYearChange(rainfallAnamolyTimeList?.compareYearList[0])\r\n handleCompareRaSelectedStartYearChange(rainfallAnamolyTimeList?.compareYearList[0]?.value?.toString())\r\n handleCompareRaSelectedEndYearChange(rainfallAnamolyTimeList?.compareYearList[0]?.value?.toString())\r\n }\r\n else if(rainfallAnamolyTimeList?.compareYearList?.length >=1){\r\n handleCompareRainfallAnamolyStartYearChange(rainfallAnamolyTimeList?.compareYearList[1]);\r\n handleCompareRainfallAnamolyEndYearChange(rainfallAnamolyTimeList?.compareYearList[0])\r\n handleCompareRaSelectedStartYearChange(rainfallAnamolyTimeList?.compareYearList[0]?.value?.toString())\r\n handleCompareRaSelectedEndYearChange(rainfallAnamolyTimeList?.compareYearList[0]?.value?.toString())\r\n }\r\n }\r\n },[rainfallAnamolyTimeList?.compareYearList])\r\n\r\n useEffect(()=>{\r\n if(!_.isEmpty(compareParam) && INDICES_PARAMS?.RAINFALL_ANAMOLY?.id === compareParam?.id){\r\n let list= renderRainfallAnamolyYearsList(compareParam)\r\n // let monthsList = renderMonthsList(MONTHS, compareRainfallAnamolyTime);\r\n setRainfallAnamolyTimeList(prev=>{\r\n return{\r\n ...prev,\r\n compareYearList: list\r\n }\r\n });\r\n }\r\n },[compareParam])\r\n\r\n useEffect(() => {\r\n props.handleSelectedRegion(selectedRegion.value);\r\n }, [selectedRegion]);\r\n\r\n useEffect(()=>{\r\n let isGraph = isCompare?.some((item) => item.name === 'graph' && item.selected);\r\n if (isGraph && (selectedParam.api_slug == OTHER_INDICES_API_INDICES_SLUGS.MODIS_FLOOD || selectedParam.api_slug == OTHER_INDICES_API_INDICES_SLUGS.FLOOD)){\r\n let target = {\r\n value:\"Map\",\r\n checked:true\r\n }\r\n handleCompareToggle({target})\r\n }\r\n },[selectedParam])\r\n\r\n const onSubmitHandler = (e) => {\r\n e.preventDefault();\r\n };\r\n\r\n const handleDryspellThreshold = (data) => {\r\n if(data){\r\n setThresholdDataList(prev=>{\r\n return {\r\n ...prev,\r\n selectedDryspellThreshold: data\r\n }\r\n })\r\n }\r\n }\r\n\r\n const handleFinalDroughtParamMonthChange = (slug, value)=>{\r\n let data = _.cloneDeep(finalDroughtParameterMonthsList);\r\n let updatedData= data?.map(item=>{\r\n let itemData = _.cloneDeep(item);\r\n if(item.slug === slug){\r\n itemData.selectedOption = value;\r\n }\r\n return itemData;\r\n })\r\n if(updatedData)\r\n setFinalDroughtParameterMonthsList(updatedData)\r\n }\r\n\r\n const handleSPIThreshold = (value) => {\r\n if(value){\r\n setThresholdDataList(prev=>{\r\n return {\r\n ...prev,\r\n selectedSpiThreshold: value\r\n }\r\n })\r\n } \r\n }\r\n\r\n\r\n const renderAPIParameterOptions = (list, action) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n let default_option =\r\n action === 'country' ? regionOptions : { name: 'select', label: 'Select', value: '' };\r\n options.push(default_option);\r\n params.map((param) => {\r\n options.push(param);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n \r\n const handleChartDisplay = (obj) => {\r\n props.renderCharts(true, obj);\r\n };\r\n\r\n const minmaxError = () => {\r\n return (\r\n \r\n \r\n
\r\n \r\n \r\n {compareError?.msg}\r\n
\r\n )}\r\n \r\n {t('DROUGHT_MONITORING.DROUGHT_MIN_MAX_ERROR_MESSAGE')}\r\n
\r\n );\r\n };\r\n\r\n const yearError = () => {\r\n return (\r\n{t('DROUGHT_MONITORING.MIN_MAX_YEAR_ERROR')}
\r\n );\r\n };\r\n\r\n const handleDates = (start, end) => {\r\n /**\r\n * changed by: sai krishna thalla\r\n * reason : after applying layers and changeing modules inital dates are not applying\r\n * date: 6-sep-2022\r\n */\r\n if (!start.includes(UNDEFINED) && !end.includes(UNDEFINED)){\r\n setInitialSelectedDate((prev) => {\r\n return {\r\n ...prev,\r\n startDate: start,\r\n endDate: end,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleCompareDates = (start, end) => {\r\n if (!start.includes(UNDEFINED) && !end.includes(UNDEFINED)){\r\n setFinalSelectedDate((prev) => {\r\n return {\r\n ...prev,\r\n startDate: start,\r\n endDate: end,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const renderRainfallAnamolyYearsList = (selectedParam) => {\r\n let current_date = new Date()?.getFullYear();\r\n let start_date = new Date(selectedParam?.min_date)?.getFullYear();\r\n let yearsList = getYearsListFormat(start_date, current_date);\r\n if (yearsList) return yearsList;\r\n else return [];\r\n };\r\n\r\n const handleSelectedModule = (selectedOption) => {\r\n setTempState((prev) => {\r\n return {\r\n ...prev,\r\n min: null,\r\n max: null,\r\n };\r\n });\r\n let defaultSelectedAggregation = DROUGHT_TEMPORAL_AGGREGATION?.find(\r\n (item) => item.name === 'Mean',\r\n );\r\n if (!_.isEmpty(defaultSelectedAggregation)) {\r\n setTemporalAggregation(defaultSelectedAggregation);\r\n }\r\n setState(null);\r\n setSelectedDistrict(null);\r\n setCompareState(null);\r\n setSelectedCompareDistrict(null);\r\n const defaultCountry = countryList?.find((item) => item.id === DEFAULT_COUNTRY.id);\r\n setCountry(defaultCountry);\r\n setCompareCountry(defaultCountry);\r\n setSelectedLocation((prev) => {\r\n return {\r\n ...prev,\r\n country: defaultCountry,\r\n state: {},\r\n district: {},\r\n };\r\n });\r\n setCompareLocation((prev) => {\r\n return {\r\n ...prev,\r\n country: defaultCountry,\r\n state: {},\r\n district: {},\r\n };\r\n });\r\n setSelectedOption(defaultCountry);\r\n setIsClickedOnPlus(false);\r\n\r\n setSelectedParam('');\r\n setCompareParam('');\r\n props.handleSelectedModule(selectedOption);\r\n };\r\n\r\n const renderMonthsList = (months, anomalyTime) => {\r\n let finalSelectedYear = anomalyTime?.end_year;\r\n if (finalSelectedYear?.label === new Date().getFullYear()) {\r\n let currentMonth = new Date()?.getMonth() + 1;\r\n let monthsList = months.filter((item) => parseInt(item?.value) <= currentMonth);\r\n if (monthsList) return monthsList;\r\n } else {\r\n return months;\r\n }\r\n };\r\n\r\n //we need to show current date if time passed 13:30 PM else previous date\r\n const handleSpiSriDate = () => {\r\n let today = new Date();\r\n let minutes = today.getMinutes() + today.getHours() * 60;\r\n let dd = String(today.getDate()).padStart(2, '0');\r\n let mm = String(today.getMonth() + 1).padStart(2, '0');\r\n let yyyy = today.getFullYear();\r\n let showDate = '';\r\n if (minutes > 810) {\r\n /**\r\n * changed by: sai krishna thalla\r\n * reason : before and after 1:30pm the dates are not changing due to dates becoming 0 or undefined \r\n * date: 7-sep-2022\r\n */\r\n //showDate = `${yyyy}-${mm}-${dd}`;\r\n showDate = moment().format(DATE_FORMAT)\r\n } else {\r\n //showDate = `${yyyy}-${mm}-${dd - 1}`;\r\n showDate = moment().subtract(1, 'days').format(DATE_FORMAT)\r\n }\r\n return showDate;\r\n };\r\n return (\r\n <>\r\n {props?.isHideBar ? ( \r\n\r\n \r\n {t('FILTER.EXPAND_BAR')}\r\n \r\n props.setBar(!props.isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n
\r\n ) : (\r\n \r\n
\r\n \r\n )}\r\n \r\n );\r\n}\r\n\r\nexport default DroughtSidebar;\r\n","/* eslint-disable no-unused-vars */\r\nimport React, { useState, useEffect } from 'react';\r\nimport _ from 'lodash';\r\nimport Chart from 'react-apexcharts';\r\nimport '../../assets/CSS/Charts.css';\r\nimport closeIcon from '../../assets/Images/closeIcon.svg';\r\nimport {\r\n renderGenericDateFormat,\r\n renderChartTime,\r\n} from '../../Components/common/utils';\r\nimport { CHART_LABEL_COLORS,POLYGON,INDICES_PARAMS } from '../../Components/constants';\r\n\r\n// demo comment , need to remove later\r\nfunction DroughtChart(props) {\r\n const {\r\n chartData,\r\n renderCharts,\r\n temporalAggregation,\r\n selectedParam,\r\n compareParam,\r\n isCompareClicked,\r\n region,\r\n initialSelectedDate,\r\n location,\r\n isHideBar,\r\n selectedModule,\r\n rainfallAnomalyTime,\r\n compareRainfallAnomalyTime\r\n } = props;\r\n\r\n const [series, setSeries] = useState([]);\r\n\r\n const [YAxisOptions, setYAxisOptions] = useState([\r\n {\r\n axisTicks: {\r\n show: true,\r\n },\r\n axisBorder: {\r\n show: true,\r\n color: '#008FFB',\r\n },\r\n labels: {\r\n style: {\r\n colors: '#008FFB',\r\n fontSize: '12px',\r\n fontFamily: 'National',\r\n },\r\n formatter: function(value) {\r\n if (!value == null || !isNaN(value)) {\r\n if (value % 1 !== 0) {\r\n if(selectedModule.api_slug === 'drought-prediction')\r\n return value.toFixed(3)\r\n else\r\n return value.toFixed(2);\r\n } else {\r\n return value;\r\n }\r\n }\r\n },\r\n },\r\n title: {\r\n text: '',\r\n style: {\r\n color: '#008FFB',\r\n },\r\n offsetX: 60,\r\n },\r\n tooltip: {\r\n enabled: true,\r\n },\r\n scaleLabel: {\r\n display: true,\r\n labelString: '',\r\n },\r\n ticks: {\r\n callback: function(value) {\r\n return value;\r\n },\r\n },\r\n },\r\n ]);\r\n\r\n const [options, setOptions] = useState({\r\n chart: {\r\n type: 'column',\r\n stacked: false,\r\n zoom: {\r\n enabled: true,\r\n type: 'x',\r\n },\r\n },\r\n dataLabels: {\r\n enabled: true,\r\n enabledOnSeries: [0, 1],\r\n },\r\n stroke: {\r\n // width: [1, 1, 4],\r\n width: 4,\r\n },\r\n title: {\r\n text: 'Data Sources',\r\n align: 'left',\r\n offsetX: 100,\r\n style: {\r\n fontSize: '20px',\r\n fontWeight: 'normal',\r\n fontFamily: 'National',\r\n color: '#2A547C',\r\n },\r\n },\r\n plotOptions: {\r\n bar: {\r\n columnWidth: '55%',\r\n barHeight: '70%',\r\n },\r\n },\r\n xaxis: {\r\n categories: [],\r\n labels: {\r\n showDuplicates: false,\r\n style: {\r\n fontSize: '12px',\r\n fontFamily: 'National',\r\n },\r\n crossShair: {\r\n stroke: {\r\n curve: 'straight',\r\n },\r\n },\r\n },\r\n },\r\n yaxis: YAxisOptions,\r\n tooltip: {\r\n fixed: {\r\n enabled: true,\r\n position: 'topLeft', // topRight, topLeft, bottomRight, bottomLeft\r\n offsetY: 30,\r\n offsetX: 60,\r\n },\r\n },\r\n legend: {\r\n horizontalAlign: 'left',\r\n offsetX: 40,\r\n },\r\n });\r\n\r\n useEffect(()=>{\r\n if(isHideBar){\r\n setOptions((prev)=>{\r\n return {\r\n ...prev,\r\n title: {\r\n ...prev.title,\r\n align: 'left',\r\n offsetX: 700\r\n }\r\n }\r\n })\r\n }\r\n else{\r\n setOptions((prev)=>{\r\n return {\r\n ...prev,\r\n title: {\r\n ...prev.title,\r\n align: 'left',\r\n offsetX: 550\r\n }\r\n }\r\n })\r\n }\r\n },[isHideBar])\r\n\r\n useEffect(() => {\r\n let seriesData = [];\r\n let YAxisoptionsData = YAxisOptions;\r\n let formattedDates;\r\n let dates;\r\n\r\n/**\r\n * added by : sai krishna thalla\r\n * reason: dates added to rainfall anamoly graph and for downloadable file names\r\n * date: 6-dec-2022 \r\n */\r\n let startDate;\r\n let endDate;\r\n let selectedRainfallAnamolyDates = '';\r\n let compareRainfallAnamolyDates = '';\r\n let subtitleTime = ''\r\n if (selectedParam?.api_slug == INDICES_PARAMS.RAINFALL_ANAMOLY.api_slug){\r\n selectedRainfallAnamolyDates = rainfallAnomalyTime?.month?.value + '/' + rainfallAnomalyTime?.end_year?.value\r\n subtitleTime = selectedRainfallAnamolyDates\r\n if (compareParam?.api_slug == INDICES_PARAMS.RAINFALL_ANAMOLY.api_slug){\r\n compareRainfallAnamolyDates = compareRainfallAnomalyTime?.month?.value + '/' + compareRainfallAnomalyTime?.end_year?.value \r\n subtitleTime = selectedRainfallAnamolyDates + \"-\" + compareRainfallAnamolyDates\r\n }\r\n }\r\n else{\r\n startDate = renderChartTime(initialSelectedDate?.startDate);\r\n endDate = renderChartTime(initialSelectedDate?.endDate);\r\n }\r\n\r\n if (!_.isEmpty(chartData) && chartData?.graph_data && ((startDate && endDate) || (selectedRainfallAnamolyDates || compareRainfallAnamolyDates))) {\r\n dates = chartData?.graph_data[0]?.millis;\r\n if (chartData?.graph_data?.length === 2) {\r\n dates =\r\n chartData?.graph_data[0]?.millis.length > chartData?.graph_data[1]?.millis.length\r\n ? chartData?.graph_data[0]?.millis\r\n : chartData?.graph_data[1]?.millis;\r\n }\r\n if (!_.isEmpty(dates)) {\r\n formattedDates = dates?.length\r\n ? dates.map(item => {\r\n let dateFormat = new Date(item);\r\n return renderGenericDateFormat(dateFormat);\r\n })\r\n : '';\r\n }\r\n if (chartData?.graph_data?.length) {\r\n chartData?.graph_data?.map((data, index) => {\r\n const graphIndices = Object.values(data)[0];\r\n let type = selectedParam?.name;\r\n const graphSeriesData = selectedModule.api_slug === 'drought-prediction' ? graphIndices.map(item => item.toFixed(3)) : graphIndices.map(item => item.toFixed(2));\r\n if (isCompareClicked && !_.isEmpty(compareParam)) {\r\n type = `${data?.layerType} (${data?.location})`;\r\n } else if (region?.length) {\r\n type = data.layerType\r\n ? data.layerType === 'marker'\r\n ? `point(${data.latlng[1].toFixed(2)},${data.latlng[0].toFixed(2)})`\r\n : data.layerType + '-' + data?.polygonCount\r\n : type;\r\n }\r\n if (graphSeriesData && graphSeriesData?.length) {\r\n seriesData.push({\r\n name: type,\r\n type: 'line',\r\n data: graphSeriesData,\r\n });\r\n\r\n const duplicateYAxis = YAxisoptionsData?.findIndex(\r\n item => item.seriesName || item.name === type,\r\n );\r\n\r\n if (index === 0) {\r\n YAxisoptionsData[0] = {\r\n ...YAxisoptionsData[0],\r\n labels: {\r\n style: {\r\n colors: CHART_LABEL_COLORS[index],\r\n fontSize: '12px',\r\n fontFamily: 'National',\r\n },\r\n },\r\n title: {\r\n text: type,\r\n align:'middle',\r\n style: {\r\n color: CHART_LABEL_COLORS[index],\r\n },\r\n },\r\n };\r\n }\r\n if (index > 0 && duplicateYAxis < 0) {\r\n YAxisoptionsData.push({\r\n seriesName: type,\r\n opposite: true,\r\n axisTicks: {\r\n show: true,\r\n },\r\n axisBorder: {\r\n show: true,\r\n color: CHART_LABEL_COLORS[index],\r\n },\r\n labels: {\r\n style: {\r\n colors: CHART_LABEL_COLORS[index],\r\n fontSize: '12px',\r\n fontFamily: 'National',\r\n },\r\n },\r\n title: {\r\n text: type,\r\n align: 'middle',\r\n style: {\r\n color: CHART_LABEL_COLORS[index],\r\n },\r\n },\r\n\r\n });\r\n }\r\n }\r\n });\r\n }\r\n\r\n let title = `${selectedParam?.name} (${temporalAggregation?.name})`;\r\n if (!_.isEmpty(compareParam) && isCompareClicked) {\r\n title = `${selectedParam?.name}-${compareParam?.name} (${temporalAggregation?.name})`;\r\n }\r\n\r\n\r\n let fileName =\r\n title + \r\n '(' +\r\n renderChartTime(initialSelectedDate?.startDate) +\r\n '-' +\r\n renderChartTime(initialSelectedDate?.endDate) +\r\n ')';\r\n\r\n if (selectedParam.api_slug == \"drought-monitor-v2/rainfall_anomaly\"){\r\n fileName = title + \"(\" + subtitleTime + \")\"\r\n }\r\n\r\n if(location?.region && location?.region.length){\r\n if (location?.region[0].latlngs.length > 3){\r\n fileName = fileName + \"-\" + POLYGON;\r\n }\r\n else {\r\n if(location?.region.length == '1'){\r\n fileName = fileName + \"-\" + parseFloat(location?.region[0].latlngs[0]).toFixed(2).toString() + \"-\" + parseFloat(location?.region[0].latlngs[1]).toFixed(2).toString() ;\r\n }\r\n }\r\n }\r\n else if(location?.district?.value){\r\n fileName = fileName + \"-\" +location?.district?.name;\r\n }\r\n else if (location?.state?.value) {\r\n fileName = fileName + \"-\" + location?.state?.name;\r\n }\r\n else {\r\n fileName = fileName + \"-\" + location?.country?.name;\r\n }\r\n\r\n setOptions(prev => ({\r\n ...prev,\r\n title: {\r\n ...options.title,\r\n text: title,\r\n align: 'left',\r\n offsetX: 600,\r\n },\r\n xaxis: {\r\n ...options.xaxis,\r\n type: 'datetime',\r\n categories: formattedDates,\r\n tickPlacement: 'on',\r\n min: formattedDates && formattedDates[0],\r\n max: formattedDates && formattedDates[formattedDates.length - 1],\r\n labels: {\r\n showDuplicates: false,\r\n hideOverlappingLabels: true,\r\n format: 'M/DD @ hA',\r\n },\r\n //range: 30,\r\n },\r\n dataLabels: {\r\n enabled: true,\r\n enabledOnSeries: [0, 1],\r\n },\r\n chart: {\r\n ...options.chart,\r\n toolbar: {\r\n show: true,\r\n export: {\r\n csv: {\r\n filename: fileName,\r\n columnDelimiter: ',',\r\n headerCategory: 'Date',\r\n headerValue: 'value',\r\n dateFormatter(timestamp) {\r\n return new Date(timestamp).toDateString();\r\n },\r\n },\r\n svg: {\r\n filename: fileName,\r\n columnDelimiter: ',',\r\n headerCategory: 'Date',\r\n headerValue: 'value',\r\n dateFormatter(timestamp) {\r\n return new Date(timestamp).toDateString();\r\n },\r\n },\r\n png: {\r\n filename: fileName,\r\n columnDelimiter: ',',\r\n headerCategory: 'Date',\r\n headerValue: 'value',\r\n dateFormatter(timestamp) {\r\n return new Date(timestamp).toDateString();\r\n },\r\n },\r\n },\r\n tools: {\r\n customIcons: [\r\n {\r\n icon: `\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default DroughtChart;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { FeatureGroup, Circle } from 'react-leaflet';\r\nimport { EditControl } from 'react-leaflet-draw';\r\nimport _ from 'lodash';\r\nimport 'leaflet-draw';\r\nimport '../../../node_modules/leaflet-draw/dist/leaflet.draw.css';\r\nimport '../../../node_modules/leaflet/dist/leaflet.css';\r\nimport 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package\r\nimport 'leaflet-defaulticon-compatibility';\r\nimport PropTypes from 'prop-types';\r\nimport { DRAW_SHAPE } from './../../Components/constants/index';\r\nimport { t } from 'react-multi-lang';\r\nimport { showError } from '../../Components/Notifications';\r\nimport { getRegionData, removeRegionTooltip, setRegionData } from '../../Components/common/utils';\r\n\r\nfunction DrawShape(props) {\r\n const { handleSelectedRegion, country, state, district,selectedModule, isHideViewGraph } = props;\r\n const [editableFG, setEditableFG] = useState(null);\r\n const [mapLayers, setMapLayers] = useState([]);\r\n let drawControlRef = React.useRef();\r\n\r\n useEffect(() => {\r\n let mapData = JSON.parse(JSON.stringify(mapLayers))\r\n handleSelectedRegion(mapData);\r\n setRegionData(mapData);\r\n }, [mapLayers]);\r\n\r\n useEffect(() => {\r\n if (editableFG) {\r\n // here you have all the stored layers\r\n const drawnItems = editableFG?._layers;\r\n if (!_.isEmpty(drawnItems)) {\r\n Object.keys(drawnItems).forEach((layerid, index) => {\r\n if (index === 0) {\r\n if (_.isEmpty(mapLayers)) {\r\n editableFG.removeLayer(drawnItems[layerid]);\r\n return;\r\n }\r\n }\r\n if (index < DRAW_SHAPE.MAXIMUM_SHAPE) {\r\n return;\r\n } else {\r\n const layer = drawnItems[layerid];\r\n editableFG.removeLayer(layer);\r\n setMapLayers(mapLayers.filter((data) => data.id !== Number(layerid)));\r\n showError(t('EDIT_CONTROL.MAXIMUM_SHAPE_ERROR'));\r\n }\r\n });\r\n }\r\n }\r\n }, [editableFG]);\r\n\r\n useEffect(() => {\r\n removeLayers(editableFG)\r\n }, [country, state, district]);\r\n\r\n useEffect(()=>{\r\n if((!_.isEmpty(selectedModule) && selectedModule?.api_slug === \"drought-decision-support\") || isHideViewGraph){\r\n removeLayers(editableFG);\r\n }\r\n },[selectedModule,isHideViewGraph])\r\n\r\n let tempArray = [];\r\n\r\n const removeLayers = () => {\r\n if (!_.isEmpty(editableFG)) {\r\n // here you have all the stored layers\r\n const drawnItems = editableFG?._layers;\r\n // if the number of layers is bigger than 1 then delete the first\r\n if (!_.isEmpty(drawnItems)) {\r\n Object.keys(drawnItems).forEach((layerid, index) => {\r\n const layer = drawnItems[layerid];\r\n editableFG.removeLayer(layer);\r\n });\r\n setMapLayers('');\r\n }\r\n }\r\n }\r\n\r\n const onCreated = (e) => {\r\n const { layerType, layer } = e;\r\n let regionData = getRegionData();\r\n let polyCount = regionData?.length\r\n ? (regionData?.filter((item) => item.layerType === 'polygon')).length\r\n : 0;\r\n\r\n if (layerType === 'marker') {\r\n let latlang = [layer._latlng.lat, layer._latlng.lng];\r\n setMapLayers((data) => [\r\n ...data,\r\n {\r\n id: layer._leaflet_id,\r\n layerType,\r\n polygonCount: '',\r\n latlngs: [...latlang],\r\n },\r\n ]);\r\n tempArray.push(e);\r\n setEditableFG(tempArray);\r\n\r\n return;\r\n }\r\n if (layerType === 'polygon') {\r\n const { _leaflet_id } = layer;\r\n let layerLatLng = [];\r\n const cordinatesArray = layer.getLatLngs()[0];\r\n cordinatesArray.map(({ lat, lng }) => {\r\n layerLatLng.push([lat, lng]);\r\n });\r\n setMapLayers((layers) => [\r\n ...layers,\r\n {\r\n id: _leaflet_id,\r\n layerType,\r\n latlngs: layerLatLng,\r\n polygonCount: polyCount + 1,\r\n },\r\n ]);\r\n tempArray.push(e);\r\n setEditableFG(tempArray);\r\n }\r\n };\r\n\r\n const onEdited = (e) => {\r\n const {\r\n layers: { _layers },\r\n } = e;\r\n Object.values(_layers).map(({ _leaflet_id, editing }) => {\r\n let layerLatLng = [];\r\n\r\n if (editing.latlngs?.length) {\r\n const cordinatesArray = editing.latlngs[0];\r\n\r\n cordinatesArray?.length &&\r\n cordinatesArray[0].map(({ lat, lng }) => {\r\n layerLatLng.push([lat, lng]);\r\n });\r\n\r\n setMapLayers((layers) =>\r\n layers.map((l) => (l.id === _leaflet_id ? { ...l, latlngs: [...layerLatLng] } : l)),\r\n );\r\n } else if (!_.isEmpty(editing._marker._latlng)) {\r\n let cordinates = editing._marker._latlng;\r\n\r\n setMapLayers((layers) =>\r\n layers.map((l) =>\r\n l.id === _leaflet_id ? { ...l, latlngs: [cordinates.lat, cordinates.lng] } : l,\r\n ),\r\n );\r\n }\r\n });\r\n };\r\n\r\n const onDelete = (e) => {\r\n const {\r\n layers: { _layers },\r\n } = e;\r\n\r\n Object.values(_layers).map(({ _leaflet_id }) => {\r\n setMapLayers((layers) => layers.filter((l) => l.id !== _leaflet_id));\r\n });\r\n\r\n };\r\n\r\n const onFeatureGroupReady = (reactFGref) => {\r\n if (reactFGref) {\r\n const drawnItems = reactFGref?._layers;\r\n let count = 1;\r\n var elements = document.getElementsByClassName('draw-polygon');\r\n var markerElements = document.getElementsByClassName('draw-marker');\r\n\r\n removeRegionTooltip(drawnItems, elements);\r\n removeRegionTooltip(drawnItems, markerElements);\r\n\r\n Object.values(drawnItems)?.forEach((layer, index) => {\r\n if (!_.isEmpty(layer)) {\r\n if (layer.hasOwnProperty('_latlngs')) {\r\n if (index <= 1) {\r\n layer.bindTooltip(`polygon-${count}`, {\r\n className: 'draw-polygon',\r\n permanent: true,\r\n direction: 'top',\r\n });\r\n count++;\r\n }\r\n }\r\n else if(layer?.hasOwnProperty('_latlng')){\r\n let tooltipName = `(${(layer.editing?._marker?._latlng.lat)?.toFixed(\r\n 2||''\r\n )},${(layer.editing?._marker?._latlng.lng)?.toFixed(2) || ''})`;\r\n layer.bindTooltip(tooltipName, {\r\n className: 'draw-marker',\r\n permanent: true,\r\n direction: 'top',\r\n });\r\n }\r\n }\r\n });\r\n }\r\n // store the ref for future access to content\r\n setEditableFG(reactFGref);\r\n };\r\n\r\n const handleMarker = (e) => {};\r\n const onMounted = (e) => {\r\n drawControlRef.current = e;\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n {!_.isEmpty(chartData) && (series.length || !_.isEmpty(options)) ? (\r\n <>\r\n 50\r\n ? `${chartData?.graph_data[0]?.millis?.length * 30}px`\r\n : '100%'\r\n }\r\n options={options}\r\n series={series}\r\n type=\"line\"\r\n height=\"300px\"\r\n />\r\n \r\n ) : (\r\n ''\r\n )}\r\n
\r\n \r\n {\r\n onFeatureGroupReady(featureGroupRef);\r\n }}\r\n >\r\n
\r\n );\r\n}\r\n\r\nDrawShape.propTypes = {\r\n handleSelectedRegion: PropTypes.func,\r\n};\r\n\r\nexport default DrawShape;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport {\r\n MapContainer,\r\n TileLayer,\r\n GeoJSON,\r\n useMap,\r\n useMapEvents,\r\n ZoomControl,\r\n LayersControl,\r\n LayerGroup,\r\n} from 'react-leaflet';\r\nimport L from 'leaflet';\r\nimport _ from 'lodash';\r\nimport moment from 'moment';\r\nimport 'leaflet-side-by-side';\r\nimport { MdKeyboardArrowLeft} from 'react-icons/md';\r\nimport { Row, Col, Button, FormGroup, Alert } from 'reactstrap';\r\nimport 'leaflet/dist/leaflet.css';\r\nimport 'leaflet.control.opacity/dist/L.Control.Opacity.css';\r\nimport 'leaflet.control.opacity';\r\nimport SplitterLayout from 'react-splitter-layout';\r\nimport 'react-splitter-layout/lib/index.css';\r\nimport '../../assets/CSS/LeafletWrapper.css';\r\nimport '../../assets/CSS/Header.css';\r\nimport myConstClass from '../../Constants';\r\nimport {\r\n IDSI_AND_VWI,\r\n INDICES_PARAMS,\r\n OTHER_INDICES_API_INDICES_SLUGS,\r\n DEFAULT_COUNTRY,\r\n DRY_SPELL,\r\n DDSKEY\r\n} from '../../Components/constants/index';\r\nimport { t } from 'react-multi-lang';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n getDroughtMapRequest,\r\n getDroughtTimeSeriesRequest,\r\n getDroughtMapSuccess,\r\n getMapPreferenceSuccess,\r\n getMapPreferenceBoundariesSuccess,\r\n getWeatherForecastData,\r\n getFinalDroughtMapRequest,\r\n getWeatherForecastDataSuccess,\r\n getFinalDroughtMapSuccess,\r\n getFinalDroughtMapFailed,\r\n} from '../../redux/actions';\r\nimport DroughtSidebar from './sidebar';\r\nimport Loader from '../../Components/common/TextLoader';\r\nimport GraphLoader from '../../Components/common/GraphLoader';\r\nimport { showError } from '../../Components/Notifications.js';\r\nimport CustomLegend from '../WeatherForecast/CustomLayerControl/CustomLegend';\r\nimport DiscreteLegend from '../WeatherForecast/CustomLayerControl/DiscreteLegend';\r\nimport MapPreferences from '../WeatherForecast/MapPreferences';\r\nimport DroughtChart from './DroughtChart';\r\nimport DrawShape from './DrawShape';\r\nimport { \r\n API_BASE_URL,\r\n MASTER_SERVER_BASE_URL,\r\n AXIOS_INSTANCE,\r\n AXIOS_INSTANCE_MASTER_SERVER,\r\n} from '../../redux/api/apiEndPoint';\r\nimport { CgCloseO } from 'react-icons/cg';\r\nimport mapPreferenceIcon from '../../assets/Images/mapPreferenceIcon.svg';\r\nimport {\r\n SOUTH_ASIA_CONST,\r\n MAP_PREFERENCES_lABELS,\r\n DATA_SOURCES,\r\n GEOJSON_COUNTRY_TOOLTIP_DATA,\r\n GEOJSON_COUNTRY_DATA,\r\n DROUGHT_MODULES_CONST\r\n} from '../../Components/constants';\r\nimport { returnDSSDateFormat,isLogedIn } from '../../Components/common/utils';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { object } from 'prop-types';\r\n\r\n\r\nconst DroughtMap = props => {\r\n const history = useHistory();\r\n const { popUpSelectedModule, modal } = props;\r\n\r\n const dispatch = useDispatch();\r\n const { Overlay } = LayersControl;\r\n const [isOpenMapModel, setIsOpenMapModel] = useState(false);\r\n const [isOpenAlertIndicesTable, setIsOpenAlertIndicesTable] = useState(false);\r\n const [map, setMap] = useState(false);\r\n const [isLoading, setIsLoading] = useState(false);\r\n const layerRef = useRef([]);\r\n const splitterRef = useRef(null);\r\n const [mapPreferRefs, setMapPreferRefs] = useState([]);\r\n const [isHideBar, setBar] = useState(false);\r\n const [params, setParams] = useState('');\r\n const [precipitationThreshold, setPrecipitationThreshold] = useState(20);\r\n const [comparePrecipitationThreshold, setComparePrecipitationThreshold] = useState(20);\r\n const [precipitationThresholdFlood, setPrecipitationThresholdFlood] = useState(-14);\r\n const [comparePrecipitationThresholdFlood, setComparePrecipitationThresholdFlood] = useState(-14);\r\n const [drySpellPrecipitationThreshold, setDrySpellPrecipitationThreshold] = useState(2.5);\r\n const [compareDrySpellPrecipitationThresold, setCompareDrySpellPrecipitationThresold] = useState(\r\n 2.5,\r\n );\r\n const [selectedParam, setSelectedParam] = useState('');\r\n const [selectedYear, setSelectedYear] = useState('');\r\n const [previousParam, setPreviousParam] = useState('');\r\n const [compareSelectedParam, setCompareSelectedParam] = useState('');\r\n const [initialSelectedDate, setInitialSelectedDate] = useState([]);\r\n const [finalSelectedDate, setFinalSelectedDate] = useState([]);\r\n const [thresholdData, setThresholdData] = useState([]);\r\n const [DroughtIndicators, setDroughtIndicators] = useState([]);\r\n const [DSSTabularDate, setDSSTabularDate] = useState({\r\n startDate: '',\r\n endDate: '',\r\n });\r\n const [mapPreferencesData, setMapPreferencesData] = useState([]);\r\n const [geoJsonData, setGeoJsonData] = useState([]);\r\n const [geoJsonAllData, setGeoJsonAllData] = useState([]);\r\n const [geoJsonLayersData, setGeoJsonLayerData] = useState([]);\r\n const [getBoundariesData, setGetBoundariesData] = useState([]);\r\n const [selectedParamLegendData, setSelectedParamLegendData] = useState([]);\r\n const [compareParamLegendData, setCompareParamLegendData] = useState([]);\r\n const [selectedMapPreferLegendData, setSelectedMapPreferLegendData] = useState([]);\r\n const [showCharts, setShowCharts] = useState(false);\r\n const [graphData, setGraphData] = useState('');\r\n const mapRef = useRef(null);\r\n const [mapControl, setMapControl] = useState({});\r\n const [mapPreferUrl, setMapPreferUrl] = useState('');\r\n const [mapLayerOpacity, setMapLayerOpacity] = useState({ layer: '' });\r\n const [opacityControl, setOpacityControl] = useState('');\r\n const [compareView, setCompareView] = useState([]);\r\n const [isCompareClicked, setIsCompareClicked] = useState(false);\r\n const [mapPreferenceGeoJsonloading, setMapPreferenceGeoJsonloading] = useState(false);\r\n const [errorData, setErrorData] = useState({ showError: false, data: '' });\r\n const [isGraphLoading, setIsGraphLoading] = useState();\r\n const [selectedRegionId, setSelectedRegionId] = useState('');\r\n const [isOpenWeatherForecastDataModal, setIsOpenWeatherForecastDataModal] = useState(false);\r\n const [selectedDroughtPhase, setSelectedDroughtPhase] = useState('');\r\n const [weatherModuleData, setWeatherModuleData] = useState('');\r\n const [DSSTimeSeriesData, setDSSTimeSeriesData] = useState('');\r\n const [isShowDroughtCheckModal, setIsShowDroughtCheckModal] = useState(false);\r\n const [mapPrefereTileLayerRef, setMapPrefereTileLayerRef] = useState([]);\r\n const [isThresholdDataLoading, setIsThresholdDataLoading] = useState(false);\r\n const [indexLayers, setIndexLayers] = useState([]);\r\n const [selectedModule, setSelectedModule] = useState({\r\n value: 'drought monitor',\r\n label: 'Drought Monitor',\r\n api_slug: 'drought-monitor',\r\n });\r\n const [finalDroughtParameterMonthsList, setFinalDroughtParameterMonthsList] = useState([\r\n {\r\n id: 'smci',\r\n slug: 'smci',\r\n name: 'SMCI',\r\n category: 'Mid Season',\r\n options: [],\r\n selectedOption: {},\r\n },\r\n {\r\n id: 'vhi',\r\n slug: 'vhi',\r\n name: 'VHI',\r\n category: 'Mid Season',\r\n options: [],\r\n selectedOption: {},\r\n },\r\n {\r\n id: 'idsi',\r\n slug: 'idsi',\r\n name: 'IDSI',\r\n category: 'Terminal',\r\n options: [],\r\n selectedOption: {},\r\n },\r\n ]);\r\n const [tableData, setTableData] = useState([]);\r\n const [chartParamsData, setChartParamsData] = useState({\r\n temporalAggregation: '',\r\n selectedParam: '',\r\n compareParam: '',\r\n region: '',\r\n initialSelectedDate: '',\r\n location: '',\r\n });\r\n const [mapPreferences, setMapPreferences] = useState({\r\n country: { layer: useRef(), color: '', data: '', country: '' },\r\n states_or_provinces: { layer: useRef(), color: '', data: '', country: '' },\r\n districts_or_cities: { layer: useRef(), color: '', data: '', country: '' },\r\n meteorological_locations: { layer: useRef(), color: '', data: '', country: '' },\r\n basins: { layer: useRef(), color: '', data: '', country: '' },\r\n rivers_or_reservoirs: { layer: useRef(), color: '', data: '', country: '' },\r\n talukas: { layer: useRef(), color: '', data: '', country: '' },\r\n });\r\n const [currentUserLocation, setCurrenUserLocation] = useState('India');\r\n const [selectedLocation, setSelectedLocation] = useState({\r\n country: '',\r\n state: '',\r\n district: '',\r\n basin: '',\r\n region: '',\r\n markerPointData: '',\r\n });\r\n const [compareLocation, setCompareLocation] = useState({\r\n country: '',\r\n state: '',\r\n district: '',\r\n basin: '',\r\n region: '',\r\n markerPointData: '',\r\n });\r\n const [cordinateAndZoom, setCordinateAndZoom] = useState({\r\n cordinates: [23.4073, 79.446],\r\n locationCordinates: [23.4073, 79.446],\r\n markerCordinates: [23.4073, 79.446],\r\n zoom: 5.5,\r\n });\r\n const [cordinateAndZoomReset, setCordinateAndZoomReset] = useState({\r\n cordinates: [23.4073, 79.446],\r\n locationCordinates: [23.4073, 79.446],\r\n markerCordinates: [23.4073, 79.446],\r\n zoom: 5.5,\r\n });\r\n const [compareCordinates, setCompareCordinates] = useState([]);\r\n const [isPreviewIndicesData, setIsPreviewIndicesData] = useState(false);\r\n const [mapData, setMapData] = useState('');\r\n const [mapUrl, setMapUrl] = useState({\r\n name: '',\r\n url: '',\r\n });\r\n\r\n const [state, setState] = useState({\r\n min: 0,\r\n max: 0,\r\n });\r\n\r\n const [layerControl, setLayerControl] = useState({\r\n firstLayer: {},\r\n secondLayer: {},\r\n });\r\n\r\n const [temporalAggregation, setTemporalAggregation] = useState('');\r\n const [isFinalDroughtMap, setIsFinalDroughtMap] = useState(false);\r\n const [applyLayers, setApplyLayers] = useState(false);\r\n const [isHideViewGraph, setIsHideViewGraph] = useState(false);\r\n const [selectedDPIndicesMonth, setSelectedDPIndicesMonth] = useState({\r\n month: '3',\r\n value: '3',\r\n id: '3',\r\n label: '3',\r\n frequency: '03',\r\n });\r\n const [compareSelectedDPIndicesMonth, setCompareSelectedDPIndicesMonth] = useState({\r\n month: '3',\r\n value: '3',\r\n id: '3',\r\n label: '3',\r\n frequency: '03',\r\n });\r\n\r\n const [rainfallAnomalyTime, setRainfallAnomalyTime] = useState({\r\n start_year: '',\r\n end_year: '',\r\n month: '',\r\n selectedStartYear:'',\r\n selectedEndYear:''\r\n });\r\n\r\n const [compareRainfallAnomalyTime, setCompareRainfallAnomalyTime] = useState({\r\n start_year: '',\r\n end_year: '',\r\n month: '',\r\n selectedStartYear:'',\r\n selectedEndYear:''\r\n });\r\n\r\n const { Weather, DroughtMonitor, boundries } = useSelector(state => ({\r\n Weather: state.Weather,\r\n DroughtMonitor: state.DroughtMonitor,\r\n boundries: state.Map_Preference,\r\n }));\r\n\r\n const [stateNameFromLocation, setStateNameFromLocation] = useState('');\r\n //useeffect for getting map layers data from redux\r\n useEffect(() => {\r\n if ( !isLogedIn()) {\r\n let path = window.location.pathname;\r\n if (window.location.search == DDSKEY){\r\n let queryParam = window.location.search\r\n history.push(`/login?prevPath=${path.substring(1,path.length)}&${queryParam.substring(1,queryParam.length)}`);\r\n } else {\r\n history.push(`/login?prevPath=${path.substring(1,path.length)}`);\r\n }\r\n }\r\n dispatch(getMapPreferenceSuccess(''));\r\n setMapData('');\r\n setIsOpenWeatherForecastDataModal(false);\r\n dispatch(getWeatherForecastDataSuccess(''));\r\n return () => {\r\n setSelectedParamLegendData('');\r\n setCompareParamLegendData('');\r\n dispatch(getMapPreferenceBoundariesSuccess(''));\r\n dispatch(getWeatherForecastDataSuccess(''));\r\n dispatch(getFinalDroughtMapSuccess({}));\r\n dispatch(getFinalDroughtMapFailed({}));\r\n dispatch(getDroughtMapSuccess({}));\r\n setShowCharts(false);\r\n };\r\n }, []);\r\n\r\n // useEffect (()=>{\r\n // if(modal === false){\r\n // setIsOpenMapModel(true)\r\n // }else{\r\n // setIsOpenMapModel(false)\r\n // }\r\n // },[modal])\r\n\r\n const firstRun = useRef(true);\r\n useEffect(() => {\r\n if (firstRun.current) {\r\n firstRun.current = false;\r\n return;\r\n }\r\n if (boundries?.mapPreferenceData) {\r\n setGetBoundariesData(boundries?.mapPreferenceData?.data?.result);\r\n }\r\n }, [boundries?.mapPreferenceData]);\r\n\r\n useEffect(() => {\r\n if (getBoundariesData && getBoundariesData?.length) {\r\n let API_URL = [];\r\n mapPreferRefs.current = [];\r\n mapPrefereTileLayerRef.current = [];\r\n getBoundariesData?.map(item => {\r\n if (item?.data && item?.data.length) {\r\n item.data.map(boundary => {\r\n if (boundary?.boundary_data_url.length) {\r\n setGeoJsonData([]);\r\n setGeoJsonAllData([]);\r\n let mapPreferKeys = Object.keys(mapPreferences);\r\n if (mapPreferKeys) {\r\n mapPreferKeys.map(item => {\r\n let selectedLayer = mapPreferences[item];\r\n if (selectedLayer?.layer && selectedLayer?.layer?.current)\r\n selectedLayer?.layer?.current?.clearLayers();\r\n selectedLayer.color = '';\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [item]: selectedLayer,\r\n };\r\n });\r\n });\r\n }\r\n setMapPreferenceGeoJsonloading(true);\r\n let config = {\r\n name: boundary?.boundarytype?.slug,\r\n id: boundary?.boundarytype_id,\r\n color: boundary?.boundarytype?.color?.code,\r\n category: boundary?.category,\r\n country_id: boundary?.country_id,\r\n };\r\n if (\r\n currentUserLocation === DEFAULT_COUNTRY.name &&\r\n selectedLocation?.country?.name === SOUTH_ASIA_CONST.name &&\r\n boundary?.boundarytype?.slug === MAP_PREFERENCES_lABELS.COUNTRY\r\n ) {\r\n API_URL.push(AXIOS_INSTANCE.get(boundary?.boundary_data_india_url, config));\r\n } else {\r\n API_URL.push(AXIOS_INSTANCE.get(boundary?.boundary_data_url, config));\r\n }\r\n } else {\r\n let ref = React.createRef();\r\n ref.current = {\r\n boundary_id: boundary?.boundarytype_id,\r\n name: boundary?.boundarytype?.boundarytype,\r\n layer: React.createRef(),\r\n };\r\n mapPreferRefs.current.push(ref);\r\n }\r\n });\r\n }\r\n });\r\n Promise.all(API_URL).then(response => {\r\n let res = JSON.parse(JSON.stringify(response));\r\n setMapPreferenceGeoJsonloading(false);\r\n setGeoJsonLayerData(res);\r\n });\r\n }\r\n }, [getBoundariesData]);\r\n\r\n // useEffect(() => {\r\n // if (DroughtMonitor.getDssThresholdData) {\r\n // if (DroughtMonitor.getDssThresholdData?.data) {\r\n // let data = DroughtMonitor.getDssThresholdData.data;\r\n // if (data?.result?.length) {\r\n // setThresholdData(data?.result[0]);\r\n // }\r\n // }\r\n // } else {\r\n // setThresholdData([]);\r\n // }\r\n // }, [DroughtMonitor.getDssThresholdData]);\r\n\r\n useEffect(() => {\r\n let selectedGeoJsonData = [];\r\n if (geoJsonLayersData?.length && geoJsonData?.length) {\r\n geoJsonData?.map(item => {\r\n let filteredObj = geoJsonLayersData?.find(\r\n layer => layer.config.id === item.id && layer.config.country_id === item.country_id,\r\n );\r\n if (!_.isEmpty(filteredObj)) {\r\n filteredObj.fromMapPreferences = item.fromMapPreferences;\r\n selectedGeoJsonData.push(filteredObj);\r\n }\r\n });\r\n } else {\r\n selectedGeoJsonData = [];\r\n }\r\n setGeoJsonAllData(selectedGeoJsonData);\r\n }, [geoJsonLayersData, geoJsonData]);\r\n useEffect(() => {\r\n if (Weather.weatherForecastData) {\r\n if (Weather.weatherForecastData) {\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n const { result } = Weather?.weatherForecastData?.data;\r\n setIsOpenWeatherForecastDataModal(!isOpenWeatherForecastDataModal);\r\n setWeatherModuleData(result);\r\n }\r\n } else {\r\n setIsOpenWeatherForecastDataModal(false);\r\n setWeatherModuleData([]);\r\n }\r\n }, [Weather.weatherForecastData]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(selectedModule) && selectedModule?.api_slug === 'drought-decision-support') {\r\n setShowCharts(false);\r\n }\r\n setShowCharts(false);\r\n dispatch(getWeatherForecastDataSuccess({}));\r\n setSelectedParam('');\r\n setCompareSelectedParam('');\r\n setIsCompareClicked(false);\r\n setInitialSelectedDate([]);\r\n setFinalSelectedDate([]);\r\n setIsFinalDroughtMap(false);\r\n setPrecipitationThreshold(20);\r\n setComparePrecipitationThreshold(20);\r\n setPrecipitationThresholdFlood(-14);\r\n setComparePrecipitationThresholdFlood(-14);\r\n setDrySpellPrecipitationThreshold(2.5);\r\n setCompareDrySpellPrecipitationThresold(2.5);\r\n setRainfallAnomalyTime(\r\n {\r\n start_year: '',\r\n end_year: '',\r\n month: '',\r\n selectedStartYear:'',\r\n selectedEndYear:''\r\n }\r\n );\r\n setCompareRainfallAnomalyTime(\r\n {\r\n start_year: '',\r\n end_year: '',\r\n month: '',\r\n selectedStartYear:'',\r\n selectedEndYear:''\r\n }\r\n );\r\n }, [selectedModule]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(selectedLocation?.country)) {\r\n if (selectedLocation?.country?.name !== DEFAULT_COUNTRY?.name) {\r\n removeGeoJsonLayer(mapPreferences, { layerName: '' });\r\n } else {\r\n removeGeoJsonLayer(mapPreferences, { layerName: MAP_PREFERENCES_lABELS.STATES });\r\n }\r\n }\r\n }, [selectedModule, selectedLocation?.country]);\r\n\r\n useEffect(() => {\r\n setShowCharts(false);\r\n }, [selectedParam, compareSelectedParam, selectedLocation.country]);\r\n\r\n useEffect(() => {\r\n if (\r\n selectedParam.api_slug === OTHER_INDICES_API_INDICES_SLUGS.CROP_HARVEST ||\r\n selectedParam.api_slug === OTHER_INDICES_API_INDICES_SLUGS.MODIS_FLOOD ||\r\n selectedParam.api_slug === OTHER_INDICES_API_INDICES_SLUGS.FLOOD\r\n ) {\r\n setIsHideViewGraph(true);\r\n } else {\r\n setIsHideViewGraph(false);\r\n }\r\n }, [selectedParam]);\r\n\r\n useEffect(() => {\r\n if (splitterRef && splitterRef.current) {\r\n if (errorData?.showError) {\r\n splitterRef.current.setState({ secondaryPaneSize: '30%' });\r\n } else {\r\n splitterRef.current.setState({ secondaryPaneSize: '70%' });\r\n }\r\n }\r\n }, [errorData]);\r\n\r\n useEffect(() => {\r\n if (DroughtMonitor.isGetFinalDroughtMapRequesting) {\r\n setIsLoading(true);\r\n } else if (DroughtMonitor.getFinalDroughtMapData) {\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n } else if (DroughtMonitor.getFinalDroughtMapDataError) {\r\n if (DroughtMonitor.getFinalDroughtMapDataError?.response) {\r\n const {\r\n data: {\r\n response: { data },\r\n },\r\n } = DroughtMonitor?.getFinalDroughtMapDataError?.response;\r\n if (!_.isEmpty(data) && data?.message) {\r\n // showError(data?.message);\r\n } else {\r\n if (data?.exception) {\r\n showError(data?.exception);\r\n }\r\n }\r\n }\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n }\r\n }, [\r\n DroughtMonitor.isGetFinalDroughtMapRequesting,\r\n DroughtMonitor.getFinalDroughtMapData,\r\n DroughtMonitor.getFinalDroughtMapDataError,\r\n ]);\r\n\r\n useEffect(() => {\r\n if (DroughtMonitor.isGetDroughtMapRequesting) {\r\n setIsLoading(true);\r\n }\r\n if (DroughtMonitor.getDroughtMapData) {\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n const { response } = DroughtMonitor.getDroughtMapData;\r\n if (Array.isArray(response?.data)) {\r\n if (response?.isDroughtModule) {\r\n setMapData(response?.data);\r\n }\r\n } else {\r\n const { result } = response?.isDroughtModule ? response?.data : { result: '' };\r\n setMapData(result);\r\n }\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n } else if (DroughtMonitor.getDroughtMapDataError) {\r\n const {\r\n data: { response },\r\n } = DroughtMonitor.getDroughtMapDataError?.response;\r\n if (\r\n response === undefined &&\r\n DroughtMonitor.getDroughtMapDataError?.response?.data?.message === 'Network Error'\r\n ) {\r\n showError(t('DROUGHT_MONITORING.API_FAILURE_ERROR'));\r\n }\r\n if (response?.data?.exception) {\r\n showError(response?.data?.exception);\r\n } else if (response?.data?.code === 400) {\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n if (!_.isEmpty(response?.data?.errors)) {\r\n let errorsObj = response?.data?.errors;\r\n if (!_.isEmpty(errorsObj)) {\r\n const values = Object.values(errorsObj);\r\n showError(values[0]);\r\n }\r\n } else {\r\n showError(response?.data?.message);\r\n }\r\n }\r\n\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n } else if (DroughtMonitor.getDroughtMapDataNetworkError) {\r\n //setIsLoading(false);\r\n }\r\n }, [\r\n DroughtMonitor.getDroughtMapData,\r\n DroughtMonitor.isGetDroughtMapRequesting,\r\n DroughtMonitor.getDroughtMapDataError,\r\n DroughtMonitor.getDroughtMapDataNetworkError,\r\n ]);\r\n\r\n useEffect(() => {\r\n if (DroughtMonitor.getFinalDroughtMapData) {\r\n if (DroughtMonitor?.getFinalDroughtMapData?.data) {\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n let { result } = DroughtMonitor?.getFinalDroughtMapData?.data;\r\n if (result) {\r\n setMapData(result);\r\n }\r\n }\r\n } else if (DroughtMonitor.getFinalDroughtMapDataError) {\r\n if (DroughtMonitor.getFinalDroughtMapDataError?.response?.data) {\r\n let { response } = DroughtMonitor.getFinalDroughtMapDataError?.response?.data;\r\n if (response?.data?.code === 400) {\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n if (!_.isEmpty(response?.data?.errors)) {\r\n let errorsObj = response?.data?.errors;\r\n if (!_.isEmpty(errorsObj)) {\r\n const values = Object.values(errorsObj);\r\n showError(values[0]);\r\n }\r\n } else {\r\n showError(response?.data?.message);\r\n }\r\n }\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n }\r\n }\r\n }, [DroughtMonitor.getFinalDroughtMapData, DroughtMonitor.getFinalDroughtMapDataError]);\r\n\r\n useEffect(() => {\r\n if (DroughtMonitor.isCheckDroughtCriteriaRequesting) {\r\n setIsLoading(true);\r\n } else {\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n }\r\n }, [DroughtMonitor.isCheckDroughtCriteriaRequesting]);\r\n\r\n //useeffect for getting graph data from redux\r\n useEffect(() => {\r\n if (DroughtMonitor.isGetDroughtTimeseriesRequesting) {\r\n setIsGraphLoading(true);\r\n setGraphData([]);\r\n }\r\n if (DroughtMonitor.getDroughtTimeseriesData) {\r\n const { result } = DroughtMonitor.getDroughtTimeseriesData.data;\r\n if (selectedModule?.api_slug === 'drought-decision-support') {\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n }\r\n let mapSeriesdata = {};\r\n let temporaryArrayData = [];\r\n temporaryArrayData.push(result.graph_data);\r\n mapSeriesdata.graph_data = temporaryArrayData;\r\n\r\n setGraphData(mapSeriesdata);\r\n setIsGraphLoading(false);\r\n setIsOpenAlertIndicesTable(!isOpenAlertIndicesTable);\r\n let aggregation = _.cloneDeep(temporalAggregation);\r\n let paramData = _.cloneDeep(selectedParam);\r\n let compareParamData = _.cloneDeep(compareSelectedParam);\r\n let regionData = _.cloneDeep(selectedLocation?.region);\r\n let startDate = _.cloneDeep(initialSelectedDate);\r\n let location = _.cloneDeep(selectedLocation);\r\n setChartParamsData({\r\n temporalAggregation: aggregation,\r\n selectedParam: paramData,\r\n compareParam: compareParamData,\r\n region: regionData,\r\n initialSelectedDate: startDate,\r\n location: location,\r\n });\r\n } else if (DroughtMonitor.getDroughtTimeseriesDataError) {\r\n setGraphData([]);\r\n const {\r\n data: { response },\r\n } = DroughtMonitor.getDroughtTimeseriesDataError?.response;\r\n if (\r\n response === undefined &&\r\n DroughtMonitor.getDroughtTimeseriesDataError?.response?.data?.message === 'Network Error'\r\n ) {\r\n setErrorData({ showError: true, data: t('DROUGHT_MONITORING.API_FAILURE_ERROR') });\r\n }\r\n if (selectedModule?.api_slug === 'drought-decision-support') {\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n }\r\n if (response?.data?.code === 400) {\r\n if (!_.isEmpty(response?.data?.errors)) {\r\n let errorsObj = response?.data?.errors;\r\n if (!_.isEmpty(errorsObj)) {\r\n const values = Object.values(errorsObj);\r\n setErrorData({ showError: true, data: values[0] });\r\n }\r\n } else {\r\n if (selectedModule?.api_slug === 'drought-decision-support') {\r\n showError(response?.data?.message);\r\n }\r\n //setErrorData({ showError: true, data: response?.data?.message });\r\n // showError(response?.data?.message)\r\n setErrorData({ showError: true, data: response?.data?.message });\r\n }\r\n }\r\n setIsGraphLoading(false);\r\n } else if (DroughtMonitor.getDroughtTimeseriesDataNetworkError) {\r\n if (selectedModule?.api_slug === 'drought-decision-support') {\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n }\r\n setIsGraphLoading(false);\r\n }\r\n }, [\r\n DroughtMonitor.isGetDroughtTimeseriesRequesting,\r\n DroughtMonitor.getDroughtTimeseriesData,\r\n DroughtMonitor.getDroughtTimeseriesDataError,\r\n DroughtMonitor.getDroughtTimeseriesDataNetworkError,\r\n ]);\r\n\r\n //useeffect to reset all the map preferences states data when country gets changed\r\n useEffect(() => {\r\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\r\n setMapPreferencesData([]);\r\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\r\n\r\n if (selectedLegend.length) {\r\n selectedLegend.forEach(function(value, i) {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n setSelectedMapPreferLegendData(selectedLegend);\r\n }\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n }, [selectedRegionId, selectedDroughtPhase]);\r\n\r\n useEffect(() => {\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n }, [selectedLocation?.country, selectedLocation?.state, selectedLocation?.district]);\r\n\r\n useEffect(() => {\r\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\r\n setMapPreferencesData([]);\r\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\r\n\r\n if (selectedLegend.length) {\r\n selectedLegend.forEach(function(value, i) {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n setSelectedMapPreferLegendData(selectedLegend);\r\n }\r\n }, [selectedLocation?.country]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(mapControl)) {\r\n mapControl?.on('dividermove', map.dragging.disable());\r\n } else if (!_.isEmpty(map)) {\r\n map?.dragging?.enable();\r\n }\r\n }, [mapControl]);\r\n\r\n // useEffect(()=>{\r\n // if(mapUrl?.url){\r\n // if(map.hasLayer(mapUrl?.layer)){\r\n // mapUrl?.layer?.bringToFront();\r\n // }\r\n // }\r\n // },[mapUrl])\r\n\r\n useEffect(() => {\r\n if (\r\n (selectedMapPreferLegendData?.length && selectedMapPreferLegendData?.every(i => !i.add)) ||\r\n !selectedMapPreferLegendData?.length\r\n ) {\r\n if (!_.isEmpty(layerControl?.firstLayer) && !_.isEmpty(layerControl?.secondLayer)) {\r\n let array = [];\r\n array.push(layerControl?.firstLayer);\r\n array.push(layerControl?.secondLayer);\r\n setIndexLayers(array);\r\n } else if (mapUrl?.url) {\r\n setMapLayerOpacity({ layer: mapUrl?.layer });\r\n let array = [];\r\n array.push(mapUrl?.layer);\r\n setIndexLayers(array);\r\n }\r\n } else if (selectedMapPreferLegendData?.length) {\r\n if (mapPreferUrl?.url) {\r\n let array = [];\r\n array.push(mapPreferUrl?.layer);\r\n setIndexLayers(array);\r\n setMapLayerOpacity({ layer: mapPreferUrl?.layer });\r\n }\r\n }\r\n }, [selectedMapPreferLegendData]);\r\n\r\n useEffect(() => {\r\n if (\r\n (selectedParamLegendData?.length && selectedParamLegendData?.every(i => !i.add)) ||\r\n !selectedParamLegendData?.length\r\n ) {\r\n if (mapPreferUrl?.url) {\r\n let array = [];\r\n array.push(mapPreferUrl?.layer);\r\n setIndexLayers(array);\r\n setMapLayerOpacity({ layer: mapPreferUrl?.layer });\r\n }\r\n } else if (\r\n selectedParamLegendData?.length &&\r\n ((compareParamLegendData?.length && compareParamLegendData?.every(i => !i.add)) ||\r\n !compareParamLegendData?.length)\r\n ) {\r\n if (mapUrl?.url) {\r\n let array = [];\r\n array.push(mapUrl?.layer);\r\n setIndexLayers(array);\r\n setMapLayerOpacity({ layer: mapUrl?.layer });\r\n }\r\n }\r\n }, [selectedParamLegendData]);\r\n\r\n useEffect(() => {\r\n if (\r\n (compareParamLegendData?.length && compareParamLegendData?.every(i => !i.add)) ||\r\n !compareParamLegendData?.length\r\n ) {\r\n if (mapPreferUrl?.url) {\r\n let array = [];\r\n array.push(mapPreferUrl?.layer);\r\n setIndexLayers(array);\r\n setMapLayerOpacity({ layer: mapPreferUrl?.layer });\r\n }\r\n } else if (compareParamLegendData?.length) {\r\n if (!_.isEmpty(layerControl?.firstLayer) && !_.isEmpty(layerControl?.secondLayer)) {\r\n let array = [];\r\n array.push(layerControl?.firstLayer);\r\n array.push(layerControl?.secondLayer);\r\n setIndexLayers(array);\r\n }\r\n }\r\n }, [compareParamLegendData]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(indexLayers)) {\r\n addOpacitySlider();\r\n if (indexLayers?.length) {\r\n indexLayers.map(l => l.bringToFront());\r\n }\r\n }\r\n }, [indexLayers]);\r\n\r\n // useEffect(()=>{\r\n // if(mapPreferUrl?.url){\r\n // if(map.hasLayer(mapPreferUrl?.layer)){\r\n // mapPreferUrl?.layer?.bringToFront();\r\n // }\r\n // }\r\n // },[mapPreferUrl])\r\n\r\n //useeffect for adding drought Indices layers and legend into the map\r\n useEffect(() => {\r\n if (!_.isEmpty(mapData)) {\r\n const currentParamRef = layerRef.current[selectedParam?.paramIndex];\r\n let map_data = '';\r\n let opacityControl = '';\r\n let legendArray = [...selectedParamLegendData];\r\n let compareLegendArray = [...compareParamLegendData];\r\n let legendObj = {};\r\n let compareLegendObj = {};\r\n\r\n if (Array.isArray(mapData)) {\r\n let data1 = mapData[0]?.map_data;\r\n let data2 = mapData[1]?.map_data;\r\n\r\n if (data1?.code === 400 || data2?.code === 400) {\r\n const filteredMapData = mapData.find(i => i?.map_data?.code === 400);\r\n showError(filteredMapData?.map_data?.message);\r\n return false;\r\n }\r\n compareLegendObj = { ...data1 };\r\n compareLegendObj.id = selectedParam.name;\r\n compareLegendObj.add = true;\r\n compareLegendObj.parameter = selectedParam.name;\r\n compareLegendObj.dataSource = selectedParam.drought_indices_category_name;\r\n compareLegendObj.measure = data1?.units || '';\r\n compareLegendObj.fromMapPreferences = false;\r\n if (selectedParam.api_slug == INDICES_PARAMS.RAINFALL_ANAMOLY.api_slug) {\r\n compareLegendObj.selectedDates = {\r\n startDate: `01-${rainfallAnomalyTime?.month?.value}-${rainfallAnomalyTime.end_year?.value}`,\r\n endDate: `${rainfallAnomalyTime?.month?.days}-${rainfallAnomalyTime?.month?.value}-${rainfallAnomalyTime.end_year?.value}`,\r\n };\r\n } else if (selectedModule?.api_slug === DROUGHT_MODULES_CONST[2].api_slug) {\r\n compareLegendObj.selectedDates = {\r\n startDate: ``,\r\n endDate: ``,\r\n };\r\n } else {\r\n compareLegendObj.selectedDates = {\r\n startDate: moment(initialSelectedDate.startDate).format('DD-MM-YYYY'),\r\n endDate: moment(initialSelectedDate.endDate).format('DD-MM-YYYY'),\r\n };\r\n }\r\n\r\n legendObj = { ...data2 };\r\n legendObj.id = compareSelectedParam.name;\r\n legendObj.add = true;\r\n legendObj.parameter = compareSelectedParam.name;\r\n legendObj.dataSource = compareSelectedParam.drought_indices_category_name;\r\n legendObj.measure = data2?.units || '';\r\n legendObj.fromMapPreferences = false;\r\n if (compareSelectedParam.api_slug == INDICES_PARAMS.RAINFALL_ANAMOLY.api_slug) {\r\n legendObj.selectedDates = {\r\n startDate: `01-${compareRainfallAnomalyTime?.month?.value}-${compareRainfallAnomalyTime.end_year?.value}`,\r\n endDate: `${compareRainfallAnomalyTime?.month?.days}-${compareRainfallAnomalyTime?.month?.value}-${compareRainfallAnomalyTime.end_year?.value}`,\r\n };\r\n } else if (selectedModule?.api_slug === DROUGHT_MODULES_CONST[2].api_slug) {\r\n legendObj.selectedDates = {\r\n startDate: ``,\r\n endDate: ``,\r\n };\r\n } else {\r\n legendObj.selectedDates = {\r\n startDate: moment(finalSelectedDate.startDate).format('DD-MM-YYYY'),\r\n endDate: moment(finalSelectedDate.endDate).format('DD-MM-YYYY'),\r\n };\r\n }\r\n if (!_.isEmpty(currentParamRef) && !_.isEmpty(currentParamRef?.current)) {\r\n currentParamRef.current._url = data1.map_url;\r\n currentParamRef.current._url1 = data2.map_url;\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n\r\n if (currentParamRef.current._url1) {\r\n const firstLayer = L.tileLayer(currentParamRef.current._url);\r\n firstLayer?.addTo(map);\r\n const secondLayer = L.tileLayer(currentParamRef.current._url1);\r\n secondLayer?.addTo(map);\r\n let updatedIndexLayer = [...indexLayers];\r\n updatedIndexLayer.push(firstLayer);\r\n updatedIndexLayer.push(secondLayer);\r\n setIndexLayers(updatedIndexLayer);\r\n const control = L.control.sideBySide(firstLayer, secondLayer);\r\n setLayerControl({ firstLayer, secondLayer });\r\n setMapControl(control);\r\n control?.addTo(map);\r\n }\r\n }\r\n compareLegendArray.push(compareLegendObj);\r\n setCompareParamLegendData(compareLegendArray);\r\n } else {\r\n if (mapData?.map_data && !_.isEmpty(mapData.map_data)) {\r\n map_data = mapData?.map_data;\r\n }\r\n if (map_data.code === 400) {\r\n showError('No record found . Please select different date range');\r\n return false;\r\n }\r\n legendObj = { ...map_data };\r\n legendObj.id = selectedParam.name;\r\n legendObj.add = true;\r\n legendObj.parameter = isFinalDroughtMap ? 'Drought Map' : selectedParam.name;\r\n legendObj.dataSource = selectedParam.drought_indices_category_name;\r\n legendObj.measure = map_data?.units || '';\r\n legendObj.fromMapPreferences = false;\r\n if (selectedParam.api_slug == INDICES_PARAMS.RAINFALL_ANAMOLY.api_slug) {\r\n legendObj.selectedDates = {\r\n startDate: `01-${rainfallAnomalyTime?.month?.value}-${rainfallAnomalyTime.end_year?.value}`,\r\n endDate: `${rainfallAnomalyTime?.month?.days}-${rainfallAnomalyTime?.month?.value}-${rainfallAnomalyTime.end_year?.value}`,\r\n };\r\n } else if (selectedModule?.api_slug === DROUGHT_MODULES_CONST[2].api_slug) {\r\n legendObj.selectedDates = {\r\n startDate: '',\r\n endDate: '',\r\n };\r\n } else {\r\n legendObj.selectedDates = {\r\n startDate: moment(initialSelectedDate.startDate).format('DD-MM-YYYY'),\r\n endDate: moment(initialSelectedDate.endDate).format('DD-MM-YYYY'),\r\n };\r\n }\r\n\r\n // TODO: need to change looping through layers\r\n if (!_.isEmpty(currentParamRef) && !_.isEmpty(currentParamRef?.current)) {\r\n currentParamRef.current?.eachLayer(layer => {\r\n if (map_data) {\r\n layer.setUrl(map_data?.map_url);\r\n setMapUrl({ name: selectedParam.name, url: map_data?.map_url, layer });\r\n let updatedIndexLayer = [...indexLayers];\r\n updatedIndexLayer.push(layer);\r\n setIndexLayers(updatedIndexLayer);\r\n setMapLayerOpacity({\r\n layer,\r\n });\r\n }\r\n });\r\n if (layerRef?.current?.length) {\r\n layerRef.current.map((i, index) => {\r\n removeLayers(layerRef.current[index]);\r\n });\r\n }\r\n }\r\n if (!_.isEmpty(currentParamRef) && currentParamRef?.current !== null) {\r\n addLayers(currentParamRef);\r\n }\r\n }\r\n\r\n if (selectedParamLegendData.length) {\r\n legendArray.forEach((value, i) => {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n }\r\n\r\n if (map?.opacityControl) {\r\n map.removeControl(opacityControl);\r\n }\r\n legendArray.push(legendObj);\r\n setSelectedParamLegendData(legendArray);\r\n }\r\n }, [mapData]);\r\n\r\n //use effect for adding the opacity control slider in map\r\n // useEffect(() => {\r\n // if (!_.isEmpty(mapLayerOpacity) && !_.isEmpty(mapLayerOpacity?.layer)) {\r\n // if (!_.isEmpty(opacityControl)) map.removeControl(opacityControl);\r\n // let customOpacityControl = '';\r\n // customOpacityControl = L.control.opacity(mapLayerOpacity, {\r\n // collapsed: false,\r\n // position: 'topright',\r\n // });\r\n // setOpacityControl(customOpacityControl);\r\n // customOpacityControl?.addTo(map);\r\n // }\r\n // }, [mapLayerOpacity]);\r\n\r\n useEffect(() => {\r\n if (mapPreferencesData?.length) {\r\n let MapPrefereArr = [];\r\n mapPreferencesData?.map(item => {\r\n let legendItem = JSON.parse(JSON.stringify(item.result));\r\n legendItem.parameter =\r\n item.slug === MAP_PREFERENCES_lABELS.JRC\r\n ? t('WEATHER_FORECAST.MAP_PREFERENCES.WATER_OCCURRENCE')\r\n : item.slug === MAP_PREFERENCES_lABELS.MOD44\r\n ? t('WEATHER_FORECAST.MAP_PREFERENCES.PERMANENT_WATER')\r\n : item?.legendName;\r\n legendItem.dataSource = item?.category;\r\n legendItem.add = true;\r\n legendItem.measure = legendItem.units;\r\n legendItem.id = item?.dataSource;\r\n legendItem.legendId = item.id;\r\n legendItem.fromMapPreferences = true;\r\n if (selectedMapPreferLegendData?.length) {\r\n let isDuplicate = selectedMapPreferLegendData?.find(\r\n x => x.legendId === item.id && item.add === true,\r\n );\r\n if (_.isEmpty(isDuplicate)) {\r\n MapPrefereArr.push(legendItem);\r\n }\r\n } else {\r\n MapPrefereArr.push(legendItem);\r\n }\r\n });\r\n setSelectedMapPreferLegendData(MapPrefereArr);\r\n }\r\n }, [mapPreferencesData]);\r\n\r\n useEffect(() => {\r\n if (geoJsonAllData?.length) {\r\n geoJsonAllData.map(item => {\r\n let mapGeojsonItem = Object.keys(mapPreferences).find(x => x === item.config.name);\r\n let selectedLayer = mapPreferences[mapGeojsonItem];\r\n if (selectedLayer?.layer && selectedLayer?.layer?.current) {\r\n let data = JSON.parse(JSON.stringify(item.data));\r\n if (\r\n item.config.name !== MAP_PREFERENCES_lABELS.DISTRICTS &&\r\n item.config.name !== MAP_PREFERENCES_lABELS.TALUKAS\r\n ) {\r\n selectedLayer.country = selectedLocation?.country;\r\n selectedLayer?.layer?.current?.clearLayers();\r\n selectedLayer.layer.current.addData(data);\r\n selectedLayer.color = item.config.color;\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [mapGeojsonItem]: selectedLayer,\r\n };\r\n });\r\n }\r\n }\r\n });\r\n }\r\n }, [geoJsonAllData, mapPreferences?.state?.layer?.current, selectedLocation?.country]);\r\n\r\n useEffect(() => {\r\n if (geoJsonAllData?.length) {\r\n geoJsonAllData.map(item => {\r\n let mapGeojsonItem = Object.keys(mapPreferences).find(x => x === item.config.name);\r\n let selectedLayer = mapPreferences[mapGeojsonItem];\r\n if (selectedLayer?.layer && selectedLayer?.layer?.current) {\r\n if (\r\n !_.isEmpty(selectedLocation?.district) ||\r\n selectedLocation?.district?.name !== 'select'\r\n ) {\r\n let filteredLayer = returnFilteredGeoJsonData(\r\n selectedLayer,\r\n item,\r\n selectedLocation?.district,\r\n MAP_PREFERENCES_lABELS.DISTRICTS,\r\n MAP_PREFERENCES_lABELS.TALUKAS,\r\n selectedLocation?.country,\r\n );\r\n if (filteredLayer) {\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [mapGeojsonItem]: filteredLayer,\r\n };\r\n });\r\n }\r\n }\r\n\r\n if (!_.isEmpty(selectedLocation?.state) || selectedLocation?.state?.name !== 'select') {\r\n let filteredLayer = returnFilteredGeoJsonData(\r\n selectedLayer,\r\n item,\r\n selectedLocation?.state,\r\n MAP_PREFERENCES_lABELS.STATES,\r\n MAP_PREFERENCES_lABELS.DISTRICTS,\r\n selectedLocation?.country,\r\n );\r\n if (filteredLayer) {\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [mapGeojsonItem]: filteredLayer,\r\n };\r\n });\r\n }\r\n }\r\n }\r\n });\r\n }\r\n }, [geoJsonAllData]);\r\n\r\n useEffect(() => {\r\n if (geoJsonAllData?.length) {\r\n geoJsonAllData.map(item => {\r\n let mapGeojsonItem = Object.keys(mapPreferences).find(x => x === item.config.name);\r\n let selectedLayer = mapPreferences[mapGeojsonItem];\r\n if (\r\n selectedLayer?.layer &&\r\n selectedLayer?.layer?.current &&\r\n item.fromMapPreferences &&\r\n (_.isEmpty(selectedLocation?.state) || selectedLocation?.state?.name === 'select') &&\r\n item.config.name === MAP_PREFERENCES_lABELS.DISTRICTS\r\n ) {\r\n selectedLayer.country = selectedLocation?.country;\r\n selectedLayer?.layer?.current?.clearLayers();\r\n selectedLayer.layer.current.addData(item.data);\r\n selectedLayer.color = item.config.color;\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [mapGeojsonItem]: selectedLayer,\r\n };\r\n });\r\n }\r\n });\r\n }\r\n }, [geoJsonAllData]);\r\n\r\n useEffect(() => {\r\n if (geoJsonAllData?.length) {\r\n geoJsonAllData.map(item => {\r\n let mapGeojsonItem = Object.keys(mapPreferences).find(x => x === item.config.name);\r\n let selectedLayer = mapPreferences[mapGeojsonItem];\r\n if (\r\n selectedLayer?.layer &&\r\n selectedLayer?.layer?.current &&\r\n item.fromMapPreferences &&\r\n (_.isEmpty(selectedLocation?.district) ||\r\n selectedLocation?.district?.name === 'select') &&\r\n item.config.name === MAP_PREFERENCES_lABELS.TALUKAS\r\n ) {\r\n selectedLayer.country = selectedLocation?.country;\r\n selectedLayer?.layer?.current?.clearLayers();\r\n selectedLayer.layer.current.addData(item.data);\r\n selectedLayer.color = item.config.color;\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [mapGeojsonItem]: selectedLayer,\r\n };\r\n });\r\n }\r\n });\r\n }\r\n }, [geoJsonAllData]);\r\n\r\n useEffect(() => {\r\n if (mapPreferencesData?.length) {\r\n if (mapPreferRefs?.current?.length) {\r\n mapPreferencesData?.map(item => {\r\n let selectedMapPreferences = mapPreferRefs.current.find(\r\n x => x.current.boundary_id === item.id,\r\n );\r\n let currentParamRef = selectedMapPreferences.current?.layer;\r\n currentParamRef?.current?.eachLayer(mapLayer => {\r\n let updatedIndexLayer = [...indexLayers];\r\n updatedIndexLayer.push(mapLayer);\r\n setIndexLayers(updatedIndexLayer);\r\n mapLayer.setUrl(item?.result?.map_url);\r\n setMapPreferUrl({\r\n name: item?.dataSource,\r\n url: item?.result?.map_url,\r\n layer: mapLayer,\r\n });\r\n setMapLayerOpacity({\r\n layer: mapLayer,\r\n });\r\n });\r\n if (currentParamRef && currentParamRef?.current) {\r\n addLayers(currentParamRef);\r\n }\r\n });\r\n }\r\n }\r\n }, [mapPreferencesData, mapPreferRefs.current]);\r\n\r\n const returnFilteredGeoJsonData = (\r\n selectedLayer,\r\n item,\r\n location,\r\n propertyName,\r\n locationName,\r\n countryData,\r\n ) => {\r\n if (selectedLayer?.layer && selectedLayer?.layer?.current) {\r\n let data = JSON.parse(JSON.stringify(item.data));\r\n let selectedCountryData = GEOJSON_COUNTRY_DATA?.find(\r\n item => item.selectedCountry === selectedLocation?.country?.name,\r\n );\r\n let labelprop = selectedCountryData ? selectedCountryData[propertyName] : '';\r\n if (item.config.name === locationName && !_.isEmpty(location)) {\r\n if (locationName === 'districts_or_cities') {\r\n setStateNameFromLocation(location?.name);\r\n }\r\n data.features = item.data?.features.filter(x => {\r\n if (x?.properties[labelprop]?.toUpperCase() === location?.name?.toUpperCase()) {\r\n if (\r\n locationName === 'talukas' &&\r\n countryData?.name === 'India' &&\r\n stateNameFromLocation?.toUpperCase() === x?.properties['stname']\r\n ) {\r\n selectedLayer.country = selectedLocation?.country;\r\n selectedLayer?.layer?.current?.clearLayers();\r\n return x;\r\n } else if (\r\n stateNameFromLocation?.toUpperCase() !== 'BIHAR' &&\r\n stateNameFromLocation?.toUpperCase() !== 'MAHARASHTRA'\r\n ) {\r\n selectedLayer.country = selectedLocation?.country;\r\n selectedLayer?.layer?.current?.clearLayers();\r\n return x;\r\n } else {\r\n if (locationName === 'districts_or_cities') {\r\n selectedLayer.country = selectedLocation?.country;\r\n selectedLayer?.layer?.current?.clearLayers();\r\n return x;\r\n }\r\n }\r\n }\r\n });\r\n selectedLayer.layer.current.addData(data);\r\n selectedLayer.color = item.config.color;\r\n }\r\n return selectedLayer;\r\n }\r\n };\r\n\r\n const removeGeoJsonLayer = (mapPreferences, { layerName }) => {\r\n let mapPreferKeys = Object.keys(mapPreferences);\r\n if (mapPreferKeys) {\r\n mapPreferKeys.map(item => {\r\n let selectedLayer = mapPreferences[item];\r\n if (\r\n selectedLayer?.layer &&\r\n selectedLayer?.layer?.current &&\r\n (_.isEmpty(layerName) || (!_.isEmpty(layerName) && layerName !== item))\r\n ) {\r\n selectedLayer?.layer?.current?.clearLayers();\r\n selectedLayer.color = '';\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [item]: selectedLayer,\r\n };\r\n });\r\n }\r\n });\r\n }\r\n };\r\n\r\n const getMapPreferencesGeojsonData = geoJsonList => {\r\n let data = JSON.parse(JSON.stringify(geoJsonList));\r\n let mapPreferKeys = Object.keys(mapPreferences);\r\n if (mapPreferKeys) {\r\n mapPreferKeys.map(item => {\r\n let selectedLayer = mapPreferences[item];\r\n if (selectedLayer?.layer && selectedLayer?.layer?.current)\r\n selectedLayer?.layer?.current?.clearLayers();\r\n selectedLayer.color = '';\r\n setMapPreferences(prev => {\r\n return {\r\n ...prev,\r\n [item]: selectedLayer,\r\n };\r\n });\r\n });\r\n }\r\n setGeoJsonData(data);\r\n };\r\n\r\n const removeMapLayers = (selectedParamLegendData, compareParamLegendData, layerControl) => {\r\n let previousParamRef = '';\r\n if (layerRef?.current?.length) {\r\n layerRef.current.map((i, index) => {\r\n previousParamRef = layerRef.current[index];\r\n removeLayers(previousParamRef);\r\n });\r\n }\r\n let legendArray = [...selectedParamLegendData];\r\n let compareLegendArray = [...compareParamLegendData];\r\n if (selectedParamLegendData.length) {\r\n legendArray.forEach((value, i) => {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n }\r\n if (compareParamLegendData.length) {\r\n compareLegendArray.forEach((value, i) => {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n }\r\n if (!_.isEmpty(layerControl?.firstLayer)) {\r\n map?.removeControl(layerControl?.firstLayer);\r\n }\r\n if (!_.isEmpty(layerControl?.secondLayer)) {\r\n map?.removeControl(layerControl?.secondLayer);\r\n }\r\n if (!_.isEmpty(mapControl)) {\r\n map?.removeControl(mapControl);\r\n }\r\n setMapControl('');\r\n setLayerControl({\r\n firstLayer: {},\r\n secondLayer: {},\r\n });\r\n setSelectedParamLegendData(legendArray);\r\n setCompareParamLegendData(compareLegendArray);\r\n };\r\n\r\n // function to change the map attributes inside the map container\r\n function ChangeView({ center, zoom }) {\r\n const mapEvents = useMapEvents({\r\n zoomend: () => {\r\n setCordinateAndZoom(prev => {\r\n return {\r\n ...prev,\r\n cordinates: mapEvents.getCenter(),\r\n zoom: mapEvents.getZoom(),\r\n };\r\n });\r\n },\r\n dragend: () => {\r\n setCordinateAndZoom(prev => {\r\n return {\r\n ...prev,\r\n zoom: mapEvents.getZoom(),\r\n cordinates: mapEvents.getCenter(),\r\n };\r\n });\r\n },\r\n });\r\n\r\n const map = useMap();\r\n setInterval(function() {\r\n if (!_.isEmpty(map) && !_.isEmpty(map?._layers)) map.invalidateSize();\r\n }, 500);\r\n map.setView(center, zoom);\r\n return null;\r\n }\r\n\r\n //function to handle map preferences model toggling\r\n const handleMapModel = () => {\r\n setIsOpenMapModel(!isOpenMapModel);\r\n };\r\n\r\n //function to set map reference\r\n const setMapReference = mapInstance => {\r\n mapRef.current = mapInstance;\r\n setMap(mapInstance);\r\n };\r\n\r\n //function to set cordinates from side filter file\r\n const handleCordinates = (cordinates, zoom) => {\r\n if (applyLayers) {\r\n setApplyLayers(false);\r\n }\r\n setCordinateAndZoom(prev => {\r\n return {\r\n ...prev,\r\n locationCordinates: cordinates,\r\n cordinates,\r\n zoom,\r\n };\r\n });\r\n setCordinateAndZoomReset(prev => {\r\n return {\r\n ...prev,\r\n locationCordinates: cordinates,\r\n cordinates,\r\n zoom,\r\n };\r\n });\r\n };\r\n\r\n const handleIsCompare = isClicked => {\r\n setIsCompareClicked(isClicked);\r\n };\r\n\r\n // add layer opacity slider to the map\r\n function addOpacitySlider() {\r\n // if (!window.map) console.log('not ready');\r\n if (indexLayers?.length) {\r\n L.Control.OpacitySlider = L.Control.extend({\r\n sliding: false,\r\n updateLayerOpacity: function(opacity) {\r\n indexLayers.forEach((layer, i) => {\r\n layer.setOpacity(opacity / 100);\r\n });\r\n },\r\n onAdd: function(map) {\r\n if (opacityControl) {\r\n map?.removeControl(opacityControl);\r\n }\r\n var container = L.DomUtil.create('div', 'opacityContainer');\r\n container.innerHTML =\r\n '';\r\n if (!L.Browser.touch) {\r\n L.DomEvent.disableClickPropagation(container);\r\n L.DomEvent.on(container, 'mousewheel', L?.DomEvent?.stopPropagation);\r\n } else {\r\n L.DomEvent.on(container, 'mousedrag click', L?.DomEvent?.stopPropagation);\r\n }\r\n let slider = container.querySelector('.opacityslider');\r\n slider.onclick = e => {\r\n this.updateLayerOpacity(e.target.value);\r\n };\r\n slider.onmousedown = e => {\r\n this.sliding = true;\r\n this.updateLayerOpacity(e.target.value);\r\n };\r\n slider.onmousemove = e => {\r\n e?.stopPropagation();\r\n if (this.sliding) this.updateLayerOpacity(e.target.value);\r\n };\r\n slider.onmouseup = e => {\r\n this.sliding = false;\r\n };\r\n return container;\r\n },\r\n });\r\n L.control.opacitySlider = function(opts) {\r\n return new L.Control.OpacitySlider(opts);\r\n };\r\n let customOpacityControl = L.control.opacitySlider({ position: 'topright' });\r\n customOpacityControl.addTo(map);\r\n setOpacityControl(customOpacityControl);\r\n }\r\n }\r\n\r\n //function to add layers in the map\r\n const addLayers = selectedParamRef => {\r\n if (mapRef.current && selectedParamRef.current) {\r\n const leafletMapRef = mapRef.current;\r\n const firstLayer = selectedParamRef.current;\r\n [firstLayer].forEach((layer, index) => {\r\n leafletMapRef.addLayer(layer);\r\n });\r\n }\r\n return false;\r\n };\r\n\r\n //function to remove layers from map\r\n const removeLayers = selectedParamRef => {\r\n if (mapRef && mapRef?.current && selectedParamRef && selectedParamRef?.current) {\r\n const map = mapRef.current;\r\n const firstLayer = selectedParamRef.current;\r\n [firstLayer].forEach(layer => map.removeLayer(layer));\r\n }\r\n };\r\n\r\n const removeMapPreferenceLayer = (mapPreferRefs, mapPreferencesData) => {\r\n if (mapPreferRefs?.current?.length && mapPreferencesData?.length) {\r\n mapPreferencesData?.map(item => {\r\n let selectedMapIndex = _.findIndex(\r\n mapPreferRefs.current,\r\n list => list.current.boundary_id === item.id,\r\n );\r\n let previousParamRef = mapPreferRefs?.current[selectedMapIndex].current.layer;\r\n if (previousParamRef && previousParamRef?.current) {\r\n removeLayers(previousParamRef);\r\n }\r\n });\r\n }\r\n };\r\n\r\n const getMapPreferencesData = mapPreferencesLayerData => {\r\n /** removing previously added map preferences layers before setting the state */\r\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\r\n setIndexLayers([]);\r\n /** setting map preferences state*/\r\n let arr = JSON.parse(JSON.stringify(mapPreferencesLayerData));\r\n let paramData = '';\r\n let paramArr = '';\r\n if (selectedMapPreferLegendData?.length) {\r\n paramData = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\r\n paramData?.map((item, index) => {\r\n if (item.add) {\r\n let legendItem = { ...item };\r\n legendItem.add = false;\r\n paramData[index] = legendItem;\r\n }\r\n });\r\n paramArr = [...paramData];\r\n }\r\n setSelectedMapPreferLegendData(paramArr);\r\n setMapPreferencesData(arr);\r\n };\r\n\r\n const handleSelectedFilterRegion = id => {\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n setSelectedRegionId(id);\r\n };\r\n\r\n const handleProps = props => {\r\n if (applyLayers) {\r\n setApplyLayers(false);\r\n }\r\n setTemporalAggregation(props.temporalAggregation);\r\n setState(props.state);\r\n setInitialSelectedDate(props.initialSelectedDate);\r\n // setSelectedParam(props.selectedParam);\r\n };\r\n //function for compare props\r\n const handleCompareProps = props => {\r\n setIsCompareClicked(props?.isCompareClicked);\r\n setFinalSelectedDate(props.finalSelectedDate);\r\n setCompareSelectedParam(props.compareSelectedParam);\r\n if (compareSelectedParam?.id !== INDICES_PARAMS?.RAINFALL_ANAMOLY?.id) {\r\n setCompareRainfallAnomalyTime({\r\n start_year: '',\r\n end_year: '',\r\n month: '',\r\n selectedStartYear:'',\r\n selectedEndYear:''\r\n });\r\n }\r\n };\r\n\r\n //function to set all indices\r\n const handleParams = param => {\r\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\r\n\r\n if (selectedLegend.length) {\r\n selectedLegend.forEach(function(value, i) {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n setSelectedMapPreferLegendData(selectedLegend);\r\n }\r\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\r\n setMapPreferencesData([]);\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n\r\n layerRef.current = [];\r\n if (param?.length) {\r\n param?.map(item => {\r\n const ref = React.createRef();\r\n layerRef.current.push(ref);\r\n });\r\n setParams(param);\r\n }\r\n };\r\n\r\n const handleEachFeatureChange = (countryData, locationType, feat, layer) => {\r\n let selectedCountryData = GEOJSON_COUNTRY_TOOLTIP_DATA?.find(\r\n item => item.selectedCountry === countryData?.name,\r\n );\r\n let labelprop = selectedCountryData ? selectedCountryData[locationType] : '';\r\n if (labelprop && feat.properties[labelprop])\r\n layer.bindTooltip(feat.properties[labelprop] + '', { sticky: true, direction: 'auto' });\r\n\r\n /** TODO: alternative solution */\r\n\r\n // if(!_.isEmpty(layer) && !_.isEmpty(feat?.properties)){\r\n // layer?.on({\r\n // 'mousemove': (e) => {\r\n // const name = e.target.feature.properties['MJ_BASIN__'] ? e.target.feature.properties['MJ_BASIN__'] : '';\r\n // layer?.bindTooltip(name)\r\n // layer?.openTooltip(e?.latlng);\r\n // },\r\n // // 'mouseout': () => {\r\n // // layer?.unbindTooltip();\r\n // // layer?.closeTooltip();\r\n // // },\r\n // });\r\n // }\r\n };\r\n\r\n //function to set selected indices\r\n const handleSelectedParam = param => {\r\n if (applyLayers) {\r\n setApplyLayers(false);\r\n }\r\n if (!_.isEmpty(selectedParam)) setPreviousParam(selectedParam);\r\n setSelectedParam(param);\r\n if (_.isEmpty(param)) {\r\n let selectedLegend = JSON.parse(JSON.stringify(selectedMapPreferLegendData));\r\n\r\n if (selectedLegend.length) {\r\n selectedLegend.forEach(function(value, i) {\r\n if (value.add) {\r\n value.add = false;\r\n }\r\n });\r\n setSelectedMapPreferLegendData(selectedLegend);\r\n }\r\n removeMapPreferenceLayer(mapPreferRefs, mapPreferencesData);\r\n setMapPreferencesData([]);\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n }\r\n setRainfallAnomalyTime({\r\n start_year: '',\r\n end_year: '',\r\n month: '',\r\n selectedStartYear:'',\r\n selectedEndYear:''\r\n });\r\n };\r\n\r\n //function to set location\r\n const handleLocation = (country, state, district, basin, region) => {\r\n if (applyLayers) {\r\n setApplyLayers(false);\r\n }\r\n setSelectedLocation(prev => {\r\n return {\r\n ...prev,\r\n country,\r\n state: !_.isEmpty(state) ? state : '',\r\n district: !_.isEmpty(district) ? district : '',\r\n basin,\r\n region,\r\n };\r\n });\r\n };\r\n\r\n //function to set compare location\r\n const handleCompareLocation = (country, state, district) => {\r\n setCompareLocation(prev => {\r\n return {\r\n ...prev,\r\n country,\r\n state: !_.isEmpty(state) ? state : '',\r\n district: !_.isEmpty(district) ? district : '',\r\n };\r\n });\r\n };\r\n\r\n const handlePrecipitationThreshold = precipitationThreshold => {\r\n if (selectedParam.api_slug == OTHER_INDICES_API_INDICES_SLUGS.FLOOD){\r\n if (precipitationThreshold) setPrecipitationThresholdFlood(precipitationThreshold);\r\n }else {\r\n if (precipitationThreshold) setPrecipitationThreshold(precipitationThreshold);\r\n }\r\n };\r\n const handleComparePrecipitationThreshold = precipitationThreshold => {\r\n if (compareSelectedParam.api_slug == OTHER_INDICES_API_INDICES_SLUGS.FLOOD){\r\n if (precipitationThreshold) setComparePrecipitationThresholdFlood(precipitationThreshold);\r\n }else{\r\n if (precipitationThreshold) setComparePrecipitationThreshold(precipitationThreshold);\r\n }\r\n };\r\n const handleDrySpellPrecipitationThresold = precipitationThreshold => {\r\n if (precipitationThreshold) setDrySpellPrecipitationThreshold(precipitationThreshold);\r\n };\r\n\r\n const handleCompareDrySpellPrecipitationThresold = precipitationThreshold => {\r\n if (precipitationThreshold) setCompareDrySpellPrecipitationThresold(precipitationThreshold);\r\n };\r\n\r\n //function to set region\r\n const handleSelectedRegion = region => {\r\n let mapLayerData = [];\r\n let polyCount = 1;\r\n let mapData = JSON.parse(JSON.stringify(region));\r\n if (mapData?.length) {\r\n mapData.map(item => {\r\n let x = Object.assign(item, {});\r\n if (item.layerType === 'polygon') {\r\n x.latlngs = item.latlngs.map(v => [v[1], v[0]]);\r\n x?.latlngs?.push(item.latlngs[0]);\r\n if (!x.hasOwnProperty('polygonCount')) {\r\n x.polygonCount = polyCount;\r\n polyCount += 1;\r\n }\r\n mapLayerData.push(x);\r\n } else {\r\n x.latlngs = [item.latlngs[1], item.latlngs[0]];\r\n mapLayerData.push(x);\r\n }\r\n });\r\n }\r\n setSelectedLocation(prev => {\r\n return {\r\n ...prev,\r\n region: mapLayerData,\r\n };\r\n });\r\n };\r\n\r\n const handleCompareView = compareView => {\r\n setCompareView(compareView);\r\n };\r\n\r\n const handleCompareCordinates = cordinates => {\r\n setCompareCordinates(cordinates);\r\n };\r\n\r\n const handleCompareRainfallAnamolyStartYearChange = start => {\r\n if (start) {\r\n setCompareRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n start_year: start,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleCompareRainfallAnamolyEndYearChange = end => {\r\n if (end) {\r\n setCompareRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n end_year: end,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleCompareRaSelectedStartYearChange = startYear => {\r\n if (startYear) {\r\n setCompareRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n selectedStartYear: startYear,\r\n };\r\n });\r\n }\r\n };\r\n const handleCompareRaSelectedEndYearChange = endYear => {\r\n if (endYear) {\r\n setCompareRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n selectedEndYear: endYear,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleCompareRainfallAnamolyMonthChange = month => {\r\n if (month) {\r\n setCompareRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n month: month,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleRainfallAnamolyStartYearChange = start => {\r\n if (start) {\r\n setRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n start_year: start,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleRainfallAnamolyEndYearChange = end => {\r\n if (end) {\r\n setRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n end_year: end,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleRaSelectedStartYearChange = startYear => {\r\n if (startYear) {\r\n setRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n selectedStartYear: startYear,\r\n };\r\n });\r\n }\r\n };\r\n\r\n\r\n const handleRaSelectedEndYearChange = endYear => {\r\n if (endYear) {\r\n setRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n selectedEndYear: endYear,\r\n };\r\n });\r\n }\r\n };\r\n\r\n const handleRainfallAnamolyMonthChange = month => {\r\n if (month) {\r\n setRainfallAnomalyTime(prev => {\r\n return {\r\n ...prev,\r\n month: month,\r\n };\r\n });\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (\r\n (!_.isEmpty(selectedModule) && selectedModule?.api_slug === 'drought-decision-support') ||\r\n isHideViewGraph\r\n ) {\r\n const getLeafletDrawEle = document.getElementsByClassName('leaflet-draw');\r\n if (getLeafletDrawEle && getLeafletDrawEle[0]) {\r\n getLeafletDrawEle[0]?.classList.add('dds-leaflet-draw-css');\r\n }\r\n } else if (selectedModule?.api_slug !== 'drought-decision-support' || !isHideViewGraph) {\r\n const getLeafletDrawEle = document.getElementsByClassName('leaflet-draw');\r\n if (getLeafletDrawEle && getLeafletDrawEle[0]) {\r\n getLeafletDrawEle[0]?.classList.remove('dds-leaflet-draw-css');\r\n }\r\n }\r\n }, [selectedModule, isHideViewGraph]);\r\n\r\n //function to call map and time series api\r\n const handleApplyLayers = applyLayers => {\r\n if (applyLayers) {\r\n if(!_.isEqual(cordinateAndZoomReset, cordinateAndZoom)){\r\n setCordinateAndZoom(cordinateAndZoomReset)\r\n }\r\n if (!_.isEmpty(temporalAggregation) && !_.isEmpty(selectedParam)) {\r\n const requestObj = {};\r\n let paramSelected = Object.assign({}, selectedParam);\r\n if (\r\n selectedRegionId &&\r\n !_.isEmpty(selectedLocation.country?.value) &&\r\n _.isEmpty(selectedLocation?.state?.name) &&\r\n _.isEmpty(selectedLocation?.district?.name)\r\n )\r\n requestObj.region_id = selectedRegionId;\r\n if (selectedModule.api_slug === 'drought-prediction') {\r\n requestObj.parameter_id = selectedParam?.id;\r\n }\r\n if (selectedModule?.api_slug === 'drought-monitor') {\r\n if (selectedParam?.slug === INDICES_PARAMS.DRY_SPELL.slug) {\r\n requestObj.precipitation_threshold = drySpellPrecipitationThreshold.toString();\r\n }\r\n }\r\n\r\n if (selectedModule?.api_slug === 'drought-decision-support') {\r\n if (selectedParam?.slug === DRY_SPELL.DRY_SPELL_SLUG) {\r\n requestObj.precipitation_threshold = drySpellPrecipitationThreshold.toString();\r\n }\r\n }\r\n\r\n if (selectedLocation.country?.name !== SOUTH_ASIA_CONST.name) {\r\n requestObj.country_name = selectedLocation?.country?.name || '';\r\n }\r\n if (selectedLocation?.state?.value) {\r\n requestObj.state_name = selectedLocation?.state?.name || '';\r\n }\r\n if (selectedLocation?.district?.value) {\r\n requestObj.district_name = selectedLocation?.district?.name || '';\r\n }\r\n if (selectedLocation?.basin) {\r\n requestObj.basin_name = selectedLocation?.basin || '';\r\n }\r\n\r\n requestObj.temporal_aggregation = temporalAggregation.value;\r\n if (state.min && !isCompareClicked \r\n && OTHER_INDICES_API_INDICES_SLUGS.MODIS_FLOOD != selectedParam?.api_slug \r\n && OTHER_INDICES_API_INDICES_SLUGS.FLOOD != selectedParam?.api_slug\r\n && OTHER_INDICES_API_INDICES_SLUGS.EXTREME_RAINFALL != selectedParam?.api_slug\r\n ) requestObj.min = Number(state.min);\r\n if (state.max && !isCompareClicked \r\n && OTHER_INDICES_API_INDICES_SLUGS.MODIS_FLOOD != selectedParam?.api_slug \r\n && OTHER_INDICES_API_INDICES_SLUGS.FLOOD != selectedParam?.api_slug\r\n && OTHER_INDICES_API_INDICES_SLUGS.EXTREME_RAINFALL != selectedParam?.api_slug\r\n ) requestObj.max = Number(state.max);\r\n\r\n if (!isFinalDroughtMap && isCompareClicked) {\r\n let initialSelectedObj = JSON.parse(JSON.stringify(requestObj));\r\n let finalSelectedObj = JSON.parse(JSON.stringify(requestObj));\r\n let initialRequestResponse, finalRequestResponse;\r\n let initialSelectedParam = '';\r\n let compareParamSelected = '';\r\n initialSelectedParam = Object.assign({}, selectedParam);\r\n compareParamSelected = Object.assign({}, compareSelectedParam);\r\n\r\n if (compareParamSelected?.api_slug != INDICES_PARAMS?.RAINFALL_ANAMOLY?.api_slug){\r\n finalSelectedObj.start_date = finalSelectedDate.startDate;\r\n finalSelectedObj.end_date = finalSelectedDate.endDate;\r\n }\r\n if (selectedParam?.id === INDICES_PARAMS?.RAINFALL_ANAMOLY?.id) {\r\n initialSelectedObj.anomaly_year = rainfallAnomalyTime?.end_year?.label.toString() || '';\r\n initialSelectedObj.anomaly_month = rainfallAnomalyTime?.month?.value || '';\r\n initialSelectedObj.start_year = rainfallAnomalyTime?.selectedStartYear || '';\r\n initialSelectedObj.end_year = rainfallAnomalyTime?.selectedEndYear || '';\r\n }\r\n if (selectedParam?.api_slug != INDICES_PARAMS?.RAINFALL_ANAMOLY?.api_slug){\r\n initialSelectedObj.start_date = initialSelectedDate.startDate;\r\n initialSelectedObj.end_date = initialSelectedDate.endDate;\r\n }\r\n\r\n if (selectedModule?.api_slug === 'drought-monitor-v2') {\r\n if (initialSelectedParam?.id === INDICES_PARAMS.EXTREME_RAINFALL.id) {\r\n initialSelectedObj.precipitation_threshold = precipitationThreshold.toString();\r\n }\r\n if (initialSelectedParam?.api_slug === OTHER_INDICES_API_INDICES_SLUGS.FLOOD){\r\n initialSelectedObj.precipitation_threshold = precipitationThresholdFlood.toString();\r\n }\r\n if (compareParamSelected?.id === INDICES_PARAMS?.RAINFALL_ANAMOLY?.id) {\r\n finalSelectedObj.anomaly_year = compareRainfallAnomalyTime?.end_year?.label.toString() || '';\r\n finalSelectedObj.anomaly_month = compareRainfallAnomalyTime?.month?.value || '';\r\n finalSelectedObj.start_year = compareRainfallAnomalyTime?.selectedStartYear || '';\r\n finalSelectedObj.end_year = compareRainfallAnomalyTime?.selectedEndYear || '';\r\n }\r\n\r\n if (compareParamSelected?.id === INDICES_PARAMS.EXTREME_RAINFALL.id) {\r\n finalSelectedObj.precipitation_threshold = comparePrecipitationThreshold.toString();\r\n }\r\n if (compareParamSelected?.api_slug === OTHER_INDICES_API_INDICES_SLUGS.FLOOD) {\r\n finalSelectedObj.precipitation_threshold = comparePrecipitationThresholdFlood.toString();\r\n }\r\n }\r\n\r\n if (\r\n selectedModule?.api_slug === 'drought-monitor' ||\r\n selectedModule?.api_slug === 'drought-decision-support'\r\n ) {\r\n if (compareParamSelected?.id === INDICES_PARAMS.DRY_SPELL.id) {\r\n finalSelectedObj.precipitation_threshold = compareDrySpellPrecipitationThresold.toString();\r\n }\r\n }\r\n\r\n if (selectedModule?.api_slug === 'drought-prediction') {\r\n finalSelectedObj.parameter_id = compareSelectedParam?.id;\r\n if (initialSelectedParam?.name === 'SPI' || initialSelectedParam?.name === 'SRI')\r\n initialSelectedObj.month = selectedDPIndicesMonth?.frequency;\r\n if (compareParamSelected?.name === 'SPI' || compareParamSelected?.name === 'SRI') {\r\n finalSelectedObj.month = compareSelectedDPIndicesMonth?.frequency;\r\n }\r\n }\r\n\r\n setIsLoading(true);\r\n if (!_.isEmpty(initialSelectedParam) && !_.isEmpty(compareParamSelected)) {\r\n console.log(initialSelectedParam,198777)\r\n initialRequestResponse = initialSelectedParam?.master_server\r\n ? AXIOS_INSTANCE_MASTER_SERVER.post(\r\n `${MASTER_SERVER_BASE_URL}/${initialSelectedParam?.api_url}map`,\r\n initialSelectedObj,\r\n )\r\n : AXIOS_INSTANCE.post(\r\n `${API_BASE_URL}/${initialSelectedParam?.api_slug}/map`,\r\n initialSelectedObj,\r\n );\r\n finalRequestResponse = compareParamSelected?.master_server\r\n ? AXIOS_INSTANCE_MASTER_SERVER.post(\r\n `${MASTER_SERVER_BASE_URL}/${compareParamSelected?.api_url}map`,\r\n finalSelectedObj,\r\n )\r\n : AXIOS_INSTANCE.post(\r\n `${API_BASE_URL}/${compareParamSelected?.api_slug}/map`,\r\n finalSelectedObj,\r\n );\r\n Promise.all([initialRequestResponse, finalRequestResponse])\r\n .then(responses => {\r\n let responsesData = [];\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n responses?.map(item => {\r\n const { data } = item;\r\n if (data.code === 200) {\r\n responsesData.push(data.result);\r\n } else {\r\n showError(data?.message);\r\n }\r\n });\r\n dispatch(\r\n getDroughtMapSuccess({\r\n response: { data: responsesData, isDroughtModule: true },\r\n }),\r\n );\r\n })\r\n .catch(error => {\r\n setIsLoading(false);\r\n setIsPreviewIndicesData(false);\r\n if (error?.response) {\r\n let errorRes = error.response;\r\n if (!_.isEmpty(errorRes?.data?.errors)) {\r\n showError(Object.values(errorRes?.data?.errors)[0]);\r\n } else if (errorRes?.data?.exception) {\r\n showError(errorRes?.data?.exception);\r\n } else {\r\n showError(errorRes?.data?.message);\r\n }\r\n } else {\r\n showError('No records found. please try again');\r\n }\r\n removeMapLayers(selectedParamLegendData, compareParamLegendData, layerControl);\r\n return;\r\n });\r\n }\r\n } else {\r\n if (isFinalDroughtMap) {\r\n // let indices_list = [];\r\n // DroughtIndicators?.impact?.map(item => {\r\n // if (item.name !== DSS_MODULE_CONSTS.FINAL_DROUGHT_MAP) {\r\n // item?.parameter?.map(p => {\r\n // indices_list.push(p.name);\r\n // });\r\n // }\r\n // });\r\n finalDroughtParameterMonthsList?.map(item => {\r\n if (item.selectedOption) {\r\n const dates = returnDSSDateFormat(selectedYear, item.selectedOption);\r\n if (dates) {\r\n requestObj[`${item.slug}_start_date`] = dates?.startDate;\r\n requestObj[`${item.slug}_end_date`] = dates.endDate;\r\n }\r\n }\r\n });\r\n // requestObj.indices_list = indices_list;\r\n // requestObj.start_date = initialSelectedDate.startDate;\r\n // requestObj.end_date = initialSelectedDate.endDate;\r\n setIsLoading(true);\r\n dispatch(getFinalDroughtMapRequest(requestObj));\r\n } else {\r\n if (!isFinalDroughtMap) {\r\n paramSelected = selectedParam;\r\n }\r\n if (\r\n selectedModule?.api_slug === 'drought-prediction' &&\r\n (paramSelected?.name === 'SPI' || paramSelected?.name === 'SRI')\r\n ) {\r\n requestObj.month = selectedDPIndicesMonth?.frequency;\r\n }\r\n\r\n if (\r\n selectedModule?.api_slug === 'drought-monitor-v2' &&\r\n paramSelected?.id === INDICES_PARAMS.EXTREME_RAINFALL.id\r\n ) {\r\n requestObj.precipitation_threshold = precipitationThreshold.toString();\r\n }\r\n if (\r\n selectedModule?.api_slug === 'drought-monitor-v2' &&\r\n paramSelected?.api_slug === OTHER_INDICES_API_INDICES_SLUGS.FLOOD\r\n ) {\r\n requestObj.precipitation_threshold = precipitationThresholdFlood.toString();\r\n }\r\n if (selectedParam?.api_slug != INDICES_PARAMS?.RAINFALL_ANAMOLY?.api_slug){\r\n requestObj.start_date = initialSelectedDate.startDate;\r\n requestObj.end_date = initialSelectedDate.endDate;\r\n } \r\n \r\n if (selectedParam?.api_slug === INDICES_PARAMS?.RAINFALL_ANAMOLY?.api_slug) {\r\n requestObj.anomaly_year = rainfallAnomalyTime?.end_year?.label.toString() || '';\r\n requestObj.anomaly_month = rainfallAnomalyTime?.month?.value || '';\r\n requestObj.start_year = rainfallAnomalyTime?.selectedStartYear || '';\r\n requestObj.end_year = rainfallAnomalyTime?.selectedEndYear || '';\r\n }\r\n let isDroughtModule = true;\r\n setIsLoading(true);\r\n dispatch(getDroughtMapRequest(\r\n paramSelected?.master_server?paramSelected?.api_url: paramSelected?.api_slug,\r\n requestObj,\r\n isDroughtModule,\r\n paramSelected?.master_server,\r\n ));\r\n }\r\n }\r\n }\r\n setApplyLayers(true);\r\n setShowCharts(false);\r\n setIndexLayers([]);\r\n }\r\n };\r\n\r\n const handleDroughtIndicators = data => {\r\n setDroughtIndicators(data);\r\n };\r\n\r\n //function to create overlays for the selected indices/params\r\n const renderParamLayer = paramList => {\r\n if (paramList && paramList?.length) {\r\n return paramList?.map((item, index) => {\r\n return (\r\n <>\r\n {/* TODO: need to create separate component */}\r\n \r\n
\r\n \r\n );\r\n }\r\n };\r\n\r\n //function to render map\r\n const renderMapContainer = () => {\r\n return (\r\n <>\r\n \r\n \r\n {errorData?.showError && (\r\n \r\n {!_.isEmpty(graphData) ? (\r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n )}\r\n \r\n )}\r\n \r\n {errorData?.data} \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {isLoading && (\r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default DroughtMap;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { DROUGHT_MODULES_CONST } from '../../Components/constants';\r\nimport Droughtmodal from './Drought-modal';\r\nimport DroughtMap from './rightmap';\r\n\r\nconst DroughtMonitor = (props) => {\r\n const [showPopup, setShowPopup] = useState(false);\r\n const [popUpSelectedModule, setpopUpSelectedModule] = useState();\r\n const [modal, setModal] = useState(false);\r\n const handleModal= (value)=> {\r\n setModal(value)\r\n }\r\n useEffect(() => {\r\n let params = new URLSearchParams(window.location.search);\r\n let keyValue;\r\n keyValue = params.get('key');\r\n if(keyValue){\r\n let module = DROUGHT_MODULES_CONST.find(item=>item.api_slug === keyValue);\r\n if(module){\r\n if(keyValue === \"drought-decision-support\"){\r\n setShowPopup(false);\r\n }\r\n else{\r\n setShowPopup(true);\r\n }\r\n setpopUpSelectedModule(module);\r\n }\r\n }\r\n else{\r\n setShowPopup(true)\r\n }\r\n }, []);\r\n\r\n const moduleHandler = data => {\r\n setpopUpSelectedModule(data);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n <>\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {renderMapContainer()}
\r\n {renderChartsUI()}\r\n \r\n \r\n \r\n 
\r\n
\r\n );\r\n}\r\nexport default SuccessModal;\r\nSuccessModal.propTypes = {\r\n okayButtonClickHandler: PropTypes.func,\r\n modalSuccessMessage: PropTypes.string,\r\n modalHeaderMessage: PropTypes.string,\r\n};\r\n","import '../../assets/CSS/register.css';\r\nimport React, { useEffect, useState, useRef } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport AutoSuggest from 'react-autosuggest';\r\nimport Button from 'reactstrap-button-loader';\r\nimport {\r\n Card,\r\n Col,\r\n Container,\r\n FormGroup,\r\n FormFeedback,\r\n Input,\r\n InputGroup,\r\n InputGroupAddon,\r\n Label,\r\n Row,\r\n Spinner,\r\n} from 'reactstrap';\r\nimport ReCAPTCHA from 'react-google-recaptcha';\r\nimport { t } from 'react-multi-lang';\r\nimport LeftImg from '../../assets/Images/left-vector-login.png';\r\nimport RightImg from '../../assets/Images/right-vector-login.png';\r\nimport { LOCATION } from '../../Components/constants';\r\nimport SADMS from '../../assets/Images/SADMS-logo.png';\r\nimport {\r\n isValidEmail,\r\n isValidMobileNumber,\r\n specialCharacterRegex,\r\n} from '../../Components/common/utils';\r\nimport { getToken } from '../../Components/common/utils';\r\nimport { getCountryRequest } from '../../redux/location/actions';\r\nimport { registerRequest } from '../../redux/register/registerAction';\r\nimport { COUNTRIES_JSON_LIST } from '../../Components/constants/index';\r\nimport SuccessModal from './Success';\r\nimport { verificationRequest } from '../../redux/register/registerAction';\r\n\r\nconst Register = () => {\r\n let history = useHistory();\r\n const dispatch = useDispatch();\r\n let defaultValues = {\r\n name: '',\r\n mobile: '',\r\n email: '',\r\n password: '',\r\n organization: '',\r\n country: '',\r\n };\r\n const nextProps = useSelector(state => ({\r\n countryData: state.Location || null,\r\n registerDataError: state.Register.registerDataError,\r\n registerData: state.Register.registerData || null,\r\n isRegisterRequesting: state.Register.isRegisterRequesting,\r\n verificationData: state.Register.verifiedData || null,\r\n isVerificationLoading: state.Register.isRegisterRequesting,\r\n verifiedDataError: state.Register.verifiedDataError,\r\n }));\r\n const [countryData, setCountryData] = useState();\r\n const [value, setValue] = useState('');\r\n const [suggestions, setSuggestions] = useState([]);\r\n const [emailRequired, setEmailRequired] = useState(false);\r\n const [passwortType, setPasswordType] = useState(true);\r\n const [passwordRequired, setPasswordRequired] = useState(false);\r\n const [passwordErrorMessage, setPasswordErrorMessage] = useState();\r\n const [organizationErrorMessage, setOrganizationErrorMessage] = useState();\r\n const [mobileNumberErrorMessage, setMobileNumberErrorMessage] = useState();\r\n const [nameRequired, setNameRequired] = useState(false);\r\n const [emailErrorMessage, setEmailErrorMessage] = useState();\r\n const [nameErrorMessage, setNameErrorMessage] = useState();\r\n const [organisationRequired, setOrganisationRequired] = useState(false);\r\n const [countryRequired, setCountryRequired] = useState(false);\r\n const [mobileNumberRequired, setMobileNumberRequired] = useState(false);\r\n const [captchaValidation, setCaptchaValidation] = useState(false);\r\n const [formData, setFormData] = useState(defaultValues);\r\n const [registerButtonDisable, setRegisterButtonDisable] = useState(false);\r\n const [successModal, setSuccessModal] = useState(false);\r\n const [modalMessage, setModalMessage] = useState();\r\n const [fromVerification, setFromVerification] = useState(false);\r\n const [modalHeaderMessage, setModalHeaderMessage] = useState();\r\n const recaptchaRef = React.createRef();\r\n\r\n let lowerCasedCompanies = [];\r\n useEffect(() => {\r\n if (getToken()) {\r\n history.push('/home');\r\n } else {\r\n let params = new URLSearchParams(window.location.search);\r\n let keyValue;\r\n keyValue = params.get('key');\r\n if (window.location.href.includes('key')) {\r\n dispatch(\r\n verificationRequest({\r\n verification_code: keyValue,\r\n }),\r\n );\r\n } else {\r\n history.push('/register');\r\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\r\n }\r\n }\r\n lowerCasedCompanies = COUNTRIES_JSON_LIST.map(company => {\r\n return {\r\n id: company.code,\r\n name: company.name.charAt(0).toUpperCase() + company.name.slice(1),\r\n };\r\n });\r\n setCountryData(lowerCasedCompanies);\r\n window.scrollTo({ top: 0, behavior: 'instant' });\r\n }, []);\r\n const isVerificationFirstRun = useRef(true);\r\n useEffect(() => {\r\n if (isVerificationFirstRun.current) {\r\n isVerificationFirstRun.current = false;\r\n return;\r\n }\r\n if (\r\n nextProps.verificationData &&\r\n nextProps.verificationData.data &&\r\n nextProps.verificationData.data.result\r\n ) {\r\n setModalHeaderMessage(nextProps.verificationData.data.title);\r\n setSuccessModal(true);\r\n setFromVerification(true);\r\n setModalMessage(nextProps.verificationData.data.result);\r\n }\r\n }, [nextProps.verificationData]);\r\n useEffect(() => {\r\n if (nextProps.verifiedDataError) {\r\n setSuccessModal(false);\r\n history.push('/register');\r\n }\r\n }, [nextProps.verifiedDataError]);\r\n\r\n const isRegisterFirstRun = useRef(true);\r\n useEffect(() => {\r\n if (isRegisterFirstRun.current) {\r\n isRegisterFirstRun.current = false;\r\n return;\r\n }\r\n if (\r\n nextProps.registerData &&\r\n nextProps.registerData.data &&\r\n nextProps.registerData.data.result\r\n ) {\r\n setModalHeaderMessage(nextProps.registerData.data.title);\r\n setSuccessModal(true);\r\n setModalMessage(nextProps.registerData.data.result);\r\n }\r\n }, [nextProps.registerData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.registerDataError) {\r\n setRegisterButtonDisable(true);\r\n }\r\n }, [nextProps.registerDataError]);\r\n\r\n useEffect(() => {\r\n\r\n let dataArrayValues = [];\r\n dataArrayValues = Object.values(formData);\r\n dataArrayValues?.splice(1, 1)\r\n if (dataArrayValues.some(item => item == '')) {\r\n setRegisterButtonDisable(false);\r\n } else {\r\n if (\r\n nameRequired === true ||\r\n emailRequired === true ||\r\n passwordRequired === true ||\r\n organisationRequired === true ||\r\n countryRequired === true ||\r\n mobileNumberRequired === true\r\n ) {\r\n setRegisterButtonDisable(false);\r\n } else {\r\n if (captchaValidation === false) {\r\n setRegisterButtonDisable(false);\r\n } else {\r\n setRegisterButtonDisable(true);\r\n }\r\n }\r\n }\r\n }, [formData, captchaValidation,countryRequired]);\r\n \r\n const getSuggestions = value => {\r\n return countryData.filter(data =>\r\n data.name.includes(\r\n value\r\n .trim()\r\n .charAt(0)\r\n .toUpperCase() + value.slice(1),\r\n ),\r\n );\r\n };\r\n const handleOkayButtonClick = value => {\r\n if (value === true && fromVerification) {\r\n setSuccessModal(false);\r\n history.push('/login');\r\n } else {\r\n setSuccessModal(false);\r\n history.push('/home');\r\n }\r\n };\r\n\r\n const handleNameChange = e => {\r\n if (e.target.value === '') {\r\n setNameErrorMessage(t('REGISTER.REQUIRED_NAME_ERROR_MSG'));\r\n setNameRequired(true);\r\n formData.name = e.target.value;\r\n setFormData({ ...formData });\r\n } else if (e.target.value.length > 20) {\r\n setNameErrorMessage('Name must be below 20 characters');\r\n setNameRequired(true);\r\n formData.name = e.target.value;\r\n setFormData({ ...formData });\r\n } else {\r\n formData.name = e.target.value;\r\n setFormData({ ...formData });\r\n setNameRequired(false);\r\n }\r\n };\r\n const handleMobileChange = e => {\r\n if (isValidMobileNumber(e.target.value)) {\r\n formData.mobile = e.target.value;\r\n setFormData({ ...formData });\r\n setMobileNumberRequired(false);\r\n } \r\n else if (e.target.value == '')\r\n {\r\n formData.mobile = e.target.value;\r\n setFormData({ ...formData });\r\n setMobileNumberRequired(false);\r\n }\r\n else {\r\n formData.mobile = e.target.value;\r\n setFormData({ ...formData });\r\n setMobileNumberErrorMessage(t('REGISTER.MOBILE_NUMBER_ERROR_MSG'));\r\n setMobileNumberRequired(true);\r\n }\r\n };\r\n const handleChangeEmail = e => {\r\n formData.email = e.target.value.trim();\r\n setFormData({ ...formData });\r\n if (!isValidEmail(e.target.value.trim())) {\r\n if (e.target.value === '') {\r\n setEmailErrorMessage(t('REGISTER.REQUIRED_EMAIL_ERROR_MSG'));\r\n } else {\r\n setEmailErrorMessage(t('REGISTER.EMAIL_ERROR_MSG'));\r\n }\r\n setEmailRequired(true);\r\n } else {\r\n setEmailRequired(false);\r\n }\r\n };\r\n\r\n const handleChangePassword = e => {\r\n formData.password = e.target.value?.split(' ').join('');\r\n setFormData({ ...formData });\r\n if (e.target.value === '') {\r\n setPasswordRequired(true);\r\n setPasswordErrorMessage(t('REGISTER.REQUIRED_PASSWORD_ERROR_MSG'));\r\n } else if (e.target.value.length < 8 || e.target.value.length > 20) {\r\n setPasswordRequired(true);\r\n setPasswordErrorMessage(t('REGISTER.PASSWORD_ERROR_MSG'));\r\n } else {\r\n setPasswordRequired(false);\r\n }\r\n };\r\n\r\n const showPassword = () => {\r\n setPasswordType(!passwortType);\r\n };\r\n\r\n const handleChangeOrganization = e => {\r\n formData.organization = e.target.value;\r\n setFormData({ ...formData });\r\n if (e.target.value === '') {\r\n setOrganisationRequired(true);\r\n setOrganizationErrorMessage(t('REGISTER.REQUIRED_ORGANIZATION_ERROR_MSG'));\r\n } else {\r\n if (specialCharacterRegex.test(formData.organization)) {\r\n setOrganisationRequired(true);\r\n setOrganizationErrorMessage(t('REGISTER.ORGANIZATION_SPCL_CHAR_ERROR_MSG'));\r\n } else {\r\n if (formData.name.trim() == e.target.value.trim()) {\r\n setOrganisationRequired(true);\r\n setOrganizationErrorMessage(t('REGISTER.ORGANIZATION_AND_NAME_SIMILAR_ERROR_MSG'));\r\n } else {\r\n setOrganisationRequired(false);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const handleRegister = () => {\r\n dispatch(registerRequest(formData));\r\n };\r\n const onChange = () => {\r\n setCaptchaValidation(true);\r\n };\r\n\r\n const onExpired = () => {\r\n setCaptchaValidation(false);\r\n };\r\n return (\r\n <>\r\n {modalHeaderMessage}
\r\n{modalSuccessMessage}
\r\n \r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\nexport default Register;\r\n","export const LOGIN_CONST = {\r\n LOGIN_REQUEST: 'LOGIN_REQUEST',\r\n LOGIN_SUCCESS: 'LOGIN_SUCCESS',\r\n LOGIN_FAILED: 'LOGIN_FAILED',\r\n LOGIN_CAROUSEL_REQUEST: 'LOGIN_CAROUSEL_REQUEST',\r\n LOGIN_CAROUSEL_SUCCESS: 'LOGIN_CAROUSEL_SUCCESS',\r\n LOGIN_CAROUSEL_FAILED: 'LOGIN_CAROUSEL_FAILED',\r\n};\r\n\r\nexport const FORGOT_PASSWORD = {\r\n FORGOT_PASSWORD_REQUEST: 'FORGOT_PASSWORD_REQUEST',\r\n FORGOT_PASSWORD_SUCCESS: 'FORGOT_PASSWORD_SUCCESS',\r\n FORGOT_PASSWORD_FAILED: 'FORGOT_PASSWORD_FAILED'\r\n}\r\n\r\nexport const CHANGE_PASSWORD = {\r\n CHANGE_PASSWORD_REQUEST: 'CHANGE_PASSWORD_REQUEST',\r\n CHANGE_PASSWORD_SUCCESS: 'CHANGE_PASSWORD_SUCCESS',\r\n CHANGE_PASSWORD_FAILED: 'CHANGE_PASSWORD_FAILED'\r\n}\r\n\r\nexport const RESET_PASSWORD = {\r\n RESET_PASSWORD_REQUEST: 'RESET_PASSWORD_REQUEST',\r\n RESET_PASSWORD_SUCCESS: 'RESET_PASSWORD_SUCCESS',\r\n RESET_PASSWORD_FAILED: 'RESET_PASSWORD_FAILED'\r\n}\r\n\r\nexport const RESET_LINK_VERIFICATION = {\r\n RESET_LINK_VERIFICATION_REQUEST: 'RESET_LINK_VERIFICATION_REQUEST',\r\n RESET_LINK_VERIFICATION_SUCCESS: 'RESET_LINK_VERIFICATION_SUCCESS',\r\n RESET_LINK_VERIFICATION_FAILED: 'RESET_LINK_VERIFICATION_FAILED'\r\n}\r\n","import {LOGIN_CONST, FORGOT_PASSWORD, CHANGE_PASSWORD, RESET_PASSWORD, RESET_LINK_VERIFICATION} from './loginConst';\r\n\r\n/**\r\n * User Login actions\r\n */\r\nexport const loginUser = (data) => ({\r\n type: LOGIN_CONST.LOGIN_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const loginUserSuccess = (response) => ({\r\n type: LOGIN_CONST.LOGIN_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const loginUserFailed = (error) => ({\r\n type: LOGIN_CONST.LOGIN_FAILED,\r\n payload: error,\r\n});\r\n\r\n/**\r\n * User carousel actions\r\n */\r\nexport const loginCarousel = () => ({\r\n type: LOGIN_CONST.LOGIN_CAROUSEL_REQUEST,\r\n payload: null,\r\n});\r\n\r\nexport const loginCarouselSuccess = (response) => ({\r\n type: LOGIN_CONST.LOGIN_CAROUSEL_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const loginCarouselFailed = (error) => ({\r\n type: LOGIN_CONST.LOGIN_CAROUSEL_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\nexport const forgotPassword = (data) => ({\r\n type: FORGOT_PASSWORD.FORGOT_PASSWORD_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const forgotPasswordSuccess = (response) => ({\r\n type: FORGOT_PASSWORD.FORGOT_PASSWORD_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const forgotPasswordFailed = (error) => ({\r\n type: FORGOT_PASSWORD.FORGOT_PASSWORD_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\n\r\n\r\n\r\nexport const changePassword = (data) => ({\r\n type: CHANGE_PASSWORD.CHANGE_PASSWORD_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const changePasswordSuccess = (response) => ({\r\n type: CHANGE_PASSWORD.CHANGE_PASSWORD_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const changePasswordFailed = (error) => ({\r\n type: CHANGE_PASSWORD.CHANGE_PASSWORD_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\n\r\n\r\n\r\nexport const resetPassword = (data) => ({\r\n type: RESET_PASSWORD.RESET_PASSWORD_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const resetPasswordSuccess = (response) => ({\r\n type: RESET_PASSWORD.RESET_PASSWORD_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const resetPasswordFailed = (error) => ({\r\n type: RESET_PASSWORD.RESET_PASSWORD_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\n\r\nexport const resetLinkVerificationRequest = (data) => ({\r\n type: RESET_LINK_VERIFICATION.RESET_LINK_VERIFICATION_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const resetLinkVerificationSuccess = (response) => ({\r\n type: RESET_LINK_VERIFICATION.RESET_LINK_VERIFICATION_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const resetLinkVerificationFailed = (error) => ({\r\n type: RESET_LINK_VERIFICATION.RESET_LINK_VERIFICATION_FAILED,\r\n payload: error,\r\n});","import React, { useEffect, useState, useRef } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { reduxForm } from 'redux-form';\r\nimport {\r\n Form,\r\n Card,\r\n Container,\r\n Col,\r\n FormFeedback,\r\n FormGroup,\r\n InputGroup,\r\n InputGroupAddon,\r\n Input,\r\n Label,\r\n Row,\r\n} from 'reactstrap';\r\nimport { ToastContainer } from 'react-toastify';\r\nimport { t } from 'react-multi-lang';\r\nimport '../../assets/CSS/login.css';\r\nimport LeftImg from '../../assets/Images/left-vector-login.png';\r\nimport RightImg from '../../assets/Images/right-vector-login.png';\r\nimport SADMS from '../../assets/Images/SADMS-logo.png';\r\nimport { showError } from '../../Components/Notifications.js';\r\nimport {\r\n getToken,\r\n isValidEmail,\r\n signIn,\r\n hasPermissions,\r\n hasStaffUserPermission,\r\n} from '../../Components/common/utils';\r\nimport { loginUser, loginUserSuccess } from '../../redux/login/loginActions';\r\n\r\nconst LoginPage = props => {\r\n const dispatch = useDispatch();\r\n let history = useHistory();\r\n const { handleSubmit} = props;\r\n const [password, setPassword] = useState('');\r\n const [signInButtonDisabled, setSignInButtonDisabled] = useState(true);\r\n const [email, setEmail] = useState('');\r\n const [emailRequired, setEmailRequired] = useState(false);\r\n const [passwortType, setPasswordType] = useState(true);\r\n const [passwordRequired, setPasswordRequired] = useState(false);\r\n const [errorMessage, setErrorMessage] = useState();\r\n const [previourUrlPath,setPreviousUrlPath] = useState('')\r\n const [ddsKey,setDdsKey] = useState('')\r\n const nextProps = useSelector(state => ({\r\n loginData: state.Login.loginData || null,\r\n isLoginRequesting: state.Login.isLoginRequesting,\r\n loginDataError: state.Login.loginDataError,\r\n }));\r\n useEffect(() => {\r\n const urlParams = new URLSearchParams(window.location.search);\r\n const myParam = urlParams.get('prevPath');\r\n const keyParam = urlParams.get('key');\r\n if (myParam) setPreviousUrlPath(myParam)\r\n if (keyParam) setDdsKey(keyParam)\r\n if (getToken()) {\r\n history.push('/home');\r\n } \r\n }, []);\r\n\r\n const isFirstRun = useRef(true);\r\n useEffect(() => {\r\n if (isFirstRun.current) {\r\n isFirstRun.current = false;\r\n return;\r\n }\r\n if (nextProps.loginData) {\r\n let tokenData = {};\r\n tokenData = {\r\n token: nextProps.loginData.data.result.token,\r\n userDetails: nextProps.loginData.data.user_details,\r\n };\r\n signIn(tokenData);\r\n hasPermissions(nextProps.loginData.data.user_details[0].is_superuser);\r\n hasStaffUserPermission(nextProps.loginData.data.user_details[0].is_staff);\r\n if (nextProps.loginData.data.user_details[0].is_superuser) {\r\n history.push('/settingsDashboard');\r\n } else {\r\n if (previourUrlPath) {\r\n if (ddsKey) history.push('/'+ previourUrlPath + '?' + \"key=\" + ddsKey)\r\n else history.push('/'+previourUrlPath)\r\n }\r\n else history.push('/home');\r\n }\r\n } else {\r\n history.push('/login');\r\n }\r\n }, [nextProps.loginData]);\r\n\r\n useEffect(() => {\r\n if (\r\n nextProps.loginDataError &&\r\n nextProps.loginDataError.data &&\r\n nextProps.loginDataError.data.response &&\r\n nextProps.loginDataError.data.response.data &&\r\n nextProps.loginDataError.data.response.data.code\r\n ) {\r\n showError(t('LOGIN.EMAIL_PASSWORD_ERROR_MESSAGE'));\r\n }\r\n }, [nextProps.loginDataError]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(loginUserSuccess({}));\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (email === '' || password === '' || emailRequired || passwordRequired) {\r\n setSignInButtonDisabled(true);\r\n } else {\r\n setSignInButtonDisabled(false);\r\n }\r\n }, [email, password, emailRequired, passwordRequired]);\r\n const handleLoginClick = () => {\r\n let formDetails = {};\r\n formDetails = {\r\n email: email,\r\n password: password,\r\n };\r\n dispatch(loginUser(formDetails));\r\n };\r\n const onSubmit = formProps => {\r\n let formDetails = {};\r\n formDetails = {\r\n email: email,\r\n password: password,\r\n };\r\n dispatch(loginUser(formDetails));\r\n };\r\n const handleChangeEmail = e => {\r\n setEmail(e.target.value.trim());\r\n if (!isValidEmail(e.target.value.trim())) {\r\n if (e.target.value === '') {\r\n setErrorMessage(t('LOGIN.REQUIRED_EMAIL_ERROR'));\r\n } else {\r\n setErrorMessage(t('LOGIN.EMAIL_ERROR_MSG'));\r\n }\r\n setEmailRequired(true);\r\n setSignInButtonDisabled(true);\r\n } else {\r\n setEmailRequired(false);\r\n }\r\n };\r\n\r\n const showPassword = () => {\r\n setPasswordType(!passwortType);\r\n };\r\n\r\n const handleChangePassword = e => {\r\n if (e.target.value === '') {\r\n setPasswordRequired(true);\r\n setSignInButtonDisabled(true);\r\n } else {\r\n setPasswordRequired(false);\r\n }\r\n setPassword(e.target.value);\r\n };\r\n\r\n const handleForgotPassword = () => {\r\n history.push('/forgot-password');\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n {!successModal ? (\r\n <>\r\n {!window.location.href.includes('key') ? (\r\n \r\n
\r\n \r\n \r\n \r\n \r\n
\r\n ) : (\r\n \r\n \r\n 
\r\n
\r\n \r\n {' '}\r\n {t('REGISTER.REGISTER_FORM_TITLE')}\r\n
\r\n \r\n {t('REGISTER.REGISTER_FORM_CAPTION')}\r\n \r\n\r\n \r\n \r\n {nameErrorMessage} \r\n \r\n \r\n \r\n \r\n {mobileNumberErrorMessage}\r\n \r\n \r\n \r\n \r\n {emailErrorMessage} \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n {passwortType ? t('REGISTER.SHOW') : t('REGISTER.HIDE')}\r\n \r\n \r\n \r\n {passwordErrorMessage}\r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* {t('REGISTER.REQUIRED_ORGANIZATION_ERROR_MSG')} */}\r\n {organizationErrorMessage}\r\n \r\n \r\n \r\n \r\n {\r\n setSuggestions([]);\r\n }}\r\n onSuggestionsFetchRequested={({ value }) => {\r\n setValue(value);\r\n formData.country = value;\r\n setFormData({ ...formData });\r\n setSuggestions(getSuggestions(value));\r\n }}\r\n onSuggestionSelected={(_) => {\r\n setCountryRequired(false);\r\n }}\r\n getSuggestionValue={suggestion => suggestion.name}\r\n renderSuggestion={suggestion => {suggestion.name}}\r\n inputProps={{\r\n value: value,\r\n autoComplete: 'none',\r\n onChange: (_, { newValue }) => {\r\n formData.country = newValue;\r\n if (newValue !== '') {\r\n setCountryRequired(true);\r\n } else {\r\n setCountryRequired(false);\r\n }\r\n setFormData({ ...formData });\r\n setValue(newValue);\r\n },\r\n }}\r\n highlightFirstSuggestion={true}\r\n invalid={countryRequired}\r\n />\r\n \r\n {t('REGISTER.REQUIRED_COUNTRY_ERROR_MSG')}\r\n \r\n \r\n
\r\n \r\n \r\n {t('REGISTER.REGISTER')}\r\n \r\n
\r\n \r\n {t('REGISTER.AGREE')}{' '}\r\n \r\n {t('REGISTER.TERMS_CONDITIONS')}\r\n \r\n
\r\n\r\n {t('REGISTER.HAVE_ACCOUNT')}{' '}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default reduxForm({ form: 'simple' })(LoginPage);\r\n","export const USER_LIST_CONST = {\r\n USER_LIST_REQUEST: 'USER_LIST_REQUEST',\r\n USER_LIST_SUCCESS: 'USER_LIST_SUCCESS',\r\n USER_LIST_FAILED: 'USER_LIST_FAILED',\r\n }\r\n\r\nexport const USER_BY_ID_CONST = {\r\n USER_BY_ID_REQUEST: 'USER_BY_ID_REQUEST',\r\n USER_BY_ID_SUCCESS: 'USER_BY_ID_SUCCESS',\r\n USER_BY_ID_FAILED: 'USER_BY_ID_FAILED',\r\n }\r\n\r\nexport const USER_DELETE_CONST = {\r\n USER_DELETE_REQUEST: 'USER_DELETE_REQUEST',\r\n USER_DELETE_SUCCESS: 'USER_DELETE_SUCCESS',\r\n USER_DELETE_FAILED: 'USER_DELETE_FAILED',\r\n }\r\n\r\nexport const USER_PERMISSIONS_CONST = {\r\n USER_PERMISSION_REQUEST: 'USER_PERMISSION_REQUEST',\r\n USER_PERMISSION_SUCCESS: 'USER_PERMISSION_SUCCESS',\r\n USER_PERMISSION_FAILED: 'USER_PERMISSION_FAILED',\r\n }\r\n\r\nexport const UPDATE_PERMISSIONS_CONST = {\r\n UPDATE_PERMISSION_REQUEST: 'UPDATE_PERMISSION_REQUEST',\r\n UPDATE_PERMISSION_SUCCESS: 'UPDATE_PERMISSION_SUCCESS',\r\n UPDATE_PERMISSION_FAILED: 'UPDATE_PERMISSION_FAILED',\r\n }\r\n \r\nexport const USER_PERMISSIONS_BY_ID_CONST = {\r\n USER_PERMISSIONS_BY_ID_REQUEST: 'USER_PERMISSIONS_BY_ID_REQUEST',\r\n USER_PERMISSIONS_BY_ID_SUCCESS: 'USER_PERMISSIONS_BY_ID_SUCCESS',\r\n USER_PERMISSIONS_BY_ID_FAILED: 'USER_PERMISSIONS_BY_ID_FAILED',\r\n }\r\n \r\nexport const USER_DETAIL_CONST = {\r\n USER_DETAIL_REQUEST: ' USER_DETAIL_REQUEST',\r\n USER_DETAIL_SUCCESS: ' USER_DETAIL_SUCCESS',\r\n USER_DETAIL_FAILED: ' USER_DETAIL_FAILED',\r\n }","import { USER_LIST_CONST, USER_BY_ID_CONST, USER_DELETE_CONST,USER_PERMISSIONS_CONST, UPDATE_PERMISSIONS_CONST, USER_PERMISSIONS_BY_ID_CONST,USER_DETAIL_CONST} from './userListConst';\r\nexport const userListRequest = (data) => ({\r\n type: USER_LIST_CONST.USER_LIST_REQUEST,\r\n payload: data,\r\n });\r\n \r\n export const userListSuccess = (response) => ({\r\n type: USER_LIST_CONST.USER_LIST_SUCCESS,\r\n payload: response,\r\n });\r\n \r\n export const userListFailed = (error) => ({\r\n type: USER_LIST_CONST.USER_LIST_FAILED,\r\n payload: error,\r\n });\r\n\r\n\r\n export const userByIdRequest = (data) => ({\r\n type: USER_BY_ID_CONST.USER_BY_ID_REQUEST,\r\n payload: data,\r\n });\r\n \r\n export const userByIdSuccess = (response) => ({\r\n type: USER_BY_ID_CONST.USER_BY_ID_SUCCESS,\r\n payload: response,\r\n });\r\n \r\n export const userByIdFailed = (error) => ({\r\n type: USER_BY_ID_CONST.USER_BY_ID_FAILED,\r\n payload: error,\r\n });\r\n\r\n\r\n export const deleteUserRequest = (data) => ({\r\n type: USER_DELETE_CONST.USER_DELETE_REQUEST,\r\n payload: data,\r\n });\r\n \r\n export const deleteUserSuccess = (response) => ({\r\n type: USER_DELETE_CONST.USER_DELETE_SUCCESS,\r\n payload: response,\r\n });\r\n \r\n export const deleteUserFailed = (error) => ({\r\n type: USER_DELETE_CONST.USER_DELETE_FAILED,\r\n payload: error,\r\n });\r\n\r\n\r\n export const userPermissionsRequest = (data) => ({\r\n type: USER_PERMISSIONS_CONST.USER_PERMISSION_REQUEST,\r\n payload: data,\r\n });\r\n \r\n export const userPermissionsSuccess = (response) => ({\r\n type: USER_PERMISSIONS_CONST.USER_PERMISSION_SUCCESS,\r\n payload: response,\r\n });\r\n \r\n export const userPermissionsFailed = (error) => ({\r\n type: USER_PERMISSIONS_CONST.USER_PERMISSION_FAILED,\r\n payload: error,\r\n });\r\n\r\n\r\n export const userDetailRequest = (data) => ({\r\n type: USER_DETAIL_CONST.USER_DETAIL_REQUEST,\r\n payload: data,\r\n });\r\n \r\n export const userDetailSuccess = (response) => ({\r\n type: USER_DETAIL_CONST.USER_DETAIL_SUCCESS,\r\n payload: response,\r\n });\r\n \r\n export const userDetailFailed = (error) => ({\r\n type: USER_DETAIL_CONST.USER_DETAIL_FAILED,\r\n payload: error,\r\n });\r\n\r\n\r\n\r\n\r\n export const updatePermissionsRequest = (data) => ({\r\n type: UPDATE_PERMISSIONS_CONST.UPDATE_PERMISSION_REQUEST,\r\n payload: data,\r\n });\r\n \r\n export const updatePermissionsSuccess = (response) => ({\r\n type: UPDATE_PERMISSIONS_CONST.UPDATE_PERMISSION_SUCCESS,\r\n payload: response,\r\n });\r\n \r\n export const updatePermissionsFailed = (error) => ({\r\n type: UPDATE_PERMISSIONS_CONST.UPDATE_PERMISSION_FAILED,\r\n payload: error,\r\n });\r\n \r\n\r\n export const userPermissionsByIdRequest = (data) => ({\r\n type: USER_PERMISSIONS_BY_ID_CONST.USER_PERMISSIONS_BY_ID_REQUEST,\r\n payload: data,\r\n });\r\n \r\n export const userPermissionsByIdSuccess = (response) => ({\r\n type: USER_PERMISSIONS_BY_ID_CONST.USER_PERMISSIONS_BY_ID_SUCCESS,\r\n payload: response,\r\n });\r\n \r\n export const userPermissionsByIdFailed = (error) => ({\r\n type: USER_PERMISSIONS_BY_ID_CONST.USER_PERMISSIONS_BY_ID_FAILED,\r\n payload: error,\r\n });","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAUCAYAAACqJ5zlAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABFSURBVHgB3Y5BDQAgDAPXBgFYmwI04AAcIBEJKFjYEnDAiyZN7tJPoarFzIaILJItuTSXHI2BR24WAVSHGeLc5UHw0Y8NFIwz1gfCNcwAAAAASUVORK5CYII=\"","import React, { useEffect, useState, useRef } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport PropTypes from 'prop-types';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport { FormGroup, Input, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { changeStatusRequest } from '../../redux/accessKey/accessKeyActions';\r\nimport _ from 'lodash';\r\n\r\nconst ReasonModal = props => {\r\n const {\r\n className,\r\n isOpen,\r\n modalData,\r\n handleLatestData,\r\n handleRejectModal,\r\n handleModalToggle,\r\n } = props;\r\n const dispatch = useDispatch();\r\n const t = useTranslation();\r\n const [textAreaData, setTextAreaData] = useState('');\r\n const [requestData, setRequestData] = useState();\r\n const nextProps = useSelector(state => ({\r\n changeStatusData: state.AccessKey.changeStatusData || '',\r\n isChangeStatusRequesting: state.AccessKey.changeStatusRequesting,\r\n }));\r\n useEffect(() => {\r\n setRequestData(modalData);\r\n }, [isOpen]);\r\n\r\n function usePrevious(value) {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n }\r\n\r\n const currentprops = nextProps.changeStatusData && nextProps.changeStatusData.data;\r\n const previousprops = usePrevious(currentprops);\r\n\r\n const isSecondRun = useRef(true);\r\n\r\n useEffect(() => {\r\n if (isSecondRun.current) {\r\n isSecondRun.current = false;\r\n return;\r\n }\r\n if (currentprops && currentprops !== previousprops) {\r\n if (currentprops) {\r\n handleRejectModal(false);\r\n handleModalToggle(false);\r\n handleLatestData('reject');\r\n }\r\n }\r\n }, [currentprops, previousprops]);\r\n\r\n const toggle = value => {\r\n if (value === 'cancel') {\r\n handleRejectModal(false);\r\n } else if (value === 'reject') {\r\n requestData.reject_response = textAreaData;\r\n dispatch(changeStatusRequest(requestData));\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n handleRejectModal(false);\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {t('LOGIN.LOGIN_TITLE')}
\r\n\r\n \r\n \r\n
\r\n \r\n \r\n handleClose()} className=\"reason-modal-header\">\r\n {t('PUBLIC_API_ADMIN.REASON_TITLE')}\r\n \r\n \r\n \r\n setTextAreaData(e.target.value)}\r\n />\r\n \r\n \r\n \r\n {' '}\r\n toggle('reject')}\r\n // className=\"modal-reject-button\"\r\n className=\"api-modal-reject-button\"\r\n disabled={_.isEmpty(textAreaData.replace(/\\s/g, ''))}\r\n >\r\n {t('PUBLIC_API_ADMIN.REJECT')}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ReasonModal;\r\nReasonModal.propTypes = {\r\n isOpen: PropTypes.bool,\r\n modalData: PropTypes.object,\r\n handleLatestData: PropTypes.func,\r\n handleRejectModal: PropTypes.func,\r\n handleModalToggle: PropTypes.func,\r\n};\r\n","import React, { useEffect, useRef } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport PropTypes from 'prop-types';\r\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { changeStatusRequest } from '../../redux/accessKey/accessKeyActions';\r\n\r\nconst ConfirmationModal = props => {\r\n const {\r\n className,\r\n isOpen,\r\n modalData,\r\n handleLatestData,\r\n handleApprovedModalToggle,\r\n fromModal,\r\n reactivateClicked,\r\n handleReactivateModalToggle,\r\n activeTab,\r\n } = props;\r\n const dispatch = useDispatch();\r\n const t = useTranslation();\r\n const nextProps = useSelector(state => ({\r\n changeStatusData: state.AccessKey.changeStatusData || '',\r\n isChangeStatusRequesting: state.AccessKey.changeStatusRequesting,\r\n }));\r\n\r\n function usePrevious(value) {\r\n const ref = useRef();\r\n useEffect(() => {\r\n ref.current = value;\r\n });\r\n return ref.current;\r\n }\r\n const currentprops = nextProps.changeStatusData && nextProps.changeStatusData.data;\r\n const previousprops = usePrevious(currentprops);\r\n\r\n const isSecondRun = useRef(true);\r\n useEffect(() => {\r\n if (isSecondRun.current) {\r\n isSecondRun.current = false;\r\n return;\r\n }\r\n if (currentprops && currentprops !== previousprops) {\r\n if (currentprops) {\r\n handleApprovedModalToggle(false);\r\n if (reactivateClicked === true) {\r\n handleReactivateModalToggle();\r\n }\r\n handleLatestData();\r\n }\r\n }\r\n }, [currentprops, previousprops]);\r\n\r\n const toggle = value => {\r\n if (value === 'no') {\r\n if (reactivateClicked === true) {\r\n handleReactivateModalToggle();\r\n }\r\n handleApprovedModalToggle(false);\r\n } else if (value === 'yes') {\r\n dispatch(changeStatusRequest(modalData));\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n handleApprovedModalToggle(false);\r\n };\r\n\r\n return (\r\n \r\n \r\n handleClose()} className=\"reason-modal-header\">\r\n {t('PUBLIC_API_ADMIN.CONFIRMATION')}\r\n \r\n \r\n \r\n \r\n {' '}\r\n toggle('yes')}\r\n className=\"modal-reject-button\"\r\n >\r\n {t('PUBLIC_API_ADMIN.YES')}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ConfirmationModal;\r\nConfirmationModal.propTypes = {\r\n isOpen: PropTypes.bool,\r\n modalData: PropTypes.object,\r\n handleLatestData: PropTypes.func,\r\n handleApprovedModalToggle: PropTypes.bool,\r\n fromModal: PropTypes.bool,\r\n activeTab: PropTypes.string,\r\n};\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n Table,\r\n Row,\r\n Col,\r\n Input,\r\n Label,\r\n} from 'reactstrap';\r\nimport Select from 'react-select';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport PropTypes from 'prop-types';\r\nimport { getParametersRequest } from '../../redux/accessKey/accessKeyActions';\r\nimport ReasonModal from './ReasonModal';\r\nimport ConfirmationModal from './Confirmation';\r\nimport { getCountryRequest, getCountryBoRequest } from '../../redux/actions';\r\nimport { LOCATION } from '../../Components/constants';\r\nimport _ from 'lodash';\r\n\r\nconst ClientDetailmodal = (props) => {\r\n const { modalOpen, handleModalToggle, req_data, handleLatestData, fromEditDetails, activeTab } =\r\n props;\r\n const expiry_duration_options = [3, 4, 12, 15, 18, 24];\r\n const status_options = ['select', 'approve', 'reject'];\r\n const [modal, setModal] = useState(modalOpen);\r\n const [indicesList, setIndicesList] = useState();\r\n const [isRejectModalOpen, setRejectModalOpen] = useState(false);\r\n const [isApproveModalOpen, setApproveModalOpen] = useState(false);\r\n const [rejectModalData, setRejectModalData] = useState();\r\n const [approveModalData, setApproveModalData] = useState();\r\n const [selectedAll, setSelectedAll] = useState(false);\r\n const [selectedIndices, setSelectedIndices] = useState([]);\r\n const [initialSelectedIndices, setInitialSelectedIndices] = useState([]);\r\n const [expiryDuration, setExpiryDuration] = useState();\r\n const [initExpiryDuration, setInitExpiryDuration] = useState();\r\n const [status, setStatus] = useState();\r\n const [initStatus, setInitStatus] = useState();\r\n const [accessCountryList, setAccessCountryList] = useState();\r\n const [selectedAccessCountries, setSelectedAccessCountries] = useState();\r\n const [initselectedAccessCountries, setInitSelectedAccessCountries] = useState();\r\n const dispatch = useDispatch();\r\n const t = useTranslation();\r\n const nextProps = useSelector((state) => ({\r\n IndicesData: state.AccessKey.getParametersData || null,\r\n changeStatusData: state.AccessKey.changeStatusData || null,\r\n countryList: state.Location.countryList || null,\r\n }));\r\n //const toggleDropDown = () => setDropdownOpen(!dropdownOpen);\r\n useEffect(() => {\r\n if (req_data && req_data.api_ids) {\r\n setSelectedIndices(req_data.api_ids);\r\n setInitialSelectedIndices(req_data.api_ids);\r\n setExpiryDuration(req_data.expiry_duration ? req_data.expiry_duration : 3);\r\n setInitExpiryDuration(req_data.expiry_duration ? req_data.expiry_duration : 3);\r\n setStatus(req_data.request_status);\r\n setInitStatus(req_data.request_status);\r\n let options = [];\r\n if (accessCountryList?.length) {\r\n let a;\r\n req_data.approved_access_countries.map((d) => {\r\n a = accessCountryList.filter((i) => i.id === d);\r\n let data;\r\n if (a && a[0]) {\r\n data = {\r\n value: a[0].name,\r\n label: `${a[0].name}`,\r\n id: a[0].id,\r\n };\r\n }\r\n options.push(data);\r\n });\r\n setSelectedAccessCountries(options);\r\n setInitSelectedAccessCountries(options);\r\n }\r\n }\r\n }, [req_data, accessCountryList]);\r\n\r\n useEffect(() => {\r\n if (fromEditDetails) {\r\n dispatch(getCountryBoRequest({ location_type: LOCATION.Country, parent_id: '' }));\r\n } else {\r\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\r\n }\r\n }, []);\r\n useEffect(() => {\r\n if (nextProps.countryList) {\r\n if (nextProps.countryList.result) {\r\n setAccessCountryList(nextProps.countryList.result);\r\n }\r\n }\r\n }, [nextProps.countryList]);\r\n\r\n const viewtoggle = (value) => {\r\n if (value === 'update') {\r\n let data;\r\n if (status === 'approve') {\r\n if (selectedAccessCountries) {\r\n let b = [];\r\n selectedAccessCountries?.map((i) => {\r\n b.push(i?.id);\r\n });\r\n data = {\r\n id: req_data && req_data.id,\r\n request_status: 'approve',\r\n api_ids: selectedIndices,\r\n expiry_duration: expiryDuration,\r\n approved_access_countries: b,\r\n };\r\n setApproveModalOpen(true);\r\n setApproveModalData(data);\r\n }\r\n } else if (status === 'reject') {\r\n if (selectedAccessCountries) {\r\n let b = [];\r\n selectedAccessCountries?.map((i) => {\r\n b.push(i?.id);\r\n });\r\n data = {\r\n id: req_data && req_data.id,\r\n request_status: 'reject',\r\n reject_response: '',\r\n api_ids: selectedIndices,\r\n approved_access_countries: b,\r\n };\r\n setRejectModalOpen(true);\r\n setRejectModalData(data);\r\n }\r\n }\r\n } else {\r\n setModal(false);\r\n handleModalToggle(false);\r\n }\r\n };\r\n useEffect(() => {\r\n if (modalOpen) {\r\n dispatch(getParametersRequest('drought'));\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (nextProps.IndicesData) {\r\n const {\r\n data: { result },\r\n } = nextProps.IndicesData;\r\n if (result) {\r\n setIndicesList(result);\r\n }\r\n }\r\n }, [nextProps.IndicesData]);\r\n\r\n useEffect(() => {\r\n if (selectedIndices && indicesList) {\r\n let a = [];\r\n indicesList.map((i) => {\r\n a.push(i.id);\r\n });\r\n let b = selectedIndices.sort().join(',') === a.sort().join(',');\r\n if (b === true) {\r\n setSelectedAll(true);\r\n } else {\r\n setSelectedAll(false);\r\n }\r\n }\r\n }, [selectedIndices, indicesList]);\r\n\r\n const handleOnchangeIndices = (e, id) => {\r\n if (selectedIndices.includes(id)) {\r\n let b = [];\r\n b = selectedIndices;\r\n setSelectedIndices(b.filter((i) => i !== id));\r\n } else {\r\n setSelectedIndices([...selectedIndices, id]);\r\n }\r\n };\r\n\r\n const handleSelectAllIndices = (e) => {\r\n let a = [];\r\n if (e.target.checked) {\r\n indicesList.map((i) => {\r\n a.push(i.id);\r\n });\r\n setSelectedIndices(a);\r\n } else {\r\n setSelectedIndices([]);\r\n }\r\n };\r\n const handleStatusChange = (value) => {\r\n setStatus(value);\r\n };\r\n\r\n const handleApprovedModalToggle = (value) => {\r\n setApproveModalOpen(value);\r\n setModal(false);\r\n handleModalToggle(false);\r\n };\r\n\r\n const handleRejectModal = (value) => {\r\n setRejectModalOpen(value);\r\n };\r\n const renderAPIParameterOptions = (list, value) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n params.map((param) => {\r\n let data = {\r\n value: param.name,\r\n label: `${param.name}`,\r\n id: param.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n return options;\r\n }\r\n setSelectedAccessCountries(options);\r\n }\r\n };\r\n const handleAccessCountryChange = (selectedOption) => {\r\n setSelectedAccessCountries(selectedOption);\r\n };\r\n\r\n const areEqual = (array1, array2) => {\r\n if (array1.length === array2.length) {\r\n return array1.every((element) => {\r\n if (array2.includes(element)) {\r\n return true;\r\n }\r\n return false;\r\n });\r\n }\r\n\r\n return false;\r\n };\r\n\r\n const areEqualCountries = (array1, array2) => {\r\n if (array1 && array2) {\r\n if (array1.length === array2.length && array1.length != 0) {\r\n let init = array1.map((item) => {\r\n return item?.id;\r\n });\r\n let updated = array2.map((item) => {\r\n return item?.id;\r\n });\r\n if (init.length === updated.length) {\r\n return init.every((element) => {\r\n if (updated.includes(element)) {\r\n return true;\r\n }\r\n\r\n return false;\r\n });\r\n }\r\n }\r\n }\r\n return false;\r\n };\r\n return (\r\n <>\r\n \r\n {fromModal && (activeTab === 'approve' || activeTab === 'reject')\r\n ? t('PUBLIC_API_ADMIN.UPDATE_CONFIRMATION')\r\n : reactivateClicked === true\r\n ? t('PUBLIC_API_ADMIN.REACTIVATE_CONFIRMATION')\r\n : t('PUBLIC_API_ADMIN.APPROVE_CONFIRMATION')}\r\n
\r\n\r\n \r\n \r\n {t('PUBLIC_API_ADMIN.CLIENT_DETAILS')}\r\n \r\n \r\n \r\n
\r\n |
\r\n \r\n \r\n {fromEditDetails ? (\r\n <>\r\n {' '}\r\n viewtoggle('update')}\r\n className=\"approve-button\"\r\n disabled={\r\n (areEqual(selectedIndices, initialSelectedIndices) &&\r\n initStatus == status &&\r\n areEqualCountries(initselectedAccessCountries, selectedAccessCountries) &&\r\n initExpiryDuration == expiryDuration) ||\r\n selectedIndices.length === 0 ||\r\n !status ||\r\n status === status_options[0]\r\n }\r\n >\r\n {t('PUBLIC_API_ADMIN.UPDATE')}\r\n \r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n
\r\n {isRejectModalOpen && (\r\n \r\n {t('PUBLIC_API_ADMIN.NAME')}\r\n{req_data && req_data.name ? req_data.name : 'N/A'} \r\n | \r\n \r\n {t('PUBLIC_API_ADMIN.EMAIL')}\r\n{req_data && req_data.email ? req_data.email : 'N/A'} \r\n | \r\n \r\n {t('PUBLIC_API_ADMIN.ORGANIZATION')}\r\n{req_data && req_data.organization ? req_data.organization : 'N/A'} \r\n | \r\n \r\n {t('PUBLIC_API_ADMIN.COUNTRY')}\r\n{req_data && req_data.country_name ? req_data.country_name : 'N/A'} \r\n | \r\n
\r\n {t('PUBLIC_API_ADMIN.DESIGNATION')}\r\n{req_data && req_data.designation ? req_data.designation : 'N/A'} \r\n | \r\n \r\n {t('PUBLIC_API_ADMIN.APPLICATION_URL')}\r\n{req_data && req_data.application_url ? req_data.application_url : 'N/A'} \r\n | \r\n \r\n {t('PUBLIC_API_ADMIN.EXPIRATION_TIME')}\r\n | \r\n \r\n {t('PUBLIC_API_ADMIN.STATUS')}\r\n | \r\n
\r\n
\r\n \r\n
\r\n Access Country
\r\n <>\r\n\r\n
\r\n {t('PUBLIC_API_ADMIN.PURPOSE')}
\r\n{req_data && req_data.purpose ? req_data.purpose : 'N/A'}
\r\n\r\n \r\n
\r\n \r\n {indicesList &&\r\n indicesList.map((i) => {\r\n return (\r\n
\r\n
\r\n {t('PUBLIC_API_ADMIN.INDICES_REQUEST')}
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n {t('PUBLIC_API_ADMIN.CONFIRMATION')} \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default DeleteConfirmationModal;\r\nDeleteConfirmationModal.propTypes = {\r\n isDeleteModalOpen: PropTypes.bool,\r\n handleDeleteConfirm: PropTypes.func,\r\n };","import React, { useCallback, useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';\r\nimport Optionicon from '../../assets/Images/option.png';\r\nimport PropTypes from 'prop-types';\r\nimport { getByIdRequest, deleteRequest } from '../../redux/accessKey/accessKeyActions';\r\nimport ClientDetailmodal from './DetailsModal';\r\nimport ConfirmationModal from './Confirmation';\r\nimport ReasonModal from './ReasonModal';\r\nimport DeleteConfirmationModal from './DeleteConfirmationModal';\r\nimport { isSuperAdmin } from '../../Components/common/utils';\r\n\r\nconst Detailsdropdown = props => {\r\n const {\r\n request_Id,\r\n handleLatestData,\r\n handleLatestDataForDelete,\r\n activeTab,\r\n updatedPermissions,\r\n } = props;\r\n const t = useTranslation();\r\n const nextProps = useSelector(state => ({\r\n selectedReqIdData: state.AccessKey.getByIdData || null,\r\n selectedReqIdDataRequesting: state.AccessKey.getByIdRequesting,\r\n deleteData: state.AccessKey.deleteData || null,\r\n }));\r\n const dispatch = useDispatch();\r\n const [dropdownOpen, setDropdownOpen] = useState(false);\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [reactivateClicked, setReactivateClicked] = useState(false);\r\n const [isApproveModalOpen, setApproveModalOpen] = useState(false);\r\n const [isRejectModalOpen, setRejectModalOpen] = useState(false);\r\n const [isFromEditDetails, setIsFromEditDetails] = useState(false);\r\n const [selectedReqModalData, setSelectedReqModalData] = useState();\r\n const [rejectModalData, setRejectModalData] = useState();\r\n const [approveModalData, setApproveModalData] = useState();\r\n const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);\r\n const [selectedTabListData, setSelectedTabListData] = useState({\r\n view_details: true,\r\n Edit_details: true,\r\n approved: true,\r\n reject: true,\r\n delete: false,\r\n re_activate: false,\r\n });\r\n\r\n const toggle = () => setDropdownOpen(prevState => !prevState);\r\n useEffect(() => {\r\n if (activeTab === 'approve') {\r\n if (updatedPermissions) {\r\n let a = {\r\n view_details:\r\n isSuperAdmin() || updatedPermissions.includes('view_accesskey') ? true : false,\r\n Edit_details:\r\n isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\r\n approved: false,\r\n reject: false,\r\n delete: isSuperAdmin() || updatedPermissions.includes('delete_accesskey') ? true : false,\r\n re_activate: false,\r\n };\r\n setSelectedTabListData(a);\r\n }\r\n } else if (activeTab === 'reject') {\r\n if (updatedPermissions) {\r\n let a = {\r\n view_details:\r\n isSuperAdmin() || updatedPermissions.includes('view_accesskey') ? true : false,\r\n Edit_details:\r\n isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\r\n approved: false,\r\n reject: false,\r\n delete: isSuperAdmin() || updatedPermissions.includes('delete_accesskey') ? true : false,\r\n re_activate: false,\r\n };\r\n setSelectedTabListData(a);\r\n }\r\n } else if (activeTab === 'delete') {\r\n if (updatedPermissions) {\r\n let a = {\r\n view_details:\r\n isSuperAdmin() || updatedPermissions.includes('view_accesskey') ? true : false,\r\n Edit_details: false,\r\n approved: false,\r\n reject: false,\r\n delete: false,\r\n re_activate: true,\r\n };\r\n setSelectedTabListData(a);\r\n }\r\n } else if (activeTab === 'new') {\r\n let a;\r\n if (updatedPermissions) {\r\n a = {\r\n view_details:\r\n isSuperAdmin() || updatedPermissions.includes('view_accesskey') ? true : false,\r\n Edit_details:\r\n isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\r\n approved: isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\r\n reject: isSuperAdmin() || updatedPermissions.includes('add_accesskey') ? true : false,\r\n delete: false,\r\n re_activate: false,\r\n };\r\n setSelectedTabListData(a);\r\n }\r\n }\r\n }, [activeTab, updatedPermissions]);\r\n\r\n useEffect(() => {\r\n if (nextProps.selectedReqIdData) {\r\n const {\r\n data: { result },\r\n } = nextProps.selectedReqIdData;\r\n\r\n if (result?.[0]) {\r\n setSelectedReqModalData(result[0]);\r\n }\r\n }\r\n }, [nextProps.selectedReqIdData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.deleteData) {\r\n const {\r\n data: { result },\r\n } = nextProps.deleteData;\r\n if (result) {\r\n handleLatestDataForDelete();\r\n }\r\n }\r\n }, [nextProps.deleteData]);\r\n\r\n const handleViewDetailsModal = () => {\r\n setIsModalOpen(true);\r\n setIsFromEditDetails(false);\r\n dispatch(getByIdRequest(request_Id));\r\n };\r\n const handleEditDetailsModal = () => {\r\n setIsModalOpen(true);\r\n setIsFromEditDetails(true);\r\n dispatch(getByIdRequest(request_Id));\r\n };\r\n const handleModalToggle = () => {\r\n setIsModalOpen(false);\r\n };\r\n const handleApproved = () => {\r\n let data;\r\n data = {\r\n id: request_Id,\r\n request_status: 'approve',\r\n };\r\n setApproveModalData(data);\r\n setApproveModalOpen(true);\r\n };\r\n\r\n const handleReactivate = () => {\r\n let data;\r\n data = {\r\n id: request_Id,\r\n request_status: 'approve',\r\n };\r\n setApproveModalData(data);\r\n setApproveModalOpen(true);\r\n setReactivateClicked(true);\r\n };\r\n\r\n const handleReactivateModalToggle = () => {\r\n setReactivateClicked(false);\r\n };\r\n\r\n const handleRejected = () => {\r\n let data;\r\n data = {\r\n id: request_Id,\r\n request_status: 'reject',\r\n reject_response: '',\r\n };\r\n setRejectModalOpen(true);\r\n setRejectModalData(data);\r\n };\r\n\r\n const handleRejectModal = useCallback(value => {\r\n setRejectModalOpen(value);\r\n }, []);\r\n\r\n const handleDelete = () => {\r\n setIsDeleteModalOpen(true);\r\n };\r\n\r\n const handleDeleteConfirm = (boolean_value, value) => {\r\n setIsDeleteModalOpen(boolean_value);\r\n if (value === 'yes') {\r\n dispatch(deleteRequest(request_Id));\r\n }\r\n };\r\n\r\n const handleApprovedModalToggle = useCallback(value => {\r\n setApproveModalOpen(value);\r\n }, []);\r\n\r\n return (\r\n <>\r\n {t('PUBLIC_API_ADMIN.DELETE_CONFIRMATION')}
\r\n\r\n \r\n \r\n {headerGroups.map(headerGroup => (\r\n <>\r\n
\r\n
\r\n \r\n );\r\n};\r\nRequestListPagination.propTypes = {\r\n req_data: PropTypes.array,\r\n handleLatestData: PropTypes.func,\r\n selectedTab: PropTypes.string,\r\n handleLatestDataForDelete: PropTypes.func,\r\n handlePageSize: PropTypes.func,\r\n pageCount: PropTypes.number,\r\n handlePageNumber: PropTypes.func,\r\n pageNumber: PropTypes.number,\r\n recordsCount: PropTypes.number,\r\n activeTab: PropTypes.string,\r\n};\r\n","export default __webpack_public_path__ + \"static/media/back-button.b0201f56.svg\";","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'reactstrap';\r\nimport classnames from 'classnames';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport { getAllByTypeRequest } from '../../redux/accessKey/accessKeyActions';\r\nimport {userDetailRequest } from \"../../redux/user-list/userListAction\";\r\nimport { isSuperAdmin, isStaffUser } from \"../../Components/common/utils\";\r\nimport { RequestListPagination } from './pagination.js';\r\nimport RightArrow from \"../../assets/Images/back-button.svg\";\r\nimport { REQUEST_STATUS } from '../../Components/constants/index';\r\nimport { ToastContainer } from 'react-toastify';\r\nimport Loader from '../../Components/common/loader';\r\n\r\nconst Publicapikey = () => {\r\n const nextProps = useSelector((state) => ({\r\n newRequestData: state.AccessKey.getAllByTypeData || null,\r\n getAllByTypeRequesting: state.AccessKey.getAllByTypeRequesting,\r\n userDetailData: state.userList.userDetailData || null,\r\n }));\r\n const dispatch = useDispatch();\r\n let history = useHistory();\r\n const [activeTab, setActiveTab] = useState('new');\r\n const [newRequestList, setNewRequestList] = useState();\r\n const [updatedPermissions,setUpdatedPermissions] = useState();\r\n const [pageLimit, setPageLimit] = useState(10);\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState();\r\n const [recordsCount, setRecordsCount] = useState();\r\n const t = useTranslation();\r\n\r\n const toggle = (tab) => {\r\n setActiveTab(tab);\r\n setPageNumber(1);\r\n dispatch(getAllByTypeRequest({ status: tab, page: 1, limit: pageLimit }));\r\n };\r\n\r\n useEffect(() => {\r\n if (isSuperAdmin() || isStaffUser()) {\r\n dispatch(\r\n getAllByTypeRequest({ status: REQUEST_STATUS.NEW, page: pageNumber, limit: pageLimit }),\r\n );\r\n }\r\n else {\r\n history.push(\"/home\");\r\n }\r\n dispatch(userDetailRequest());\r\n }, []);\r\n\r\n\r\n \r\n useEffect(() => {\r\n if(nextProps.userDetailData){\r\n let a = [];\r\n const {\r\n data: { result },\r\n } = nextProps.userDetailData;\r\n if(result){\r\n result.user_permissions.map((i) => {\r\n a.push(i.codename);\r\n })\r\n setUpdatedPermissions(a);\r\n }\r\n }\r\n\r\n },[nextProps.userDetailData])\r\n\r\n useEffect(() => {\r\n if (nextProps.newRequestData) {\r\n const {\r\n data: { result },\r\n } = nextProps.newRequestData;\r\n if (result?.results?.length) {\r\n setNewRequestList(result.results);\r\n setPageCount(result.count);\r\n setRecordsCount(result.results.length);\r\n }else{\r\n setNewRequestList([]);\r\n setPageCount(0);\r\n setRecordsCount(0);\r\n }\r\n }\r\n }, [nextProps.newRequestData]);\r\n\r\n const handleLatestData = (value) => {\r\n dispatch(getAllByTypeRequest({ status: activeTab, page: pageNumber, limit: pageLimit }));\r\n };\r\n\r\n const handlePageSize = (value) => {\r\n setPageLimit(value);\r\n setPageNumber(1);\r\n dispatch(getAllByTypeRequest({ status: activeTab, page: 1, limit: value }));\r\n };\r\n\r\n const handleLatestDataForDelete = (value) => {\r\n dispatch(getAllByTypeRequest({ status: activeTab, page: pageNumber, limit: pageLimit }));\r\n };\r\n\r\n const handlePageNumber = (value) => {\r\n setPageNumber(value);\r\n dispatch(getAllByTypeRequest({ status: activeTab, page: value, limit: pageLimit }));\r\n };\r\n\r\n const handleManageCropsBackButton = () => {\r\n history.push(\"/settingsDashboard\");\r\n}\r\n\r\n return (\r\n <>\r\n | \r\n |
|---|
| \r\n | \r\n
| \r\n No record found .\r\n | \r\n
| \r\n | \r\n \r\n ) : (\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n {\r\n handleGoToPage(e);\r\n }}\r\n disabled={\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === 0\r\n ? true\r\n : false\r\n }\r\n style={{ width: '50px', border: 'none' }}\r\n />\r\n \r\n \r\n of{' '}\r\n {props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)}{' '}\r\n Pages\r\n \r\n \r\n handlepreviousPage()}\r\n className=\"previous-btn\"\r\n disabled={props.pageNumber <= 1 ? true : false}\r\n >\r\n {props.pageNumber <= 1 ? (\r\n 
\r\n ) : (\r\n 
\r\n )}\r\n \r\n handlenextPage()}\r\n className=\"next-btn\"\r\n disabled={\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === 0\r\n ? true\r\n : false\r\n }\r\n >\r\n {(props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === 0 ? (\r\n 
\r\n ) : (\r\n 
\r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n 
handleManageCropsBackButton()}/>\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Publicapikey;\r\n","import React from 'react';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport PropTypes from 'prop-types';\r\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport Button from 'reactstrap-button-loader';\r\n\r\nconst ConfirmationModal = props => {\r\n const { className, isOpen, handleModalToggle, handleDeleteConfirm } = props;\r\n const t = useTranslation();\r\n\r\n const toggle = value => {\r\n if (value === 'no') {\r\n handleModalToggle(false);\r\n } else if (value === 'yes') {\r\n handleDeleteConfirm();\r\n handleModalToggle(false);\r\n }\r\n };\r\n\r\n const handleClose = () => {\r\n handleModalToggle(false);\r\n };\r\n\r\n return (\r\n {t('PUBLIC_API_ADMIN.API_KEYS')}
\r\n \r\n\r\n \r\n handleClose()} className=\"reason-modal-header\">\r\n {t('STATIC_RESOURCE_ADMIN.CONFIRMATION')}\r\n \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ConfirmationModal;\r\nConfirmationModal.propTypes = {\r\n isOpen: PropTypes.bool,\r\n handleModalToggle: PropTypes.func,\r\n handleDeleteConfirm: PropTypes.func,\r\n};\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAH8SURBVHgBnVU7bsJAEN11XEGTtIjCnCBJwUdU5gShTBdygiQnwDkBcILACUJOgNMgPo1zgjgF1FRIkfjkPTSLwJhfRhqP2Z1582Z2x2gVI67rXk6nUxevD9AbqCNbITSAtgeDQSsuVkcXstlsBaamtb5UhyWEelFgKwJGoDeCQf3lcvlsWVYGQZqK37fQRwFzoM1cLleNZSgbHnQCsNd+v19XBySfzz8vFosqkyNJfTgcvqwBWSaZEQybJWwG6gRBHPvbkfZUWL4Wdt8sARsvx5jFMQWJGskkEomMNuygIcAy6h8CDLJ0ScjG446LyOJFHYW5wsGUaNGzDi1K20qM2A8Cwro8ZfZB2bb9tYeAQyABY1t2HBDbltdrAjp863a7OwchzELxIVgILUX9er1eaJJb6gxBSUd9LGGgCoWCE93cKDM0TE0fN0WuDyUgYCDZy3EZTZmm/LgeKjkHyI+NjJ9wLsPytLfuYPQ0IZk9Sc34vVuz2awJdhw3l5dUnSko90lJWzgpVhAEEyys5hDA1WKxeHMGGH09iV3ZCz7G43GQSqWuyBKl36fT6d/RaNQ7gVlT5vgV7Bpc3+owJsODMf0ImZ0X3txR3oT5fM5el5lcmDXwMVm3KvYDK0121GFhqx7BrL25qNX+kioy5zt/AWDlJ5PJlu/7k2jcH0el7V9PTmAKAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAACSSURBVHgB7Y29CYNQEIDvfDMkMwTTZIIkI6SIA7iGCAouYi8IjqAT2PjTWrvDQwUfvELxDuy8D666u+8DEASBhfsPo2U4P4p6uIrjeb439w1jW5WUP1LAkhvIkcOALdeIvqOxAIQfNaI48j5L0rGr6vvjM1AjiiM3O07EgX1wS25o8iRFjb59y+bpBa8zbgTh6kxDc0DCTOH8QwAAAABJRU5ErkJggg==\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYBAMAAAASWSDLAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAGFBMVEUAAAArVXoqVHwrUn0oVX0qVHwqVHwAAAC0PVPiAAAABnRSTlMAMIBgYH/PTsUGAAAAAWJLR0QAiAUdSAAAAAd0SU1FB+UJCw86DQAIIBgAAAABb3JOVAHPoneaAAAAOUlEQVQY02NgoB9gBBECUI6aAQMDSxKUE5bMwOCWCuWwphmwpAUwwKXgEiAphARQKhXJcNYABnoCAEztBxzsklyqAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA5LTExVDE1OjU4OjEzKzAwOjAw89th7QAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wOS0xMVQxNTo1ODoxMyswMDowMIKG2VEAAAAASUVORK5CYII=\"","import React, { useEffect, useState } from 'react';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport { Collapse, FormGroup, Label } from 'reactstrap';\r\nimport CloseIcon from '../../assets/Images/icons/close.png';\r\nimport UpIcon from '../../assets/Images/icons/up.png';\r\nimport DownIcon from '../../assets/Images/icons/down.png';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { Field, reduxForm, change } from 'redux-form';\r\nimport PropTypes from 'prop-types';\r\nimport { t } from 'react-multi-lang';\r\nimport { renderTextField } from '../../Components/common/renderInputField';\r\nimport { ERPAS } from '../../Components/constants';\r\nimport _ from 'lodash';\r\n\r\n\r\n\r\nconst validate = values => {\r\n return {};\r\n};\r\n\r\nconst RightSideBar = props => {\r\n const nextProps = useSelector(state => ({\r\n ForeCastSourcesData: state.Weather.weatherForecastSourcesData,\r\n StaticResourceData: state.staticResource.staticResourceData || null,\r\n isStaticResourceRequesting: state.staticResource.isStaticResourceRequesting,\r\n }));\r\n\r\n const dispatch = useDispatch();\r\n const {\r\n closed,\r\n handleClose,\r\n filterDataSources,\r\n handleClearFilterInitialValues,\r\n initialValues,\r\n formFilterData,\r\n handleFilterFormData,\r\n handleSubmit,\r\n reset,\r\n closeRightBar,\r\n handleFilter,\r\n noRecordsErrorHandler,\r\n updateInitialValues,\r\n } = props;\r\n\r\n const filter_req_data = {\r\n region_id: '',\r\n country_id: '',\r\n forecast_data_source_id: [],\r\n parameter_id: [],\r\n start_date: null,\r\n end_date: null,\r\n limit: 0,\r\n };\r\n\r\n const [isDataSourceOpen, setIsDataSourceOpen] = useState(false);\r\n const [isParametersOpen, setIsParametersOpen] = useState(false);\r\n const [isDataRangeOpen, setIsDataRangeOpen] = useState(false);\r\n const [submitDisabled, setSubmitDisabled] = useState(true);\r\n const [handlersClicked,setHandlersClicked] = useState(false)\r\n\r\n\r\n\r\n useEffect(() => {\r\n if (nextProps.StaticResourceData) {\r\n const {\r\n data: { result },\r\n } = nextProps.StaticResourceData;\r\n if (result.length <= 0) {\r\n noRecordsErrorHandler();\r\n }\r\n }\r\n }, [nextProps.StaticResourceData]);\r\n\r\n useEffect(() => {\r\n if (formFilterData) {\r\n if (formFilterData?.forecast_data_source_id?.length !== 0) {\r\n setIsDataSourceOpen(true);\r\n }\r\n if (formFilterData?.parameter_id?.length !== 0) {\r\n setIsParametersOpen(true);\r\n }\r\n if (formFilterData?.start_date || formFilterData?.end_date) {\r\n setIsDataRangeOpen(true);\r\n }\r\n } \r\n }, [formFilterData]);\r\n\r\n useEffect(()=>{\r\n if (handlersClicked){\r\n if (formFilterData?.forecast_data_source_id?.length !== 0 || formFilterData?.parameter_id?.length !== 0 || formFilterData?.start_date || formFilterData?.end_date){\r\n setSubmitDisabled(false)\r\n }\r\n }\r\n },[formFilterData.forecast_data_source_id, formFilterData.parameter_id, formFilterData.start_date, formFilterData?.end_date])\r\n\r\n\r\n useEffect(() => {\r\n if (!closed) {\r\n if (filterDataSources) {\r\n const { data } = filterDataSources;\r\n if (data?.result) {\r\n let categories = [];\r\n let paramArr = [];\r\n data?.result.map(i => {\r\n if (i.category !== 'Weather Forecast') {\r\n i.name = i.category;\r\n {\r\n i.data.map(item => {\r\n i.id = item?.forecast_data_source?.forecast_data_source_category_id;\r\n item.checked = false;\r\n });\r\n }\r\n categories.push(i);\r\n }\r\n if (i.category === 'Seasonal') {\r\n /**\r\n * changed by: sai krishna thalla\r\n * reason: filter paremeters data is not comming\r\n * date: 6-sep-2022\r\n */\r\n let params = i.data[0]?.forecast_data_source?.forecast_data_source_with_parameter;\r\n if (params?.length) {\r\n params?.map(item => {\r\n item?.parameter?.map(p => {\r\n let x = { ...p };\r\n x.name = p.parameter.name;\r\n x.id = p.parameter_id;\r\n x.slug = p.parameter.slug;\r\n x.checked = false;\r\n paramArr.push(x);\r\n });\r\n });\r\n }\r\n updateInitialValues({\r\n dataSourceData: categories,\r\n parameterData: paramArr,\r\n start_date: '',\r\n end_date: '',\r\n });\r\n }\r\n });\r\n categories = handleErpasCatagory(categories)\r\n }\r\n }\r\n }\r\n }, [filterDataSources]);\r\n\r\n const handleErpasCatagory =(catagories)=>{\r\n let a =[]\r\n a = catagories[1].data.filter((i)=>{return i.forecast_data_source.name != ERPAS})\r\n catagories[1].data = a;\r\n return catagories\r\n }\r\n\r\n const handleChangeParameters = (e, id) => {\r\n let a = formFilterData.parameter_id;\r\n initialValues.parameterData.map(item => {\r\n if (item.id === id) {\r\n if (a.includes(id)) {\r\n item.checked = false;\r\n formFilterData.parameter_id = a.filter(i => i !== id);\r\n handleFilterFormData(formFilterData, item);\r\n if (a.length < 0) {\r\n setSubmitDisabled(true);\r\n }\r\n } else {\r\n item.checked = true;\r\n a.push(item.id);\r\n formFilterData.parameter_id = a;\r\n handleFilterFormData(formFilterData, item);\r\n setSubmitDisabled(false);\r\n }\r\n }\r\n });\r\n setHandlersClicked(true)\r\n };\r\n\r\n const handleDataSourceChange = (e, id) => {\r\n let a = formFilterData.forecast_data_source_id;\r\n initialValues.dataSourceData.map(i => {\r\n i.data.map(item => {\r\n if (item.forecast_data_source.id === id) {\r\n if (a?.includes(id)) {\r\n item.checked = false;\r\n formFilterData.forecast_data_source_id = a.filter(i => i !== id);\r\n handleFilterFormData(formFilterData, i);\r\n if (a.length < 0) {\r\n setSubmitDisabled(true);\r\n }\r\n } else {\r\n item.checked = true;\r\n a.push(item.forecast_data_source.id);\r\n formFilterData.forecast_data_source_id = a;\r\n handleFilterFormData(formFilterData, i);\r\n setSubmitDisabled(false);\r\n }\r\n }\r\n });\r\n });\r\n setHandlersClicked(true)\r\n };\r\n \r\n\r\n const onFormSubmit = formProps => {\r\n handleFilter(formFilterData);\r\n };\r\n const handleStartDate = e => {\r\n formFilterData.start_date = e.target.value;\r\n handleFilterFormData(formFilterData);\r\n updateInitialValues({\r\n ...initialValues,\r\n start_date: e.target.value !== '' ? e.target.value : null,\r\n });\r\n setSubmitDisabled(false);\r\n setHandlersClicked(true)\r\n };\r\n\r\n const handleEndDate = e => {\r\n formFilterData.end_date = e.target.value;\r\n updateInitialValues({\r\n ...initialValues,\r\n end_date: e.target.value !== '' ? e.target.value : null,\r\n });\r\n handleFilterFormData(formFilterData);\r\n setSubmitDisabled(false);\r\n setHandlersClicked(true)\r\n };\r\n\r\n const handleClearFilters = () => {\r\n reset('filter-form');\r\n dispatch(change('filter-form', 'start_date', ''));\r\n dispatch(change('filter-form', 'end_date', ''));\r\n let updatedInitialValues = JSON.parse(JSON.stringify(initialValues));\r\n let updatedParamValues = JSON.parse(JSON.stringify(initialValues));\r\n if (initialValues.dataSourceData) {\r\n updatedInitialValues = initialValues.dataSourceData.map(i => {\r\n let x = JSON.parse(JSON.stringify(i));\r\n x.data = i.data.map(item => {\r\n item.checked = false;\r\n return item;\r\n });\r\n return x;\r\n });\r\n }\r\n if (initialValues.parameterData) {\r\n updatedParamValues = initialValues.parameterData.map(i => {\r\n let x = JSON.parse(JSON.stringify(i));\r\n x.checked = false;\r\n return x;\r\n });\r\n }\r\n setIsDataRangeOpen(false);\r\n setIsParametersOpen(false);\r\n setIsDataSourceOpen(false);\r\n handleClearFilterInitialValues(updatedInitialValues, updatedParamValues);\r\n handleFilter(filter_req_data);\r\n window.scrollTo({ top: 0, behavior: 'auto' });\r\n };\r\n\r\n\r\n return (\r\n {t('STATIC_RESOURCE_ADMIN.DELETE_CONFIRM_MSG')}
\r\n\r\n
\r\n );\r\n};\r\nRightSideBar.propTypes = {\r\n noRecordsErrorHandler: PropTypes.func,\r\n handleFilterFormData: PropTypes.func,\r\n formFilterData: PropTypes.object,\r\n};\r\nexport default reduxForm({\r\n form: 'filter-form',\r\n validate,\r\n enableReinitialize: true,\r\n})(RightSideBar);\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Card, CardBody, Label } from 'reactstrap';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { Field, reduxForm, change } from 'redux-form';\r\nimport PropTypes from 'prop-types';\r\nimport { showSuccess } from '../../Components/Notifications';\r\nimport {\r\n staticResourceAddRequest,\r\n staticResourceAddSuccess,\r\n staticResourceSuccess,\r\n updateStaticResourceRequest,\r\n updateStaticResourceSuccess,\r\n} from '../../redux/staticResource/staticResourceAction';\r\nimport moment from 'moment';\r\nimport { t } from 'react-multi-lang';\r\nimport _ from 'lodash';\r\nimport { isSuperAdmin } from '../../Components/common/utils';\r\nimport {\r\n renderReactSelectInputField,\r\n renderTextField,\r\n renderImageField,\r\n} from '../../Components/common/renderInputField';\r\nimport {\r\n DISPLAY_DATE_FORMAT,\r\n FORECAST_LEAD_TIME_LIST,\r\n DATA_SOURCES,\r\n} from '../../Components/constants';\r\n\r\nconst validate = (values) => {\r\n const errors = {};\r\n if (!values.country) {\r\n errors.country = 'Required';\r\n } else {\r\n if (values.country.value === 'select') {\r\n errors.country = 'Required';\r\n }\r\n }\r\n if (!values.region) {\r\n errors.region = 'Required';\r\n } else {\r\n if (values.region.value === 'select') {\r\n errors.region = 'Required';\r\n }\r\n }\r\n if (!values.forecast_category) {\r\n errors.forecast_category = 'Required';\r\n }\r\n if (!values.datasource_type) {\r\n errors.datasource_type = 'Required';\r\n }\r\n if (values.datasource_type?.id === DATA_SOURCES.IRI.id) {\r\n if (!values.forecast_lead_time) {\r\n errors.datasource_type = 'Required';\r\n }\r\n if (!values.forecast_year_month) {\r\n errors.datasource_type = 'Required';\r\n }\r\n }\r\n if (!values.parameter_type) {\r\n errors.parameter_type = 'Required';\r\n }\r\n if (!values.Upload) {\r\n errors.Upload = 'Required';\r\n }\r\n if (!values.start_date) {\r\n errors.start_date = 'Required';\r\n }\r\n if (!values.end_date) {\r\n errors.end_date = 'Required';\r\n }\r\n if (values.start_date && values.end_date && values.start_date >= values.end_date) {\r\n errors.start_date = 'start date must be less than end date';\r\n }\r\n return errors;\r\n};\r\n\r\nconst Filter = (props) => {\r\n const {\r\n invalid,\r\n descriptionHandler,\r\n handleSubmit,\r\n pristine,\r\n reset,\r\n submitting,\r\n editClicked,\r\n regionList,\r\n handleRegion,\r\n countryList,\r\n handleCountry,\r\n dataSources,\r\n handleCategoryData,\r\n dataSourceList,\r\n handleSelectedDataSource,\r\n handlePreSelectedDataSource,\r\n parameterList,\r\n handleParameter,\r\n startDateHandler,\r\n endDateHandler,\r\n linkHandler,\r\n fileHandler,\r\n handleSelectedTab,\r\n handleUpdatedListData,\r\n handleResetInitialValues,\r\n handleDataSourcesEmptyListChange,\r\n updatedPermissions,\r\n setStaticResourcesList,\r\n isPristine,\r\n handleFilter,\r\n isIRISelected,\r\n forecastYearMonthHandler,\r\n forecastLeadTimeHandler,\r\n handleResetIRIFields,\r\n } = props;\r\n const req_data = {\r\n region: '',\r\n country: '',\r\n forecast_data_source: '',\r\n parameter: '',\r\n start_date: '',\r\n end_date: '',\r\n forecast_year_month: '',\r\n source_link: '',\r\n description: '',\r\n upload_image: '',\r\n };\r\n const filter_req_data = {\r\n region_id: '',\r\n country_id: '',\r\n forecast_data_source_id: [],\r\n parameter_id: [],\r\n start_date: null,\r\n end_date: null,\r\n limit: 0,\r\n };\r\n\r\n const dispatch = useDispatch();\r\n const [forecastLeadTimeList, setForecastLeadTimeList] = useState([]);\r\n const [isImgaeUploaded, setIsImgaeUploaded] = useState(false);\r\n const [formData, setFormData] = useState(req_data);\r\n const [countryFieldDisabled, setCountryFieldDisabled] = useState(false);\r\n const [regionFieldDisabled, setRegionFieldDisabled] = useState(false);\r\n const [isPreventAddDispatch, setIsPreventAddDispatch] = useState(true);\r\n const [file, setFile] = useState();\r\n let form = new FormData();\r\n const nextProps = useSelector((state) => ({\r\n staticResource: state.staticResource || null,\r\n }));\r\n const {\r\n staticResourceAddData,\r\n isStaticResourceAddRequesting,\r\n deleteStaticResourceData,\r\n updateStaticResourceData,\r\n deleteStaticResourceDataError,\r\n isUpdateStaticResourceRequesting,\r\n } = nextProps.staticResource;\r\n useEffect(() => {\r\n return () => {\r\n dispatch(staticResourceAddSuccess({}));\r\n dispatch(updateStaticResourceSuccess({}));\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (props.initialValues) {\r\n setFormData(props.initialValues);\r\n if (props.initialValues?.region?.id) {\r\n setCountryFieldDisabled(true);\r\n handleRegion(props.initialValues?.region?.id);\r\n } else if (props.initialValues?.country?.id) {\r\n setRegionFieldDisabled(true);\r\n handleCountry(props.initialValues?.country?.id);\r\n }\r\n dataSources?.map((i) => {\r\n if (i.id === props.initialValues?.forecast_category?.id) {\r\n handleCategoryData(i.data);\r\n i.data.map((item) => {\r\n if (item.forecast_data_source_id === props.initialValues?.datasource_type?.id) {\r\n handlePreSelectedDataSource(\r\n item.forecast_data_source.forecast_data_source_with_parameter,\r\n item.forecast_data_source_id,\r\n );\r\n }\r\n });\r\n }\r\n });\r\n if (props.initialValues.Upload) {\r\n fileHandler(props.initialValues.Upload);\r\n }\r\n }\r\n }, [props.initialValues]);\r\n\r\n useEffect(() => {\r\n if (staticResourceAddData) {\r\n const {\r\n data: { result },\r\n } = staticResourceAddData;\r\n if (result) {\r\n handleResetIRIFields(false);\r\n showSuccess(result);\r\n reset();\r\n dispatch(change('FilterForm', 'Upload', ''));\r\n handleSelectedTab();\r\n }\r\n }\r\n }, [staticResourceAddData]);\r\n\r\n useEffect(() => {\r\n if (formData.forecast_year_month) {\r\n let month = formData.forecast_year_month.split('-')[1];\r\n let list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let option_list = list?.splice(parseInt(month), 4);\r\n let latest_list;\r\n if (month >= 9) {\r\n let new_list = JSON.parse(JSON.stringify(FORECAST_LEAD_TIME_LIST));\r\n let new_arr = new_list?.splice(parseInt(0), 4 - option_list.length);\r\n latest_list = option_list.concat(new_arr);\r\n } else {\r\n latest_list = option_list;\r\n }\r\n latest_list?.map((i, index) => {\r\n i.name = i.name + '(' + `${index + 1} Month` + ')';\r\n });\r\n setForecastLeadTimeList(latest_list);\r\n }\r\n }, [formData.forecast_year_month]);\r\n\r\n useEffect(() => {\r\n if (updateStaticResourceData) {\r\n const {\r\n data: { result },\r\n } = updateStaticResourceData;\r\n if (result) {\r\n handleResetIRIFields(false);\r\n showSuccess(result);\r\n handleSelectedTab();\r\n handleResetInitialValues();\r\n setIsImgaeUploaded(false);\r\n // handleFilter(filter_req_data);\r\n props.setEditClicked(false)\r\n }\r\n }\r\n }, [updateStaticResourceData]);\r\n\r\n useEffect(() => {\r\n if (deleteStaticResourceDataError) {\r\n handleResetInitialValues();\r\n }\r\n }, [deleteStaticResourceDataError]);\r\n\r\n useEffect(() => {\r\n if (deleteStaticResourceData) {\r\n const {\r\n data: { result },\r\n } = deleteStaticResourceData;\r\n if (result) {\r\n showSuccess(result);\r\n handleUpdatedListData();\r\n }\r\n }\r\n }, [deleteStaticResourceData]);\r\n\r\n const renderAPIParameterOptions = (list, action_name) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n if (\r\n action_name !== 'forecast_lead_time' &&\r\n action_name !== 'parameter_type' &&\r\n action_name !== 'datasource_type' &&\r\n action_name !== 'forecast_category'\r\n ) {\r\n let default_option = { value: 'select', label: 'select', id: 'select' };\r\n options.push(default_option);\r\n }\r\n params.map((param) => {\r\n let data = {\r\n value: param.name,\r\n label: `${param.name}`,\r\n id: param.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const handleCountryChange = (e) => {\r\n if (e.value === 'select') {\r\n formData.region = '';\r\n setFormData({ ...formData });\r\n setRegionFieldDisabled(false);\r\n handleRegion(e.id);\r\n } else {\r\n setRegionFieldDisabled(true);\r\n formData.country = e.id;\r\n setFormData({ ...formData });\r\n handleCountry(e.id);\r\n }\r\n handleCategoryData();\r\n handleDataSourcesEmptyListChange();\r\n handleSelectedDataSource([]);\r\n dispatch(change('FilterForm', 'forecast_category', ''));\r\n dispatch(change('FilterForm', 'datasource_type', ''));\r\n dispatch(change('FilterForm', 'parameter_type', ''));\r\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\r\n };\r\n const handleRegionChange = (e) => {\r\n if (e.value === 'select') {\r\n formData.region = '';\r\n setFormData({ ...formData });\r\n setCountryFieldDisabled(false);\r\n handleDataSourcesEmptyListChange();\r\n dispatch(change('FilterForm', 'forecast_category', ''));\r\n dispatch(change('FilterForm', 'datasource_type', ''));\r\n dispatch(change('FilterForm', 'parameter_type', ''));\r\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\r\n handleCategoryData();\r\n handleSelectedDataSource([]);\r\n handleRegion(e.id);\r\n } else {\r\n setCountryFieldDisabled(true);\r\n formData.region = e.id;\r\n setFormData({ ...formData });\r\n handleRegion(e.id);\r\n }\r\n };\r\n const handleCategoryChange = (e) => {\r\n if (e.value === 'select') {\r\n handleCategoryData();\r\n formData.forecast_data_source_id = '';\r\n setFormData({ ...formData });\r\n } else {\r\n formData.forecast_data_source_id = e.id;\r\n setFormData({ ...formData });\r\n dataSources.map((i) => {\r\n if (i.id === e.id) {\r\n handleCategoryData(i.data);\r\n }\r\n });\r\n }\r\n formData.datasource_type = '';\r\n formData.parameter = '';\r\n formData.forecast_lead_time = '';\r\n setFormData({ ...formData });\r\n handleSelectedDataSource([], e.id);\r\n dispatch(change('FilterForm', 'datasource_type', ''));\r\n dispatch(change('FilterForm', 'parameter_type', ''));\r\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\r\n };\r\n const ref = useRef();\r\n\r\n const resetImage = () => {\r\n if (ref?.current?.value) {\r\n ref.current.value = '';\r\n }\r\n };\r\n const handleDataSourceChange = (e) => {\r\n if (e.value === 'select') {\r\n handleSelectedDataSource([], e.id);\r\n formData.forecast_data_source_id = '';\r\n setFormData({ ...formData });\r\n } else {\r\n formData.forecast_data_source_id = e.id;\r\n setFormData({ ...formData });\r\n let parameter_list = [];\r\n dataSources?.map((i) => {\r\n i.data.map((d) => {\r\n if (d.forecast_data_source_id === e.id) {\r\n d.forecast_data_source.forecast_data_source_with_parameter.map((i) => {\r\n i.parameter.map((data) => {\r\n parameter_list.push(data);\r\n });\r\n });\r\n handleSelectedDataSource(parameter_list, e.id);\r\n }\r\n });\r\n });\r\n }\r\n dispatch(change('FilterForm', 'parameter_type', ''));\r\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\r\n dispatch(change('FilterForm', 'forecast_year_month', ''));\r\n dispatch(change('FilterForm', 'start_date', ''));\r\n dispatch(change('FilterForm', 'end_date', ''));\r\n dispatch(change('FilterForm', 'Link', ''));\r\n dispatch(change('FilterForm', 'Description', ''));\r\n dispatch(change('FilterForm', 'Upload', ''));\r\n setFile(null);\r\n setIsImgaeUploaded(false);\r\n props.setFile(null);\r\n };\r\n const handleforecastYearMonth = (e) => {\r\n const val = e.target.value;\r\n if (!val) return false;\r\n\r\n if (parseInt(val.split('-')[0]) > new Date().getFullYear()) {\r\n dispatch(change('FilterForm', 'forecast_year_month', null));\r\n const ele = document.getElementsByName('forecast_year_month');\r\n if (ele[0]) ele[0].value = null;\r\n return false;\r\n }\r\n formData.forecast_lead_time = null;\r\n dispatch(change('FilterForm', 'forecast_lead_time', ''));\r\n formData.forecast_year_month = val;\r\n setFormData({ ...formData });\r\n forecastYearMonthHandler(val);\r\n };\r\n\r\n const handleForecastLeadTimeChange = (e) => {\r\n formData.forecast_lead_time = e;\r\n setFormData({ ...formData });\r\n forecastLeadTimeHandler(e);\r\n };\r\n const handleParameterChange = (e) => {\r\n //once parameter changes then we need to reset all the values that are filled on the basis of previously selected parameter\r\n\r\n formData.parameter = e.id;\r\n setFormData({ ...formData });\r\n handleParameter(e.id);\r\n };\r\n\r\n const handleStartDate = (e) => {\r\n formData.start_date = e.target.value;\r\n setFormData({ ...formData });\r\n startDateHandler(moment(e.target.value).format(DISPLAY_DATE_FORMAT));\r\n };\r\n\r\n const handleEndDate = (e) => {\r\n formData.end_date = e.target.value;\r\n setFormData({ ...formData });\r\n endDateHandler(moment(e.target.value).format(DISPLAY_DATE_FORMAT));\r\n };\r\n\r\n const handleLink = (e) => {\r\n if (e.target.value === '') {\r\n formData.source_link = '';\r\n } else {\r\n formData.source_link = e.target.value;\r\n }\r\n setFormData({ ...formData });\r\n linkHandler(e.target.value);\r\n };\r\n\r\n const handleDescription = (e) => {\r\n if (e.target.value === '') {\r\n formData.description = '';\r\n } else {\r\n formData.description = e.target.value;\r\n }\r\n setFormData({ ...formData });\r\n descriptionHandler(e.target.value);\r\n };\r\n\r\n const handleFileChange = (e) => {\r\n if (e.target.value) {\r\n fileHandler(URL.createObjectURL(e?.target?.files[0]), e);\r\n setFile(e?.target?.files[0]);\r\n setIsImgaeUploaded(true);\r\n }\r\n };\r\n\r\n const onFormSubmit = (e) => {\r\n if (isIRISelected) {\r\n if (!formData.country) {\r\n form.append('country', '');\r\n } else {\r\n form.append('country', formData.country);\r\n }\r\n form.append('forecast_time_year', formData?.forecast_year_month?.split('-')[0]);\r\n form.append('forecast_time_month', formData?.forecast_year_month?.split('-')[1]);\r\n form.append(\r\n 'forecast_lead_time',\r\n parseInt(\r\n formData?.forecast_lead_time?.label?.substr(\r\n formData?.forecast_lead_time?.label?.indexOf('(') + 1,\r\n formData?.forecast_lead_time?.label?.indexOf(')') -\r\n formData?.forecast_lead_time?.label?.indexOf('(') -\r\n 1,\r\n ),\r\n ),\r\n );\r\n form.append('parameter', formData?.parameter);\r\n form.append('upload_image', file);\r\n form.append('forecast_data_source', formData.forecast_data_source_id);\r\n if (!formData.source_link) {\r\n form.append('source_link', '');\r\n } else {\r\n form.append('source_link', formData.source_link);\r\n }\r\n if (!formData.description) {\r\n form.append('description', '');\r\n } else {\r\n form.append('description', formData.description);\r\n }\r\n } else {\r\n form.append('upload_image', file);\r\n if (!formData.country) {\r\n form.append('country', '');\r\n } else {\r\n form.append('country', formData.country);\r\n }\r\n form.append('forecast_data_source', formData.forecast_data_source_id);\r\n form.append('parameter', formData.parameter);\r\n form.append('start_date', formData.start_date);\r\n form.append('end_date', formData.end_date);\r\n if (!formData.source_link) {\r\n form.append('source_link', '');\r\n } else {\r\n form.append('source_link', formData.source_link);\r\n }\r\n if (!formData.description) {\r\n form.append('description', '');\r\n } else {\r\n form.append('description', formData.description);\r\n }\r\n }\r\n if (isPreventAddDispatch) {\r\n setStaticResourcesList([]);\r\n dispatch(staticResourceSuccess({}));\r\n dispatch(staticResourceAddSuccess({}));\r\n dispatch(staticResourceAddRequest(form));\r\n }\r\n setIsPreventAddDispatch(true);\r\n };\r\n\r\n const updateStaticResource = () => {\r\n if (isIRISelected) {\r\n form.append('forecast_time_year', formData?.forecast_year_month?.split('-')[0]);\r\n form.append('forecast_time_month', formData?.forecast_year_month?.split('-')[1]);\r\n if (formData?.forecast_lead_time) {\r\n form.append(\r\n 'forecast_lead_time',\r\n formData?.forecast_lead_time?.id - parseInt(formData?.forecast_year_month?.split('-')[1]),\r\n );\r\n }\r\n\r\n if (formData?.parameter) {\r\n form.append('parameter', formData.parameter);\r\n }\r\n form.append('static_resource_id', formData.static_resource_id);\r\n if (formData?.forecast_data_source_id) {\r\n form.append('forecast_data_source', formData.forecast_data_source_id);\r\n } else {\r\n form.append('forecast_data_source', formData?.datasource_type?.id);\r\n }\r\n if (!formData.source_link) {\r\n form.append('source_link', '');\r\n } else {\r\n form.append('source_link', formData.source_link);\r\n }\r\n if (!formData.description) {\r\n form.append('description', '');\r\n } else {\r\n form.append('description', formData.description);\r\n }\r\n } else {\r\n if (file) {\r\n form.append('upload_image', file);\r\n }\r\n\r\n if (!formData.country) {\r\n form.append('country', '');\r\n } else {\r\n form.append('country', getCountryValue(formData.country));\r\n }\r\n if (formData.forecast_data_source_id) {\r\n form.append('forecast_data_source', formData.forecast_data_source_id);\r\n } else {\r\n form.append('forecast_data_source', formData?.datasource_type?.id);\r\n }\r\n if (formData?.parameter) {\r\n form.append('parameter', formData.parameter);\r\n } else {\r\n form.append('parameter', props?.initialValues?.parameter_type?.id);\r\n }\r\n form.append('start_date', formData.start_date);\r\n form.append('end_date', formData.end_date);\r\n form.append('static_resource_id', formData.static_resource_id);\r\n if (!formData.source_link) {\r\n form.append('source_link', '');\r\n } else {\r\n form.append('source_link', formData.source_link);\r\n }\r\n if (!formData.description) {\r\n form.append('description', '');\r\n } else {\r\n form.append('description', formData.description);\r\n }\r\n }\r\n if (isImgaeUploaded) {\r\n form.append('image', file);\r\n }\r\n setIsPreventAddDispatch(false);\r\n setStaticResourcesList([]);\r\n dispatch(staticResourceSuccess({}));\r\n dispatch(updateStaticResourceSuccess({}));\r\n dispatch(updateStaticResourceRequest(form));\r\n };\r\n\r\n const getCountryValue = (value) => {\r\n if (typeof value === 'string') {\r\n return value;\r\n }\r\n return !value?.id ? '' : value?.id;\r\n //typeof formData.country === \"string\" ? formData.country : (!formData.country?.id ? \"\" :formData.country?.id )\r\n };\r\n const getCurrentYearMonth = () => {\r\n let dateObj = new Date();\r\n let month =\r\n (dateObj.getMonth() + 1) % 10 !== dateObj.getMonth() + 1\r\n ? dateObj.getMonth() + 1\r\n : `0${dateObj.getMonth() + 1}`;\r\n return dateObj.getUTCFullYear() + '-' + month;\r\n };\r\n return (\r\n <>\r\n \r\n
\r\n {t('FILTER.FILTER')}
\r\n\r\n {\r\n handleClose();\r\n closeRightBar();\r\n }}\r\n />\r\n
\r\n setIsDataSourceOpen(!isDataSourceOpen)}>\r\n
\r\n \r\n \r\n
\r\n {t('FILTER.DATA_SOURCE')}
\r\n\r\n
\r\n \r\n {!countryFieldDisabled ? (\r\n handleCountryChange(e)}\r\n required={true}\r\n isMulti={false}\r\n options={renderAPIParameterOptions(countryList)}\r\n >\r\n ) : (\r\n ''\r\n )}\r\n handleCategoryChange(e)}\r\n required={true}\r\n isMulti={false}\r\n options={renderAPIParameterOptions(dataSources, 'forecast_category')}\r\n id=\"forecast_category\"\r\n >\r\n
\r\n \r\n \r\n \r\n \r\n handleDataSourceChange(e)}\r\n required={true}\r\n isMulti={false}\r\n options={renderAPIParameterOptions(dataSourceList, 'datasource_type')}\r\n id=\"datasource_type\"\r\n >\r\n {!_.isEmpty(parameterList) && (\r\n handleParameterChange(e)}\r\n required={true}\r\n isMulti={false}\r\n options={renderAPIParameterOptions(parameterList, 'parameter_type')}\r\n id=\"parameter_type\"\r\n >\r\n )}\r\n
\r\n {isIRISelected ? (\r\n <>\r\n \r\n handleforecastYearMonth(e)}\r\n isMulti={false}\r\n >\r\n handleForecastLeadTimeChange(e)}\r\n required={true}\r\n isMulti={false}\r\n options={renderAPIParameterOptions(\r\n forecastLeadTimeList,\r\n 'forecast_lead_time',\r\n )}\r\n id=\"forecast_category\"\r\n >\r\n
\r\n \r\n ) : (\r\n \r\n \r\n handleStartDate(e)}\r\n isMulti={false}\r\n >\r\n handleEndDate(e)}\r\n required={true}\r\n isMulti={false}\r\n >\r\n
\r\n )}\r\n \r\n \r\n handleLink(e)}\r\n required={false}\r\n isMulti={false}\r\n placeholder=\"Add a Link\"\r\n >\r\n handleDescription(e)}\r\n required={false}\r\n isMulti={false}\r\n placeholder=\"Add Description\"\r\n >\r\n handleFileChange(e)}\r\n required={true}\r\n isMulti={false}\r\n className=\"filter-select-placeholder\"\r\n placeholder=\"Upload image\"\r\n >\r\n
\r\n \r\n {!editClicked ? (\r\n \r\n {t('STATIC_RESOURCE_ADMIN.PUBLISH')}\r\n \r\n ) : (\r\n \r\n {t('STATIC_RESOURCE_ADMIN.UPDATE')}\r\n \r\n )}\r\n
\r\n \r\n {toggleRightBar && (\r\n
\r\n \r\n {confirmationModalOpen && (\r\n \r\n \r\n {!isHideBar && (\r\n
\r\n \r\n {!isHideBar ? (\r\n
\r\n\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {t('FILTER.HIDE_BAR')}\r\n \r\n setHideBar(!isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n {t('FILTER.EXPAND_BAR')}\r\n \r\n setHideBar(!isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n handleManageCropsBackButton()}\r\n />\r\n \r\n \r\n {\r\n setToggleRightBar(!toggleRightBar);\r\n }}\r\n className=\"filter-icon-text col-lg-6\"\r\n >\r\n 
\r\n
\r\n\r\n {t('FILTER.MANAGE_DATA')}
\r\n \r\n {activeTab === '2' ? (\r\n{t('FILTER.FILTER')}
\r\n \r\n ) : (\r\n ''\r\n )}\r\n\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n {file ? (\r\n (file.substr(file.lastIndexOf('.') + 1) !== \"tiff\") ?\r\n (imageExtension !== \"tiff\") ?\r\n 
\r\n :\r\n 
\r\n :\r\n \r\n ) : (\r\n
\r\n \r\n No data available
\r\n )}\r\n\r\n Loading ... }\r\n >\r\n {staticResourceList?.map((i,index) => {\r\n return (\r\n \r\n {i?.upload_image?.substr(i?.upload_image.lastIndexOf('.') + 1) !== \"tiff\" ?\r\n (\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n {isStaticResourceRequesting &&
\r\n {noRecordsFound && (\r\n \r\n
\r\n )}\r\n No Records Found.
\r\n\r\n
\r\n \r\n {i.description}\r\n
\r\n\r\n {t('FILTER.SOURCE')}: {i.forecast_data_source_name} |{' '}\r\n {t('FILTER.PARAMETER')}: {i.parameter_name}\r\n
\r\n {\r\n (i?.forecast_data_source_id === DATA_SOURCES.IRI.id) ?\r\n <>\r\n\r\n {t('FILTER.FORECAST_DATE')} : {' '}\r\n {moment(i?.forecast_time_year+'-'+i?.forecast_time_month).format('YYYY-MM')}\r\n
\r\n\r\n {t('FILTER.FORECAST_LEAD_TIME')} : {' '}\r\n {handlePreForecastLeadTime(i?.forecast_lead_time,i?.forecast_time_month)}\r\n
\r\n \r\n :\r\n\r\n {t('FILTER.DATE_RANGE')} :{' '}\r\n {moment(i.start_date).format(DISPLAY_DATE_FORMAT)} |{' '}\r\n {moment(i.end_date).format(DISPLAY_DATE_FORMAT)}\r\n
\r\n }\r\n {i.source_link ? (\r\n\r\n {' '}\r\n {t('FILTER.LINK')}:{' '}\r\n \r\n {i.source_link.length > 45\r\n ? i.source_link.substring(0, 45) + '...'\r\n : i.source_link}\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n\r\n {i.forecast_data_source_name !== 'ERPAS (Static)' && (\r\n\r\n handleEditDataSource(i)}\r\n disabled={\r\n isSuperAdmin() ||\r\n updatedPermissions?.includes('change_static_resource')\r\n ? false\r\n : true\r\n }\r\n >\r\n {t('FILTER.EDIT')}\r\n \r\n handleDeleteDataSource(i.id)}\r\n disabled={\r\n isSuperAdmin() ||\r\n updatedPermissions?.includes('delete_static_resource')\r\n ? false\r\n : true\r\n }\r\n >\r\n {t('FILTER.DELETE')}\r\n \r\n
\r\n )}\r\n \r\n
\r\n \r\n
\r\n
\r\n
\r\n {t('ABOUT_US.TERMS_AND_CONDITIONS')}
\r\n{t('ABOUT_US.TERMS_AND_CONDITIONS_ONE')}
\r\n{t('ABOUT_US.TERMS_AND_CONDITIONS_TWO')}
\r\n\r\n
{t('ABOUT_US.SADMS_INFO_COLLECTION')}
\r\n\r\n
{t('ABOUT_US.PERSONAL_INFO')}
\r\n{t('ABOUT_US.PERSONAL_INFO_DESC')}
\r\n{t('ABOUT_US.USE_OF_COOKIES')}
\r\n{t('ABOUT_US.USE_OF_COOKIES_DESC_ONE')}
\r\n{t('ABOUT_US.USE_OF_COOKIES_DESC_TWO')}
\r\n{t('ABOUT_US.IP_ADDRESSES')}
\r\n{t('ABOUT_US.IP_ADDRESSES_DESC')}
\r\n{t('ABOUT_US.THIRD_PARTY_SITES')}
\r\n{t('ABOUT_US.THIRD_PARTY_SITES_DESC')}
\r\n{t('ABOUT_US.HOW_TO_CONTACT_US')}
\r\n{t('ABOUT_US.HOW_TO_CONTACT_US_DESC')}
\r\n{t('ABOUT_US.CHANGES')}
\r\n{t('ABOUT_US.CHANGES_DESC')}
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default TermsConditions;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { t } from 'react-multi-lang';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { Field, reduxForm, reset } from 'redux-form';\r\nimport { Card, Container, Col, FormGroup, Label, Row } from 'reactstrap';\r\nimport { renderTextField } from '../../Components/common/renderInputField';\r\nimport { isSuperAdmin, isStaffUser,isLogedIn } from '../../Components/common/utils';\r\nimport {\r\n forgotPassword,\r\n resetPassword,\r\n forgotPasswordSuccess,\r\n resetPasswordSuccess,\r\n changePassword,\r\n changePasswordSuccess,\r\n resetLinkVerificationRequest,\r\n resetLinkVerificationSuccess,\r\n} from '../../redux/login/loginActions';\r\nimport { showSuccess } from '../../Components/Notifications';\r\nimport SuccessModal from './Success';\r\nimport { isValidEmail } from '../../Components/common/utils';\r\n\r\nconst validate = values => {\r\n const errors = {};\r\n if (values.email && !values.email) {\r\n errors.email = 'This field is required.';\r\n } else if (values.email && !isValidEmail(values.email.trim())) {\r\n errors.email = 'Email is not valid.';\r\n } else if (!values.new_password) {\r\n errors.new_password = 'This field is required.';\r\n } else if (!values.confirm_password) {\r\n errors.confirm_password = 'This field is required.';\r\n } else if (values.old_password && !values.old_password) {\r\n errors.old_password = 'This field is required.';\r\n } else if (values.new_password && values.new_password.length < 8) {\r\n errors.new_password = 'Password must be atleast 8 characters.';\r\n } else if (values.confirm_password) {\r\n if (values.confirm_password.length < 8) {\r\n errors.confirm_password = 'Password must be atleast 8 characters.';\r\n } else if (values.confirm_password !== values.new_password) {\r\n errors.confirm_password = 'New Password and Confirm Password must be same.';\r\n }\r\n }\r\n return errors;\r\n};\r\n\r\nconst ResetPassword = props => {\r\n const { handleSubmit, pristine, submitting, invalid } = props;\r\n const nextProps = useSelector(state => ({\r\n isForgotPasswordRequesting: state.Login.isForgotPasswordRequesting,\r\n isResetPasswordRequesting: state.Login.isResetPasswordRequesting,\r\n isChangePasswordRequesting: state.Login.isChangePasswordRequesting,\r\n forgotPasswordData: state.Login.forgotPasswordData,\r\n resetPasswordData: state.Login.resetPasswordData,\r\n changePasswordData: state.Login.changePasswordData,\r\n resetLinkVerificationData: state.Login.resetLinkVerificationData || null,\r\n resetLinkVerificationError: state.Login.resetLinkVerificationError,\r\n resetLinkVerificationNetworkError: state.Login.resetLinkVerificationNetworkError,\r\n changePasswordError: state.Login.changePasswordError,\r\n }));\r\n\r\n let req_data = {\r\n email: '',\r\n };\r\n const [formData, setFormData] = useState(req_data);\r\n const [successModal, setSuccessModal] = useState(false);\r\n const [expiredLink, setExpiredLink] = useState(true);\r\n const [modalMessage, setModalMessage] = useState();\r\n const [uniqueCode, setUniqueCode] = useState();\r\n const [passwordTypes, setPasswordTypes] = useState({\r\n old_password: true,\r\n new_password: true,\r\n confirm_password: true,\r\n });\r\n\r\n let history = useHistory();\r\n let hasChangePassword = window.location.href.includes('change-password');\r\n const dispatch = useDispatch();\r\n\r\n useEffect(() => {\r\n if (hasChangePassword && !(isSuperAdmin() || isStaffUser() || isLogedIn())) {\r\n history.push('/home');\r\n }\r\n let params = new URLSearchParams(window.location.search);\r\n let keyValue;\r\n keyValue = params.get('key');\r\n if (window.location.href.includes('key')) {\r\n setUniqueCode(keyValue);\r\n dispatch(resetLinkVerificationRequest({ id: keyValue }));\r\n }\r\n }, []);\r\n\r\n\r\n useEffect(() => {\r\n if (nextProps.resetLinkVerificationData) {\r\n const {\r\n data: { result },\r\n } = nextProps.resetLinkVerificationData;\r\n if (result) {\r\n setExpiredLink(false);\r\n }\r\n }\r\n }, [nextProps.resetLinkVerificationData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.resetLinkVerificationError) {\r\n const {\r\n data: { response },\r\n } = nextProps.resetLinkVerificationError;\r\n if (response?.data?.message) {\r\n setExpiredLink(true);\r\n }\r\n }\r\n }, [nextProps.resetLinkVerificationError]);\r\n\r\n useEffect(() => {\r\n if (nextProps.resetPasswordData) {\r\n const {\r\n data: { result },\r\n } = nextProps.resetPasswordData;\r\n if (result) {\r\n showSuccess(result);\r\n history.push('/login');\r\n }\r\n }\r\n }, [nextProps.resetPasswordData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.forgotPasswordData) {\r\n const {\r\n data: { result },\r\n } = nextProps.forgotPasswordData;\r\n if (result) {\r\n setSuccessModal(true);\r\n setModalMessage(result);\r\n }\r\n }\r\n }, [nextProps.forgotPasswordData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.changePasswordData) {\r\n const {\r\n data: { result },\r\n } = nextProps.changePasswordData;\r\n if (result) {\r\n showSuccess(result);\r\n history.push('/login');\r\n }\r\n }\r\n }, [nextProps.changePasswordData]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(forgotPasswordSuccess({}));\r\n dispatch(resetPasswordSuccess({}));\r\n dispatch(changePasswordSuccess({}));\r\n dispatch(resetLinkVerificationSuccess({}));\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (nextProps.changePasswordError) {\r\n dispatch(reset('reset-password-form'));\r\n }\r\n }, [nextProps.changePasswordError]);\r\n\r\n const onFormSubmit = () => {\r\n if (uniqueCode) {\r\n delete formData.email;\r\n formData.unique_code = uniqueCode;\r\n dispatch(resetPassword(formData));\r\n } else if (hasChangePassword) {\r\n delete formData.email;\r\n dispatch(changePassword(formData));\r\n } else {\r\n dispatch(forgotPassword(formData));\r\n }\r\n };\r\n\r\n const handleEmailChange = e => {\r\n formData.email = e.target.value;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleOkayButtonClick = () => {\r\n setSuccessModal(false);\r\n history.push('/home');\r\n };\r\n\r\n const handleNewPasswordChange = e => {\r\n formData.new_password = e.target.value;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const showOldPassword = () => {\r\n passwordTypes.old_password = !passwordTypes.old_password;\r\n setPasswordTypes({ ...passwordTypes });\r\n };\r\n const showNewPassword = () => {\r\n passwordTypes.new_password = !passwordTypes.new_password;\r\n setPasswordTypes({ ...passwordTypes });\r\n };\r\n\r\n const showConfirmPassword = () => {\r\n passwordTypes.confirm_password = !passwordTypes.confirm_password;\r\n setPasswordTypes({ ...passwordTypes });\r\n };\r\n\r\n const handleConfirmPasswordChange = e => {\r\n formData.confirm_password = e.target.value;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleOldPasswordChange = e => {\r\n formData.old_password = e.target.value;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleResetDescription = () => {\r\n if (!uniqueCode && !hasChangePassword) {\r\n return {t('LOGIN.RESET_DESC_ONE')}
;\r\n } else {\r\n if (!expiredLink) {\r\n return{t('REGISTER.PASSWORD_ERROR_MSG')}
;\r\n }\r\n }\r\n };\r\n\r\n const handleInputFields = () => {\r\n if (!uniqueCode && !hasChangePassword) {\r\n return (\r\n <>\r\n\r\n \r\n \r\n handleNewPasswordChange(e)}\r\n >\r\n\r\n \r\n {passwordTypes.new_password ? t('LOGIN.SHOW') : t('LOGIN.HIDE')}\r\n \r\n \r\n\r\n \r\n \r\n handleConfirmPasswordChange(e)}\r\n >\r\n \r\n {passwordTypes.confirm_password ? t('LOGIN.SHOW') : t('LOGIN.HIDE')}\r\n \r\n \r\n
\r\n \r\n );\r\n }\r\n };\r\n\r\n\r\n const handleSendResetButtons = () => {\r\n if (!uniqueCode && !hasChangePassword) {\r\n return (<>\r\n \r\n
\r\n \r\n );\r\n } else {\r\n return (\r\n \r\n {t('LOGIN.BACK_TO')}{' '}\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default reduxForm({\r\n form: 'reset-password-form',\r\n validate,\r\n})(ResetPassword);\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARJSURBVHgB7ZhNcuJWEIC7JTFjM3YVOUGYRapsb4xvYJ/AuLDXg08Qe5dMSAIV8rMzOYHJevCEnMDkBFYWMexCbkDVGOwMkjrdDHJJQjKSkGoWo6+KP/F+ut/r1z8PICMjIyPjUwZhRbaOa/sIeIhklQGx+OEp6YCKbk2njUH3lyGkSGwFiuWzwgtt83sCOoMnJ8DW2HjXGHZbI0iBWAqI8Hlt45q/lsL1IH1ijA/SUEKBGMjKQ2jhBSzN+yROZAW2yl8VvWZDSEML4GBi3H1222kiERwR0dDVhvvIeYGEiayAouZcKynC30/He4NOs2ebSP+q2X1u5va8SiBBGRImsgKI5DYdyzr3s229Wx8R4qmrr4KHkDCRFSCP7fevfu4GtV0zNN3dmYqQMLEOsRPxSEH/yS5AykRXwGPXa9pGoDfartQ8Nk86JEyMHcA/XAMgXvrtgjzjIHbh7gofXwELwW3zbNf53ObNduXr2WqL4OIu8+rmDbudoqvv1GxAwsSKxDuVWot7fhmlD8eGX9m9nkHCxDrEz0ytzh+hzYGDmH5v3tUhBWInc6VyvfBeNerLdkJWXoT3ixUS1RVN+8fV3lor9t/W/oWQaBCTuYs8YyFaqKp1RNwFO0awpyI+7MTnZXDV7AWNgaq26MFwvMfv6StgM8/3qxADRL+EUN3nty6EZOWCJiw7J99egmn+ObEmM+HYS11wWlLmyL4YCBHbUgw9wMMon8uXkdTdvzs/nPuNG0uBL05el54R7hMqu2y0JT6lBTahgi2MZRgvnZXYzsnrKpBy6Zh05Cu4W7DZmXlsZ1mnt29/avu0C4ddOipA1acm5/96/U7z4LGfHFQ1d+2NCTEYcbr+0usMlrpREXz7uHbNDa+Rc/plK8cquCI1amo5SPgwdYSDwrr2oup9GHiIedtLRMoFb9E+RIC9jys+PDdy7almHJJnHLuOcK6o1BHsnnv/qdMbfLwgsMeF3r0xbnvn8zWhrcp3rxS02hCM2LA+W23CIZma/gCj0VM173blmzYL9epRIDKPglJx2XXZcYeU3ds3zSO/tgs7IDarotUin8ayCvxqPBh3etQCnYUfOn8vqyPea4Zz4r+C2i4oICUjh36XnduCS9kICSFJX9AiSJDcOa5BGBYUkJLRufqszHm/82MLVgVhFxwDz+uInl/ThTqC8HMIHNYDa+6yHvEOsAKy0uvaxu8LzoBNajJ9t+fdhdmdk08q/uEQ3x1FdqOrsq5tVn09WYQ6QpAx/Nzo0h2IijeQzbJWzZCMswArIG6XpuaB96418R2QlRJPZv+WA2mh5cxjRvPXMlxtyCTfi+JUTEjJuS+/Bm84h+G6ANA6lXSAcyW59PotoPuITagt7SRCs/KnktwNfPIgIXETspEUYZnbDShNG+w46hCSBTe6qteJgpwXnsylAEfoSDcXqXuhpyDT0BefJX93lJGRkZEe/wOUFwQwBgx76wAAAABJRU5ErkJggg==\"","import React, { useEffect, useState } from 'react';\r\nimport { Row, Col, Card, Container } from 'reactstrap';\r\nimport { t } from 'react-multi-lang';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { useSelector, useDispatch } from 'react-redux';\r\nimport SettingIcon from '../assets/Images/dashboard-img.png';\r\nimport ManageStaticIcon from '../assets/Images/dashboard-img1.png';\r\nimport ManageUserIcon from '../assets/Images/dashboard-img2.png';\r\nimport ManagePublicIcon from '../assets/Images/dashboard-img3.png';\r\nimport { isSuperAdmin, isStaffUser } from './common/utils';\r\nimport { userDetailRequest, userPermissionsRequest } from '../redux/user-list/userListAction';\r\nimport Loader from '../Components/common/loader';\r\nconst SettingsDashboard = () => {\r\n const cardsInfo = [\r\n {\r\n title: 'Manage Static Data',\r\n icon: ManageStaticIcon,\r\n path: '/manageStaticData',\r\n group_name: 'Manage Static Resource',\r\n },\r\n {\r\n title: 'Manage Public API',\r\n icon: ManagePublicIcon,\r\n path: '/public-api-admin',\r\n group_name: 'Manage Public API Access Key',\r\n },\r\n {\r\n title: 'Manage User',\r\n icon: ManageUserIcon,\r\n path: '/manage-user-list',\r\n group_name: 'Manage Users',\r\n },\r\n // {\r\n // title: 'Manage Crops',\r\n // icon: ManageUserIcon,\r\n // path: '/ManageCrops',\r\n // group_name: 'Manage Crops',\r\n // },\r\n {\r\n title: 'Manage Newsfeed',\r\n icon: ManageUserIcon,\r\n path: '/manage-newsfeed',\r\n group_name: 'News Feed',\r\n },\r\n {\r\n title: 'Manage User Guide',\r\n icon: ManageUserIcon,\r\n path: '/manage-userguide',\r\n group_name: 'User Guide',\r\n },\r\n // {\r\n // title: 'Manage Template',\r\n // icon: ManageUserIcon,\r\n // path: '/bulletin',\r\n // group_name: 'Manage Template',\r\n // },\r\n {\r\n title: 'Manage Bulletin',\r\n icon: ManageUserIcon,\r\n path: '/back-office-bulletin/:currentTab',\r\n group_name: 'Manage Bulletin',\r\n },\r\n ];\r\n const history = useHistory();\r\n const dispatch = useDispatch();\r\n const [cardList, setCardList] = useState([]);\r\n const [userPermissions, setUserPermissions] = useState(); // individual user permissions\r\n const [cardsInformation, setCardsInformation] = useState();\r\n const nextProps = useSelector(state => ({\r\n userDetailData: state.userList.userDetailData || null,\r\n userPermissionsData: state.userList.userPermissionsData || null,\r\n isUserPermissionsRequesting: state.userList.isUserPermissionsRequesting,\r\n }));\r\n useEffect(() => {\r\n if (!isSuperAdmin()) {\r\n if (!isStaffUser()) {\r\n history.push('/home');\r\n }\r\n }\r\n dispatch(userDetailRequest());\r\n dispatch(userPermissionsRequest());\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (nextProps.userPermissionsData) {\r\n const {\r\n data: { result },\r\n } = nextProps.userPermissionsData;\r\n if (result) {\r\n cardsInfo.map(i => {\r\n let b = [];\r\n result.map(data => {\r\n if (i.group_name === data.group_name) {\r\n b.push(data.code_name);\r\n }\r\n i.code_name_list = b;\r\n });\r\n });\r\n setCardsInformation(cardsInfo);\r\n }\r\n }\r\n }, [nextProps.userPermissionsData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.userDetailData) {\r\n const {\r\n data: { result },\r\n } = nextProps.userDetailData;\r\n if (result?.user_permissions) {\r\n setUserPermissions(result?.user_permissions);\r\n }\r\n }\r\n }, [nextProps.userDetailData]);\r\n\r\n useEffect(() => {\r\n if (cardsInformation?.length && userPermissions) {\r\n handleCards(userPermissions);\r\n }\r\n }, [cardsInformation, userPermissions]);\r\n\r\n const handleCards = list => {\r\n let a = [];\r\n if (list.length) {\r\n cardsInformation?.map(cardInfo => {\r\n list?.map(item => {\r\n if (cardInfo.code_name_list.includes(item.codename)) {\r\n if (!a.includes(cardInfo)) {\r\n a.push(cardInfo);\r\n }\r\n }\r\n });\r\n });\r\n setCardList(a);\r\n } else if (isSuperAdmin()) {\r\n setCardList(cardsInfo);\r\n }\r\n };\r\n\r\n const handleCardClick = i => {\r\n history.push(i.path);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n {!successModal ? (\r\n \r\n
\r\n \r\n \r\n
\r\n ) : (\r\n \r\n {hasChangePassword ? (\r\n
\r\n \r\n {t('LOGIN.RESET_PASSWORD')}
\r\n ) : (\r\n{t('LOGIN.FORGOT_PASSWORD')}
\r\n )}\r\n {handleResetDescription()}\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n {!cardList?.length && nextProps.isUserPermissionsRequesting ? (\r\n handleCardClick(item)}\r\n >\r\n \r\n \r\n \r\n \r\n );\r\n })\r\n )}\r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default SettingsDashboard;\r\n","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALoSURBVHgB7VnBThsxELXNIvVYDj03HCqF5dJjTxX5AwThTPIFtDdUJWVXpFFvNF/AciZF/YNE/YJeGnJrOPfQPVZqYndm2Q3elb0iQLym3SeBPfaMNRPPTDwTQkqUKFGiSNDsgltvHcHiG0HIU2IRQKcQ/gff+8dv5fUVmdist09gOIS/J8Q+oE6vnrmv6c/R12GyyGQOQUSD2I8DmXAym3O3GfU7lFgEcG0RT1Ou7ZAC4O69a5AZfEgX3QDp6vZhhTlOg0+nwfjLx4mKRwdGDCNSTLBTwtipuwNzVGJldQDDEVuNRiWPDsYN4Iq5iGfJyDX8Khg3YHzeDTjlTc55cxy7h5jNajD44k80Knl0SAWqFCg2B3FKN+c2AjbDuAs9NB69AVoXsjkGZJQuVDT+3RiwEL5q8dEYAEnFU61bYcB9XgBlEC+C6u77fay5F5FBfpTT7RszAJVglAcw9RIj8N2/UW8NZD6kkxog5vNQTmeEsRgAJdYl0nP32lC0iErW4YHegkJma7PeOpE7Ixn5m3OJIcRZ5CYVgvJ5/Jm2jq/LQkZjIFYilJZw7vOps47ZB2pi/JR9mUdQMdEpjzBa0Mxr3WuEhPLa6Lz7TcH3EvgwNq5vASozXXFv9AaoYHIg9lTKI+L1XkILxrRZaOlBLN+q/B7GFkqeHO5DqyXKVhjYOu8o7Iss6f/cdT9BYQZs7HSe5+1js4vcAkt3Ifm6IbcPBOZ5AGW/mzB4Ojlwn7nfg8zwst+pKfmIQcwoP5PIgxeYbRTALIQt/oQWPCWXgvG+kLvb/gHpqBKTmO8/QcCeoc9Xtz3okU73M79PhKDLmu68rAG/yAP8sKEzPnnbkMXhwZnKgibrQj2yJCiUD/P4hRATifR0r9iUAdFXtoiMyD38LoA+55VE4ttmDfufcFVDmQ8DFnuil58/JM+KWJ5eqc412vupwjOZMVbJvm3yYg/2PFB+Mr44DlRnWtG8+q9LyhIl7om/7c9FYNLFJ9wAAAAASUVORK5CYII=\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAQRSURBVHgB7ZlPTxNBFMDfm22NMR4wauKxHkygXvCuoXwCSYCz9ROANyMYSxTjwUT4BJajEU39BBT1Ll5aEk2sNxNIrIl/QkpnfG/b3e4u29LuGyQIv6Rhd3Zm3rz59/4AcMIJIjCuMDMxO3QmdXbGAOSoQq5VajZAm+XK68dFOCCSyN2jwPDE3Yxy0muAJgOxLbCmG43xzdKTGlgkqVwVrdezE8aYjEqn13i2wCJJ5YYUyE7fy0c6Wfi9+/Mc/wyYO8HOaKlnwRISuangCxrF+69VlxpWVxeXAp+XslPzrP2D1ncYA0tI5IZWgD6Oes9/dn8Vo4JO7ab8jjuHTI5EroIjTkgB0q7sPcft8Z20vuU9m0BdKYPIda/VAKEzQINah84SPRiZmqt7S8r3Mxhd8OtqvQKWaKJeUUbl+pGrySYE24ZWgPeaMabmvSPgM+rgO//otRBqiI61Q6w0hvrqJtegqW1GDFpIgY1SoW6azfGgEl1Bk89O3n8OQrKTc8/JSOX3q8eDN43meLTciRZsb76vb1ffLZ+/ev0rzUSGii65HdA+pW2zQI8/ELF1ayCMXhwZy2xV374BC4OniVsxyiwrQL42M55cOiMrtKVufy49/RbtAyEBI5NzRVKic7AMFiuvHt7mx+Gp+Zzib1rnaHCZlhSs0f2+gU39xvNp4gZffbWYhwFJpECcEgahRNM1tK99IGVIubKNwbvdgYA9K5EAyeAZkSFjwTyASHGdfgsaYLyy+gj5B6ivxdTj6StJBs+kQAiCGnOPGnRuiqjLW3n5mI1PnlzmAjrOGrbPhqEtB0JEKxD1IuMGH4S/8TUNrVVy/Ro+9CBA6As5N/1HNMV+gpx2Hd+aKuEZkimgO15kA8ImvnezkB+VAwEyBQLb51Nrn/fF5uqjsv9iekRhffB/udMDE/CZBjmMV6bv+VuPby4QIFKg7X57HeX6bZfWzkygk48gQKYAYjHwOsOpkf3auHXIk/X70KYEAkSuBHN1an7NeLO/T84omvvh7VN9uXgZBIgtMTlxdfBTCpS7SaW+ZKfvFxvQXPZuJtdDpWwCzdYseaW+9UWtyiBEtAL9BiM9CbjiSXAgIXH+PP0ZIj+np3/jBigIvDLDboEwKEqkQLdgxI/kaIRUdtpXhq9bpUpkge+QEVvYqrx9cWHkxmUbkV3f2Wl35jgTgRSAWwpG4iI7UM11Y9Stg8tOB5AGI0zfQZG17HQbG4NnugRFcQItZqeB/ThTBkug2tPXP8hOK8XLXgQbCtCeP+rZ6VxSucc3Ox3NEks4lOx0NEssQSI3ZAdGJwpDO07jg5f26CrQghdpS+7A2eluWWIJErldvdFhsgn0TweOnNybqZ0lXqe7ealWWqrDAXFYck84tvwFrKfHr8ThE44AAAAASUVORK5CYII=\"","export default \"data:image/png;base64,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\"","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n Modal,\r\n ModalHeader,\r\n ModalBody,\r\n ModalFooter,\r\n Table,\r\n Row,\r\n Col,\r\n Input,\r\n Label,\r\n Collapse,\r\n} from 'reactstrap';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport PropTypes from 'prop-types';\r\nimport { showError, showSuccess } from '../../Components/Notifications';\r\nimport moment from 'moment';\r\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\r\nimport {\r\n updatePermissionsRequest,\r\n updatePermissionsSuccess,\r\n} from '../../redux/user-list/userListAction';\r\n\r\nconst Detailmodal = props => {\r\n const {\r\n handleReset,\r\n modalOpen,\r\n handleModalToggle,\r\n req_data,\r\n permissionsList,\r\n preSelectedPermissions,\r\n handleLatestData,\r\n } = props;\r\n const [modal, setModal] = useState(modalOpen);\r\n const [selectedPermissions, setSelectedPermissions] = useState([]);\r\n const [newList, setNewList] = useState([]);\r\n const [selectedParentCategoryName, setSelectedParentCategoryName] = useState();\r\n const [subArray, setSubArray] = useState([]);\r\n const [groupNamesList, setGroupNamesList] = useState([]);\r\n const [selectedAll, setSelectedAll] = useState(false);\r\n const dispatch = useDispatch();\r\n const t = useTranslation();\r\n const nextProps = useSelector(state => ({\r\n IndicesData: state.AccessKey.getParametersData || null,\r\n changeStatusData: state.AccessKey.changeStatusData || null,\r\n updatePermissionsData: state.userList.updatePermissionsData || null,\r\n isUpdatePermissionsRequesting: state.userList.isUpdatePermissionsRequesting,\r\n updatePermissionsError: state.userList.updatePermissionsError,\r\n }));\r\n\r\n useEffect(() => {\r\n if (nextProps.updatePermissionsData) {\r\n const {\r\n data: { result },\r\n } = nextProps.updatePermissionsData;\r\n if (result) {\r\n showSuccess(result);\r\n setModal(false);\r\n handleLatestData();\r\n handleModalToggle(false);\r\n handleReset();\r\n }\r\n }\r\n }, [nextProps.updatePermissionsData]);\r\n\r\n useEffect(() => {\r\n let a = [];\r\n if (permissionsList) {\r\n permissionsList?.map(i => {\r\n if (!a.includes(i.group_name)) {\r\n a.push(i.group_name);\r\n }\r\n });\r\n }\r\n setGroupNamesList(a);\r\n }, [permissionsList]);\r\n\r\n useEffect(() => {\r\n let y = [];\r\n if (groupNamesList && preSelectedPermissions) {\r\n let a = [];\r\n preSelectedPermissions.map(i => {\r\n a.push(i.id);\r\n });\r\n setSelectedPermissions(a);\r\n groupNamesList?.map(i => {\r\n let filterList = permissionsList.filter(item => item.group_name === i);\r\n y.push({\r\n category_name: i,\r\n list: filterList,\r\n checked: false,\r\n dropdownClicked: false,\r\n });\r\n });\r\n y.map(i => {\r\n let b = [];\r\n i.list.map(item => {\r\n if (a.includes(item.permission_id)) {\r\n b.push(item.permission_id);\r\n }\r\n });\r\n i.parentList = b;\r\n if (i.parentList.length === i.list.length) {\r\n i.checked = true;\r\n }\r\n });\r\n setNewList(y);\r\n }\r\n }, [groupNamesList, preSelectedPermissions]);\r\n\r\n useEffect(() => {\r\n if (selectedPermissions && permissionsList) {\r\n let a = [];\r\n let sub_arr = [];\r\n permissionsList?.forEach(i => {\r\n a.push(i.permission_id);\r\n });\r\n sub_arr = permissionsList.filter(i => i.permission_name != 'View User');\r\n setSubArray(sub_arr);\r\n let b = selectedPermissions?.sort().join(',') == a.sort().join(',');\r\n if (b) {\r\n setSelectedAll(true);\r\n } else {\r\n setSelectedAll(false);\r\n }\r\n }\r\n }, [selectedPermissions, permissionsList]);\r\n\r\n useEffect(() => {\r\n if (nextProps.updatePermissionsError) {\r\n const {\r\n data: { response },\r\n } = nextProps.updatePermissionsError;\r\n if (response?.data) {\r\n showError(response?.data.message);\r\n setModal(false);\r\n handleModalToggle(false);\r\n }\r\n }\r\n }, [nextProps.updatePermissionsError]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(updatePermissionsSuccess({}));\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n let a = [];\r\n let y = [];\r\n if (selectedPermissions.length) {\r\n if (selectedParentCategoryName) {\r\n let c = newList;\r\n c = newList.map(i => {\r\n if (selectedParentCategoryName === i.category_name) {\r\n i.list.map(x => {\r\n y.push(x.permission_id);\r\n selectedPermissions.filter(y => {\r\n if (x.permission_id === y) {\r\n a.push(y);\r\n }\r\n });\r\n });\r\n let b = a.sort().join(',') === y.sort().join(',');\r\n i.checked = b;\r\n }\r\n return i;\r\n });\r\n setNewList(c);\r\n }\r\n }\r\n }, [selectedPermissions, selectedParentCategoryName]);\r\n\r\n const viewtoggle = value => {\r\n setModal(false);\r\n handleModalToggle(false);\r\n };\r\n\r\n const handleSelectAllPermissions = e => {\r\n let a = [];\r\n let b = [];\r\n if (!e.target.checked) {\r\n b = newList.map(data => {\r\n data.checked = false;\r\n return data;\r\n });\r\n } else {\r\n permissionsList.map(i => {\r\n a.push(i.permission_id);\r\n });\r\n b = newList.map(data => {\r\n data.checked = true;\r\n return data;\r\n });\r\n }\r\n setNewList(b);\r\n setSelectedPermissions(a);\r\n setSelectedAll(true);\r\n };\r\n\r\n const handleParentOnchangePermissions = (e, i) => {\r\n let a = selectedPermissions;\r\n let b;\r\n if (e.target.checked) {\r\n i.list.forEach(item => {\r\n if (!selectedPermissions.includes(item.permission_id)) {\r\n a.push(item.permission_id);\r\n }\r\n });\r\n b = newList.map(item => {\r\n if (item.category_name === i.category_name) {\r\n // i.dropdownClicked = i.dropdownClicked;\r\n i.checked = true;\r\n }\r\n return item;\r\n });\r\n } else {\r\n b = newList.map(item => {\r\n if (item.category_name === i.category_name) {\r\n a = selectedPermissions;\r\n i.list.map(data => {\r\n a = a.filter(y => {\r\n if (y !== data.permission_id) {\r\n return y;\r\n }\r\n });\r\n });\r\n //i.dropdownClicked = i.dropdownClicked;\r\n i.checked = false;\r\n }\r\n return item;\r\n });\r\n }\r\n setNewList(b);\r\n setSelectedPermissions(JSON.parse(JSON.stringify(a)));\r\n };\r\n const handleChildOnchangePermissions = (e, item) => {\r\n let a = [];\r\n a = selectedPermissions;\r\n setSelectedParentCategoryName(item.group_name);\r\n if (e.target.checked) {\r\n if (selectedPermissions.includes(item.permission_id)) {\r\n let b = [];\r\n b = selectedPermissions;\r\n setSelectedPermissions(b.filter(i => item.permission_id !== i));\r\n } else {\r\n if (subArray.some(r => r.permission_id === item.permission_id)) {\r\n a.push(item.permission_id);\r\n let p = permissionsList.filter(j => j.code_name === 'view_user');\r\n p.forEach(x => {\r\n if (!selectedPermissions.includes(x.permission_id)) {\r\n a.push(x.permission_id);\r\n }\r\n });\r\n } else {\r\n a.push(item.permission_id);\r\n }\r\n setSelectedPermissions(JSON.parse(JSON.stringify(a)));\r\n }\r\n } else {\r\n if (selectedPermissions.includes(item.permission_id)) {\r\n let b = [];\r\n b = selectedPermissions;\r\n setSelectedPermissions(b.filter(i => item.permission_id !== i));\r\n let x = newList;\r\n x.forEach(data => {\r\n if (item.group_name === data.category_name) {\r\n data.checked = false;\r\n }\r\n });\r\n setNewList(JSON.parse(JSON.stringify(x)));\r\n }\r\n }\r\n };\r\n\r\n const handleUpdate = () => {\r\n let data = {\r\n user_id: req_data.user.id,\r\n permission_ids: selectedPermissions,\r\n };\r\n dispatch(updatePermissionsRequest(data));\r\n };\r\n\r\n const handleDropdownClick = item => {\r\n let a = newList.map(i => {\r\n if (i.category_name === item.category_name) {\r\n i.dropdownClicked = !i.dropdownClicked;\r\n }\r\n return i;\r\n });\r\n setNewList(a);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n 
\r\n
\r\n {t('DASHBOARD.DASHBOARD')}
\r\n\r\n 
\r\n
\r\n {item.title}
\r\n{t('HOME_PAGE.DESCRIPTION')}
\r\n\r\n \r\n \r\n {t('USER_LIST.DETAILS')}\r\n \r\n \r\n \r\n
\r\n\r\n |
\r\n \r\n \r\n <>\r\n {' '}\r\n handleUpdate()}\r\n loading={nextProps.isUpdatePermissionsRequesting}\r\n >\r\n {t('PUBLIC_API_ADMIN.UPDATE')}\r\n {' '}\r\n \r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Detailmodal;\r\nDetailmodal.propTypes = {\r\n modalOpen: PropTypes.bool,\r\n handleModalToggle: PropTypes.func,\r\n req_data: PropTypes.object,\r\n handleLatestData: PropTypes.func,\r\n fromEditDetails: PropTypes.bool,\r\n activeTab: PropTypes.string,\r\n email: PropTypes.string,\r\n preSelectedPermissions: PropTypes.object,\r\n};\r\n","import React, { useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport PropTypes from 'prop-types';\r\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport Button from \"reactstrap-button-loader\";\r\nimport {deleteUserRequest, deleteUserSuccess} from \"../../redux/user-list/userListAction\";\r\nimport { showSuccess } from '../../Components/Notifications';\r\n\r\nconst DeleteConfirmationModal = (props) => {\r\n const {\r\n className,\r\n isOpen,\r\n handleDeleteConfirm,\r\n request_Id\r\n } = props;\r\n const dispatch = useDispatch();\r\n const t = useTranslation();\r\n const nextProps = useSelector((state) => ({\r\n isDeleteUserRequesting: state.userList.isDeleteUserRequesting,\r\n deleteData: state.userList.deleteUser || null,\r\n }));\r\n\r\n useEffect(() => {\r\n if(nextProps.deleteData){\r\n const {\r\n data: { result },\r\n } = nextProps.deleteData;\r\n if(result){\r\n showSuccess(result);\r\n handleDeleteConfirm(false);\r\n }\r\n }\r\n },[nextProps.deleteData])\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(deleteUserSuccess({}));\r\n };\r\n }, []);\r\n \r\n const toggle = (value) => {\r\n if(value === 'no'){\r\n handleDeleteConfirm(false,'no');\r\n }\r\n else if(value === 'yes') {\r\n dispatch(deleteUserRequest({id:request_Id}));\r\n }\r\n }\r\n const handleClose = () => {\r\n handleDeleteConfirm(false,'no');\r\n }\r\n \r\n return (\r\n \r\n {t('USER_LIST.NAME')}\r\n\r\n {req_data && req_data?.user_profile?.name\r\n ? req_data?.user_profile?.name\r\n : 'N/A'}\r\n \r\n | \r\n \r\n {t('USER_LIST.EMAIL')}\r\n{req_data && req_data?.user?.email ? req_data?.user?.email : 'N/A'} \r\n | \r\n \r\n {t('USER_LIST.COUNTRY')}\r\n\r\n {req_data && req_data?.user_profile?.country\r\n ? req_data?.user_profile?.country\r\n : 'N/A'}\r\n \r\n | \r\n \r\n Phone\r\n\r\n {req_data && req_data?.user_profile?.mobile_number\r\n ? req_data?.user_profile?.mobile_number\r\n : 'N/A'}\r\n \r\n | \r\n
\r\n {t('USER_LIST.ORGANIZATION')}\r\n\r\n {req_data && req_data?.user_profile?.organization\r\n ? req_data?.user_profile?.organization\r\n : 'N/A'}\r\n \r\n | \r\n \r\n {t('USER_LIST.LAST_LOGIN')}\r\n\r\n {req_data && req_data?.user?.last_login\r\n ? moment(req_data?.user?.last_login).format(DISPLAY_DATE_FORMAT)\r\n : 'N/A'}\r\n \r\n | \r\n \r\n {t('USER_LIST.DATE_OF_REGISTRATION')}\r\n\r\n {req_data && req_data?.user_profile?.created_date\r\n ? moment(req_data?.user_profile?.created_date).format(DISPLAY_DATE_FORMAT)\r\n : 'N/A'}\r\n \r\n | \r\n
\r\n \r\n
\r\n \r\n {newList.length &&\r\n newList?.map(i => {\r\n return (\r\n handleDropdownClick(i)}\r\n >\r\n \r\n {i.list.map(item => {\r\n return (\r\n \r\n );\r\n })}\r\n \r\n \r\n );\r\n })}\r\n
\r\n
\r\n Permissions
\r\n \r\n\r\n \r\n
\r\n \r\n \r\n \r\n handleClose()} className=\"reason-modal-header\">{t('USER_LIST.CONFIRMATION')} \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default DeleteConfirmationModal;\r\nDeleteConfirmationModal.propTypes = {\r\n isOpen: PropTypes.bool,\r\n modalData: PropTypes.object,\r\n handleLatestData: PropTypes.func,\r\n handleApprovedModalToggle: PropTypes.bool,\r\n fromModal: PropTypes.bool,\r\n activeTab: PropTypes.string,\r\n request_Id: PropTypes.string\r\n };","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';\r\nimport Optionicon from '../../assets/Images/option.png';\r\nimport PropTypes from 'prop-types';\r\nimport Detailmodal from './DetailsModal';\r\nimport DeleteConfirmationModal from './DeleteConfirmationModal';\r\nimport {\r\n userByIdRequest,\r\n userPermissionsRequest,\r\n userPermissionsByIdRequest,\r\n} from '../../redux/user-list/userListAction';\r\n\r\nconst Detailsdropdown = props => {\r\n const { request_Id, handleLatestData, selectedPageTab, activeTab, email, handleReset } = props;\r\n const t = useTranslation();\r\n const nextProps = useSelector(state => ({\r\n isDeleteUserRequesting: state.userList.isDeleteUserRequesting,\r\n deleteData: state.userList.deleteUser || null,\r\n detailUserInfo: state.userList.userById || null,\r\n permissionsData: state.userList.userPermissionsData || null,\r\n userPermissionsByIdData: state.userList.userPermissionsByIdData || null,\r\n }));\r\n\r\n const dispatch = useDispatch();\r\n const [dropdownOpen, setDropdownOpen] = useState(false);\r\n const [isModalOpen, setIsModalOpen] = useState(false);\r\n const [selectedReqModalData, setSelectedReqModalData] = useState();\r\n const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);\r\n const [permissionsList, setPermissionsList] = useState([]);\r\n const [preSelectedPermissions, setPreSelectedPermissions] = useState([]);\r\n const [selectedTabListData, setSelectedTabListData] = useState({\r\n view_details: true,\r\n delete: false,\r\n });\r\n\r\n const toggle = () => setDropdownOpen(prevState => !prevState);\r\n useEffect(() => {\r\n if (nextProps.detailUserInfo) {\r\n const {\r\n data: { result },\r\n } = nextProps.detailUserInfo;\r\n if (result) {\r\n setSelectedReqModalData(result);\r\n }\r\n }\r\n }, [nextProps.detailUserInfo]);\r\n\r\n useEffect(() => {\r\n if (nextProps.userPermissionsByIdData) {\r\n const {\r\n data: { result },\r\n } = nextProps.userPermissionsByIdData;\r\n if (result) {\r\n setPreSelectedPermissions(result);\r\n }\r\n }\r\n }, [nextProps.userPermissionsByIdData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.permissionsData) {\r\n const {\r\n data: { result },\r\n } = nextProps.permissionsData;\r\n if (result) {\r\n result?.map(i => {\r\n i.checked = false;\r\n });\r\n setPermissionsList(result);\r\n }\r\n }\r\n }, [nextProps.permissionsData]);\r\n\r\n useEffect(() => {\r\n if (selectedPageTab === 'public-user') {\r\n let a = {\r\n view_details: true,\r\n delete: true,\r\n };\r\n setSelectedTabListData(a);\r\n } else if (selectedPageTab === 'admin-user') {\r\n let a = {\r\n view_details: true,\r\n delete: true,\r\n };\r\n setSelectedTabListData(a);\r\n }\r\n }, [selectedPageTab]);\r\n\r\n const handleViewDetailsModal = () => {\r\n setIsModalOpen(true);\r\n dispatch(userByIdRequest({ id: request_Id }));\r\n dispatch(userPermissionsRequest());\r\n dispatch(userPermissionsByIdRequest({ id: request_Id }));\r\n };\r\n\r\n const handleModalToggle = () => {\r\n setIsModalOpen(false);\r\n };\r\n\r\n const handleDelete = () => {\r\n setIsDeleteModalOpen(true);\r\n };\r\n\r\n const handleDeleteConfirm = (boolean_value, value) => {\r\n if (value === 'no') {\r\n setIsDeleteModalOpen(boolean_value);\r\n } else {\r\n setIsDeleteModalOpen(boolean_value);\r\n props.latestData();\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n {t('USER_LIST.CONFIRMATION_TITLE')}
\r\n\r\n \r\n \r\n {headerGroups.map(headerGroup => (\r\n <>\r\n
\r\n
\r\n \r\n );\r\n};\r\nUserListTable.propTypes = {\r\n req_data: PropTypes.array,\r\n handleLatestData: PropTypes.func,\r\n selectedTab: PropTypes.string,\r\n latestData: PropTypes.func,\r\n handlePageSize: PropTypes.func,\r\n pageCount: PropTypes.number,\r\n handlePageNumber: PropTypes.func,\r\n pageNumber: PropTypes.number,\r\n recordsCount: PropTypes.number,\r\n activeTab: PropTypes.string,\r\n};\r\n","import React from 'react';\r\nimport CloseIcon from '../../assets/Images/icons/close.png';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { Field, reduxForm } from 'redux-form';\r\nimport PropTypes from 'prop-types';\r\nimport { t } from 'react-multi-lang';\r\nimport {\r\n renderTextField,\r\n renderReactSelectInputField,\r\n} from '../../Components/common/renderInputField';\r\n\r\nconst UserFilter = props => {\r\n const {\r\n handleReset,\r\n nameHandler,\r\n emailHandler,\r\n mobileHandler,\r\n roleHandler,\r\n reset,\r\n handleCloseFilter,\r\n } = props;\r\n const roles = [\r\n { id: '1', name: 'User', value: 'users' },\r\n { id: '2', name: 'IWMI Admin', value: 'admin' },\r\n ];\r\n\r\n const renderAPIParameterOptions = (list) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n params.map(param => {\r\n let data = {\r\n value: param.value,\r\n label: `${param.name}`,\r\n id: param.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const handleClearFilters = () => {\r\n reset('filter-form');\r\n handleReset();\r\n };\r\n\r\n const handleName = e => {\r\n nameHandler(e);\r\n };\r\n\r\n const handleEmail = e => {\r\n emailHandler(e);\r\n };\r\n\r\n const handleMobileNumber = e => {\r\n mobileHandler(e);\r\n };\r\n\r\n const handleRoleChange = e => {\r\n roleHandler(e);\r\n };\r\n return (\r\n | \r\n |
|---|
| \r\n | \r\n
| \r\n | \r\n \r\n ) : (\r\n
\r\n \r\n
\r\n
\r\n \r\n \r\n {\r\n handleGoToPage(e);\r\n }}\r\n disabled={\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === 0\r\n ? true\r\n : false\r\n }\r\n style={{ width: '50px', border: 'none' }}\r\n />\r\n \r\n \r\n of{' '}\r\n {props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)}{' '}\r\n Pages\r\n \r\n \r\n handlepreviousPage()}\r\n className=\"previous-btn\"\r\n disabled={props.pageNumber <= 1 ? true : false}\r\n >\r\n {props.pageNumber <= 1 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n handlenextPage()}\r\n className=\"next-btn\"\r\n disabled={\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === 0\r\n ? true\r\n : false\r\n }\r\n >\r\n {(props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === props.pageNumber ||\r\n (props.pageCount % pageSize\r\n ? Math.trunc(props.pageCount / pageSize + 1)\r\n : Math.trunc(props.pageCount / pageSize)) === 0 ? (\r\n \r\n ) : (\r\n \r\n )}\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\nUserFilter.propTypes = {\r\n noRecordsErrorHandler: PropTypes.func,\r\n handleFilterFormData: PropTypes.func,\r\n formFilterData: PropTypes.object,\r\n nameHandler: PropTypes.func,\r\n};\r\nexport default reduxForm({\r\n form: 'filter-form',\r\n})(UserFilter);\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { TabContent, TabPane, Row, Col } from 'reactstrap';\r\nimport { userListRequest, userPermissionsRequest } from '../../redux/user-list/userListAction';\r\nimport { UserListTable } from './Table';\r\nimport { isSuperAdmin, isStaffUser } from '../../Components/common/utils';\r\nimport { userDetailRequest } from '../../redux/user-list/userListAction';\r\nimport Filter from './Filter';\r\nimport RightArrow from '../../assets/Images/back-button.svg';\r\nimport FilterIcon from '../../assets/Images/icons/mi_filter.svg';\r\nimport { t } from 'react-multi-lang';\r\n\r\nconst Index = () => {\r\n const dispatch = useDispatch();\r\n const history = useHistory();\r\n const [newRequestList, setNewRequestList] = useState();\r\n const [pageLimit, setPageLimit] = useState(10);\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState();\r\n const [recordsCount, setRecordsCount] = useState();\r\n const [toggleRightBar, setToggleRightBar] = useState(false);\r\n const [permissionsData, setPermissionsData] = useState();\r\n const [formData, setFormData] = useState({\r\n name: '',\r\n mobile: '',\r\n email: '',\r\n type: '',\r\n });\r\n const [filterFormData, setFilterFormData] = useState({\r\n Name: '',\r\n Email: '',\r\n Phone_number: '',\r\n Role: '',\r\n });\r\n const [filterData, setFilterData] = useState();\r\n const [userId, setUserId] = useState();\r\n const nextProps = useSelector(state => ({\r\n userListData: state.userList.userListData || null,\r\n permissionsData: state.userList.userPermissionsData || null,\r\n userByIdData: state.userList.userById || null,\r\n userDetailData: state.userList.userDetailData || null,\r\n }));\r\n useEffect(() => {\r\n handleFilterResultData(formData);\r\n }, [formData.name, formData.email, formData.mobile, formData.type]);\r\n useEffect(() => {\r\n if (isSuperAdmin() || isStaffUser()) {\r\n dispatch(userListRequest({ page: pageNumber, limit: pageLimit }));\r\n } else {\r\n history.push('/home');\r\n }\r\n dispatch(userDetailRequest());\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (nextProps.userDetailData) {\r\n const {\r\n data: { result },\r\n } = nextProps.userDetailData;\r\n if (result) {\r\n setUserId(result?.user?.id);\r\n }\r\n }\r\n }, [nextProps.userDetailData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.permissionsData) {\r\n const {\r\n data: { result },\r\n } = nextProps.permissionsData;\r\n if (result) {\r\n setPermissionsData(result);\r\n }\r\n }\r\n }, [nextProps.permissionsData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.userListData) {\r\n const {\r\n data: { result },\r\n } = nextProps.userListData;\r\n let a;\r\n if (result?.results?.length) {\r\n let filteredList = [];\r\n filteredList = result.results.filter(i => i.is_superuser !== 'True');\r\n filteredList.map(i => {\r\n return (i.role = i.is_staff === 'False' ? 'User' : 'IWMI Admin');\r\n });\r\n a = filteredList.filter(x => x.user_id !== userId);\r\n setNewRequestList(a);\r\n setPageCount(result.count);\r\n setRecordsCount(result.results.length);\r\n }\r\n }\r\n }, [nextProps.userListData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.userByIdData) {\r\n const {\r\n data: { result },\r\n } = nextProps.userByIdData;\r\n if (result?.results?.length) {\r\n setNewRequestList(result.results);\r\n setPageCount(result.count);\r\n setRecordsCount(result.results.length);\r\n }\r\n }\r\n }, [nextProps.userByIdData]);\r\n\r\n const handlePageNumber = value => {\r\n setPageNumber(value);\r\n if (filterData) {\r\n dispatch(userListRequest({ page: value, limit: pageLimit, data: filterData }));\r\n } else {\r\n dispatch(userListRequest({ page: value, limit: pageLimit }));\r\n }\r\n };\r\n\r\n const handlePageSize = value => {\r\n setPageLimit(value);\r\n setPageNumber(1);\r\n if (filterData) {\r\n dispatch(userListRequest({ page: 1, limit: value, data: filterData }));\r\n } else {\r\n dispatch(userListRequest({ page: 1, limit: value }));\r\n }\r\n };\r\n\r\n const handleLatestData = value => {\r\n dispatch(userListRequest({ page: pageNumber, limit: value }));\r\n };\r\n\r\n const handleFilterResultData = data => {\r\n setFilterData(data);\r\n setPageNumber(1);\r\n dispatch(userListRequest({ data: data }));\r\n };\r\n\r\n const handleLatestDataForDelete = id => {\r\n dispatch(userListRequest({ page: pageNumber, limit: 10 }));\r\n };\r\n\r\n const handleCloseFilter = () => {\r\n setToggleRightBar(false);\r\n };\r\n\r\n const handleFilter = () => {\r\n dispatch(userPermissionsRequest());\r\n setToggleRightBar(!toggleRightBar);\r\n };\r\n\r\n const handleManageCropsBackButton = () => {\r\n history.push('/settingsDashboard');\r\n };\r\n\r\n const nameHandler = e => {\r\n formData.name = e.target.value;\r\n setFormData(formData);\r\n filterFormData.Name = e.target.value;\r\n setFilterFormData(filterFormData);\r\n };\r\n\r\n const mobileHandler = e => {\r\n formData.mobile = e.target.value;\r\n setFormData(formData);\r\n filterFormData.Phone_number = e.target.value;\r\n setFilterFormData(filterFormData);\r\n };\r\n\r\n const roleHandler = e => {\r\n formData.type = e.value;\r\n setFormData(formData);\r\n filterFormData.Role = e.value;\r\n setFilterFormData(filterFormData);\r\n };\r\n\r\n const emailHandler = e => {\r\n formData.email = e.target.value;\r\n setFormData(formData);\r\n filterFormData.Email = e.target.value;\r\n setFilterFormData(filterFormData);\r\n };\r\n const handleReset = () => {\r\n setFormData({});\r\n filterFormData.Name = '';\r\n filterFormData.Email = '';\r\n filterFormData.Phone_number = '';\r\n filterFormData.Role = '';\r\n setFilterFormData(filterFormData);\r\n };\r\n\r\n return (\r\n <>\r\n {toggleRightBar ? (\r\n \r\n
\r\n \r\n {t('FILTER.FILTER')}
\r\n\r\n handleCloseFilter()}\r\n />\r\n
\r\n \r\n
\r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n handleManageCropsBackButton()}\r\n />\r\n \r\n
\r\n\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Index;\r\n","import React, { useEffect, useState } from 'react';\r\nimport Select from 'react-select';\r\n\r\nconst ManagesidebarCrops = (props) => {\r\n const [countryList,setCountryList] = useState();\r\n const [stateList,setStateList] = useState();\r\n const [districtList, setDistrictList] = useState();\r\n const [formData, setFormData] = useState({\r\n country:\"\",\r\n state:\"\",\r\n district:\"\"\r\n});\r\n useEffect(() => {\r\n let list = [];\r\n if(props.countryList){\r\n let default_option = { value: 'select', label: 'select' };\r\n list.push(default_option);\r\n props.countryList.map((i) => {\r\n list.push({\r\n value: i.id, label: i.name,\r\n })\r\n })\r\n setCountryList(list);\r\n }\r\n },[props.countryList])\r\n\r\n useEffect(() => {\r\n if(formData){\r\n props.handleBreadCrumbsData(formData);\r\n }\r\n },[formData])\r\n\r\n useEffect(() => {\r\n if(props.initialValues){\r\n setFormData(props.initialValues)\r\n props.handleBreadCrumbsData(props.initialValues);\r\n }\r\n },[props.initialValues])\r\n\r\n useEffect(() => {\r\n let list = [];\r\n if(props.stateList){\r\n let default_option = { value: 'select', label: 'select' };\r\n list.push(default_option);\r\n props.stateList.map((i) => {\r\n list.push({\r\n value: i.id, label: i.name,\r\n })\r\n })\r\n setStateList(list);\r\n }\r\n },[props.stateList])\r\n\r\n useEffect(() => {\r\n let list = [];\r\n if(props.districtList){\r\n let default_option = { value: 'select', label: 'select' };\r\n list.push(default_option);\r\n props.districtList.map((i) => {\r\n list.push({\r\n value: i.id, label: i.name,\r\n })\r\n })\r\n setDistrictList(list);\r\n }\r\n },[props.districtList])\r\n\r\n const handleSelectedCountry = (newValue, action) => {\r\n if(newValue.value === 'select'){\r\n formData.country = newValue;\r\n formData.state = '';\r\n formData.district = '';\r\n }\r\n else{\r\n formData.country = newValue;\r\n }\r\n setFormData({...formData});\r\n props.handleSelectedCountry(newValue,action);\r\n }\r\n const handleSelectedState = (newValue, action) => {\r\n if(newValue.value === 'select'){\r\n formData.state = '';\r\n formData.district = '';\r\n }\r\n else{\r\n formData.state = newValue;\r\n }\r\n setFormData({...formData});\r\n props.handleSelectedState(newValue,action)\r\n }\r\n\r\n const handleSelectedDistrict = (newValue,action) => {\r\n if(newValue.value === 'select'){\r\n formData.district = '';\r\n }\r\n else{\r\n formData.district = newValue;\r\n }\r\n setFormData({...formData});\r\n props.handleSelectedDistrict(newValue,action);\r\n }\r\n\r\n return(\r\n Manage Users
\r\n \r\n{t('FILTER.FILTER')}
\r\n \r\n \r\n\r\n
\r\n );\r\n};\r\nexport default ManagesidebarCrops;","import React, { useEffect, useState } from 'react';\r\nimport {useSelector } from 'react-redux';\r\nimport { Modal, ModalHeader, ModalBody, Row, Col, ModalFooter } from 'reactstrap';\r\nimport { t } from 'react-multi-lang';\r\nimport _ from 'lodash';\r\nimport { Field, reduxForm } from 'redux-form';\r\nimport {\r\n renderReactSelectInputField,\r\n} from '../../Components/common/renderInputField';\r\nimport Button from 'reactstrap-button-loader';\r\nimport {MONTHS} from \"../../Components/constants\"\r\n\r\nconst Addmodalcrop = (props) => {\r\n const {handleSubmit} = props;\r\n const [fromDaysList, setFromDaysList] = useState();\r\n const [toDaysList, setToDaysList] = useState();\r\n\r\n const addtoggle = () => {\r\n props.handleSetModal(!props.modal);\r\n props.handleResetInitialValues();\r\n };\r\n const nextProps = useSelector((state) => ({\r\n isManageCropsUpdateRequesting: state.ManageCrops.isManageCropsUpdateRequesting,\r\n }));\r\n useEffect(() => {\r\n if(props.initialValues){\r\n if(props.initialValues?.from_month?.label){\r\n let days = [];\r\n MONTHS.map((data) => {\r\n if(data.label === props.initialValues.from_month.label){\r\n for(var i=1;i<=data.days;i++){\r\n days.push({\r\n value: i,\r\n label: i,\r\n id: i,\r\n })\r\n }\r\n setFromDaysList(days);\r\n }\r\n })\r\n }\r\n else{\r\n setFromDaysList([]);\r\n }\r\n if(props.initialValues?.to_month?.label){\r\n let days = [];\r\n MONTHS.map((data) => {\r\n if(data.label === props.initialValues.to_month.label){\r\n for(var i=1;i<=data.days;i++){\r\n days.push({\r\n value: i,\r\n label: i,\r\n id: i,\r\n })\r\n }\r\n }\r\n })\r\n setToDaysList(days);\r\n }\r\n else{\r\n setToDaysList([])\r\n }\r\n }\r\n },[props.initialValues])\r\n\r\nconst handleSelectedItem = (item) => {\r\n props.handleSelectedSeason(item);\r\n}\r\n\r\n const handleAddClick = (value) => {\r\n props.handleAddClick(value);\r\n } \r\n\r\n const handleUpdate = () => {\r\n props.handleUpdate();\r\n }\r\n\r\n const renderAPIParameterOptions = (list) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n params.map((param) => {\r\n let data = {\r\n value: param.label,\r\n label: `${param.label}`,\r\n id: param.value\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n};\r\n\r\nconst handleCancel = () => {\r\n props.handleSetModal(!props.modal);\r\n props.handleResetInitialValues();\r\n}\r\n\r\nconst onFormSubmit = () => {\r\n props.handleAddClick('add');\r\n}\r\n\r\nconst renderBreadCrumbs = (values) => {\r\n if(props.editButtonClicked){\r\n return \r\n
\r\n Select Region
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n {props.initialValues?.breadCrumbs}
\r\n }\r\n else{\r\n return{values?.country?.label} { values?.state?.label ? \" | \" + values?.state?.label : \"\"} {values?.district?.label ? \" | \" + values?.district?.label : \"\"}
\r\n }\r\n}\r\n\r\n\r\nconst handleFromMonthChange = (item) => {\r\n let days = [];\r\n MONTHS.map((data) => {\r\n if(data.label === item.label){\r\n for(var i=1;i<=data.days;i++){\r\n days.push({\r\n value: i,\r\n label: i,\r\n id: i,\r\n })\r\n }\r\n }\r\n})\r\nsetFromDaysList(days);\r\nprops.handleFromMonth(item);\r\n}\r\n\r\nconst handleToMonthChange = (item) => {\r\n let days = [];\r\n MONTHS.map((data) => {\r\n if(data.label === item.label){\r\n for(var i=1;i<=data.days;i++){\r\n days.push({\r\n value: i,\r\n label: i,\r\n id: i,\r\n })\r\n }\r\n }\r\n})\r\nsetToDaysList(days);\r\nprops.handleToMonth(item);\r\n}\r\n\r\nconst handleToDayChange = (item) => {\r\n props.handleToDay(item);\r\n}\r\n\r\n\r\n\r\nconst handleFromDayChange = (item) => {\r\n props.handleFromDay(item);\r\n}\r\n\r\n\r\nreturn (\r\n\r\n {props.hideAddButton && \r\n \r\n }\r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default reduxForm({\r\n form: 'filter-form',\r\n enableReinitialize: true,\r\n})(Addmodalcrop);","export const MANAGE_CROPS_CONST = {\r\n MANAGE_CROPS_REQUEST: 'MANAGE_CROPS_REQUEST',\r\n MANAGE_CROPS_SUCCESS: 'MANAGE_CROPS_SUCCESS',\r\n MANAGE_CROPS_FAILED: 'MANAGE_CROPS_FAILED',\r\n };\r\n\r\n export const MANAGE_CROPS_LIST_BY_ID_CONST = {\r\n MANAGE_CROPS_LIST_BY_ID_REQUEST: 'MANAGE_CROPS_LIST_BY_ID_REQUEST',\r\n MANAGE_CROPS_LIST_BY_ID_SUCCESS: 'MANAGE_CROPS_LIST_BY_ID_SUCCESS',\r\n MANAGE_CROPS_LIST_BY_ID_FAILED: 'MANAGE_CROPS_LIST_BY_ID_FAILED',\r\n };\r\n\r\nexport const MANAGE_CROPS_ADD_CONST = {\r\n MANAGE_CROPS_ADD_REQUEST: 'MANAGE_CROPS_ADD_REQUEST',\r\n MANAGE_CROPS_ADD_SUCCESS: 'MANAGE_CROPS_ADD_SUCCESS',\r\n MANAGE_CROPS_ADD_FAILED: 'MANAGE_CROPS_ADD_FAILED',\r\n };\r\n\r\nexport const MANAGE_CROPS_DELETE_CONST = {\r\n MANAGE_CROPS_DELETE_REQUEST: 'MANAGE_CROPS_DELETE_REQUEST',\r\n MANAGE_CROPS_DELETE_SUCCESS: 'MANAGE_CROPS_DELETE_SUCCESS',\r\n MANAGE_CROPS_DELETE_FAILED: 'MANAGE_CROPS_DELETE_FAILED',\r\n };\r\n\r\n \r\nexport const MANAGE_CROPS_UPDATE_CONST = {\r\n MANAGE_CROPS_UPDATE_REQUEST: 'MANAGE_CROPS_UPDATE_REQUEST',\r\n MANAGE_CROPS_UPDATE_SUCCESS: 'MANAGE_CROPS_UPDATE_SUCCESS',\r\n MANAGE_CROPS_UPDATE_FAILED: 'MANAGE_CROPS_UPDATE_FAILED',\r\n};\r\n\r\n\r\nexport const MANAGE_CROPS_SEASONS_CONST = {\r\n MANAGE_CROPS_SEASONS_REQUEST: 'MANAGE_CROPS_SEASONS_REQUEST',\r\n MANAGE_CROPS_SEASONS_SUCCESS: 'MANAGE_CROPS_SEASONS_SUCCESS',\r\n MANAGE_CROPS_SEASONS_FAILED: 'MANAGE_CROPS_SEASONS_FAILED',\r\n};\r\n\r\n","import {MANAGE_CROPS_CONST, MANAGE_CROPS_ADD_CONST, MANAGE_CROPS_UPDATE_CONST,MANAGE_CROPS_DELETE_CONST,MANAGE_CROPS_SEASONS_CONST,MANAGE_CROPS_LIST_BY_ID_CONST } from './manageCropsConst';\r\n\r\nexport const manageCropsListRequest = (data) => ({\r\n type: MANAGE_CROPS_CONST.MANAGE_CROPS_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const manageCropsListSuccess = (response) => ({\r\n type: MANAGE_CROPS_CONST.MANAGE_CROPS_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const manageCropsListFailed = (error) => ({\r\n type: MANAGE_CROPS_CONST.MANAGE_CROPS_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\n\r\n\r\nexport const manageCropsListByIdRequest = (data) => ({\r\n type: MANAGE_CROPS_LIST_BY_ID_CONST.MANAGE_CROPS_LIST_BY_ID_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const manageCropsListByIdSuccess = (response) => ({\r\n type: MANAGE_CROPS_LIST_BY_ID_CONST.MANAGE_CROPS_LIST_BY_ID_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const manageCropsListByIdFailed = (error) => ({\r\n type: MANAGE_CROPS_LIST_BY_ID_CONST.MANAGE_CROPS_LIST_BY_ID_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\nexport const manageCropsAddRequest = (data) => ({\r\n type: MANAGE_CROPS_ADD_CONST.MANAGE_CROPS_ADD_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const manageCropsAddSuccess = (response) => ({\r\n type: MANAGE_CROPS_ADD_CONST.MANAGE_CROPS_ADD_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const manageCropsAddFailed = (error) => ({\r\n type: MANAGE_CROPS_ADD_CONST.MANAGE_CROPS_ADD_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\n\r\n\r\nexport const manageCropsUpdateRequest = (data) => ({\r\n type: MANAGE_CROPS_UPDATE_CONST.MANAGE_CROPS_UPDATE_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const manageCropsUpdateSuccess = (response) => ({\r\n type: MANAGE_CROPS_UPDATE_CONST.MANAGE_CROPS_UPDATE_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const manageCropsUpdateFailed = (error) => ({\r\n type: MANAGE_CROPS_UPDATE_CONST.MANAGE_CROPS_UPDATE_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\n\r\n\r\nexport const manageCropsDeleteRequest = (data) => ({\r\n type: MANAGE_CROPS_DELETE_CONST.MANAGE_CROPS_DELETE_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const manageCropsDeleteSuccess = (response) => ({\r\n type: MANAGE_CROPS_DELETE_CONST.MANAGE_CROPS_DELETE_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const manageCropsDeleteFailed = (error) => ({\r\n type: MANAGE_CROPS_DELETE_CONST.MANAGE_CROPS_DELETE_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\nexport const manageCropsSeasonsRequest = (data) => ({\r\n type: MANAGE_CROPS_SEASONS_CONST.MANAGE_CROPS_SEASONS_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const manageCropsSeasonsSuccess = (response) => ({\r\n type: MANAGE_CROPS_SEASONS_CONST.MANAGE_CROPS_SEASONS_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const manageCropsSeasonsFailed = (error) => ({\r\n type: MANAGE_CROPS_SEASONS_CONST.MANAGE_CROPS_SEASONS_FAILED,\r\n payload: error,\r\n});","import React, { useEffect, useMemo, useState } from 'react';\r\nimport { useTable, usePagination, useSortBy, useFilters, useGlobalFilter } from 'react-table';\r\nimport PropTypes from 'prop-types';\r\nimport DisabledLeftArrowIcon from '../../assets/Images/disable_previous_image.svg';\r\nimport DisabledRightArrowIcon from '../../assets/Images/disable_next_image.svg';\r\nimport EnabledLeftArrowIcon from '../../assets/Images/enable_previous_image.svg';\r\nimport EnabledRightArrowIcon from '../../assets/Images/enable_next_image.svg';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport { Row, Col, Table } from 'reactstrap';\r\nimport { isSuperAdmin } from '../../Components/common/utils';\r\n\r\nexport const TableList = (props) => {\r\n const { loading = true, userDetailData } = props;\r\n const t = useTranslation();\r\n const notAvailable = 'N/A';\r\n\r\n const COLUMNS = [\r\n {\r\n Header: 'Crop Season',\r\n accessor: (row) => (row.season_name ? row.season_name : notAvailable),\r\n sticky: 'top',\r\n },\r\n {\r\n Header: 'From(dd/mm)',\r\n accessor: (row) =>\r\n row.start_month\r\n ? (row.start_day.length <= 1 ? '0' + row.start_day : row.start_day) +\r\n '/' +\r\n (row.start_month.length <= 1 ? '0' + row.start_month : row.start_month)\r\n : notAvailable,\r\n sticky: 'top',\r\n },\r\n {\r\n Header: 'To(dd/mm)',\r\n accessor: (row) =>\r\n row.end_month\r\n ? (row.end_day.length <= 1 ? '0' + row.end_day : row.end_day) +\r\n '/' +\r\n (row.end_month.length <= 1 ? '0' + row.end_month : row.end_month)\r\n : notAvailable,\r\n sticky: 'top',\r\n },\r\n {\r\n Header: 'Location',\r\n accessor: (row) => (row.location_name ? row.location_name : notAvailable),\r\n sticky: 'top',\r\n },\r\n ];\r\n\r\n const columns = useMemo(() => COLUMNS, []);\r\n const data = useMemo(() => props.req_data, [props.req_data]);\r\n const tableInstance = useTable(\r\n {\r\n columns,\r\n data,\r\n },\r\n useGlobalFilter,\r\n useSortBy,\r\n usePagination,\r\n );\r\n\r\n const pageSizeHandler = (e) => {\r\n setPageSize(Number(e.target.value));\r\n props.handlePageSize(Number(e.target.value));\r\n };\r\n\r\n const {\r\n getTableProps,\r\n getTableBodyProps,\r\n headerGroups,\r\n page,\r\n state,\r\n setPageSize,\r\n setAllFilters,\r\n prepareRow,\r\n } = tableInstance;\r\n const { pageSize } = state;\r\n const page_range = [10, 15, 20, 25];\r\n\r\n const handlepreviousPage = (value) => {\r\n props.handlePageNumber(props.pageNumber - 1);\r\n };\r\n const handlenextPage = (value) => {\r\n props.handlePageNumber(props.pageNumber + 1);\r\n };\r\n const handleGoToPage = (e) => {\r\n props.handlePageNumber(Number(e.target.value));\r\n };\r\n const handleEditClick = (value) => {\r\n props.handleRowClick(value.original);\r\n };\r\n\r\n const handleDeleteClick = (value) => {\r\n props.handleDeleteById(value.original);\r\n };\r\n\r\n return (\r\n <>\r\n {/* */}\r\n \r\n \r\n {headerGroups.map((headerGroup) => (\r\n <>\r\n
\r\n {/*
*/}\r\n \r\n );\r\n};\r\nTableList.propTypes = {\r\n req_data: PropTypes.array,\r\n handleLatestData: PropTypes.func,\r\n latestData: PropTypes.func,\r\n handlePageSize: PropTypes.func,\r\n pageCount: PropTypes.number,\r\n handlePageNumber: PropTypes.func,\r\n pageNumber: PropTypes.number,\r\n recordsCount: PropTypes.number,\r\n activeTab: PropTypes.string,\r\n};\r\n","import React from 'react';\r\nimport { useSelector } from 'react-redux';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport PropTypes from 'prop-types';\r\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport Button from \"reactstrap-button-loader\";\r\n\r\nconst DeleteConfirmationModal = (props) => {\r\n const {\r\n className,\r\n isDeleteModalOpen,\r\n handleDeleteConfirm,\r\n } = props;\r\n const t = useTranslation();\r\n\r\n const nextProps = useSelector((state) => ({\r\n isManageCropsDeleteRequesting: state.ManageCrops.isManageCropsDeleteRequesting,\r\n }));\r\n\r\n\r\n const toggle = (value) => {\r\n if(value === 'no'){\r\n handleDeleteConfirm(false,'no');\r\n }\r\n else if(value === 'yes') {\r\n handleDeleteConfirm(false,'yes');\r\n }\r\n }\r\n const handleClose = () => {\r\n handleDeleteConfirm(false);\r\n }\r\n \r\n return (\r\n | \r\n |
|---|
| \r\n | \r\n
\r\n \r\n {t('PUBLIC_API_ADMIN.CONFIRMATION')} \r\n \r\n \r\n \r\n {' '}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nexport default DeleteConfirmationModal;\r\nDeleteConfirmationModal.propTypes = {\r\n isDeleteModalOpen: PropTypes.bool,\r\n handleDeleteConfirm: PropTypes.func,\r\n };","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport RightArrow from \"../../assets/Images/back-button.svg\";\r\nimport ManagesidebarCrops from '../Managecrops/sidebar';\r\nimport Addmodalcrop from '../Managecrops/Addmodalcrop';\r\nimport { useHistory } from 'react-router-dom';\r\nimport {\r\n manageCropsListRequest,\r\n manageCropsSeasonsRequest,\r\n manageCropsListByIdRequest,\r\n manageCropsDeleteRequest,\r\n manageCropsListByIdSuccess\r\n} from '../../redux/manageCrops/manageCropsAction';\r\nimport { TableList } from './tableList';\r\nimport Loader from '../../Components/common/loader';\r\nimport { t } from 'react-multi-lang';\r\nimport { getCountryRequest } from '../../redux/actions';\r\nimport {userDetailRequest } from \"../../redux/user-list/userListAction\"\r\nimport {\r\n manageCropsAddRequest,\r\n manageCropsAddSuccess,\r\n manageCropsDeleteSuccess,\r\n manageCropsUpdateRequest,\r\n manageCropsUpdateSuccess\r\n} from '../../redux/manageCrops/manageCropsAction';\r\nimport { isSuperAdmin, isStaffUser } from '../../Components/common/utils';\r\nimport DeleteConfirmationModal from './DeleteConfirmation';\r\nimport { LOCATION, MONTHS } from '../../Components/constants';\r\nimport { showSuccess } from '../../Components/Notifications';\r\n\r\nconst ManageCrops = () => {\r\n const dispatch = useDispatch();\r\n const history = useHistory();\r\n const [manageCropsListData, setManageCropsList] = useState();\r\n const [manageCropsSeasonsList, setManageCropsSeasonsList] = useState();\r\n const [countryList, setCountryList] = useState();\r\n const [stateList, setStateList] = useState();\r\n const [districtList, setDistrictList] = useState();\r\n const [userDetailData, setUserDetailData] = useState();\r\n //const [updatedPermissions,setUpdatedPermissions] = useState();\r\n const [selectedDropdown, setSelectedDropdown] = useState('country');\r\n const [addModalDisabled, setAddModalDisabled] = useState(true);\r\n const [modal, setModal] = useState(false);\r\n const [recordsCount, setRecordsCount] = useState();\r\n const [hideAddButton,setHideAddButton] = useState(false);\r\n const [selectedCountry, setSelectedCountry] = useState();\r\n const [selectedState, setSelectedState] = useState();\r\n const [selectedDistrict, setSelectedDistrict] = useState();\r\n const [addButtonDisabled, setAddButtonDisabled] = useState(true);\r\n const [breadCrumbsData, setBreadCrumbsData] = useState([]);\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState();\r\n const [pageLimit, setPageLimit] = useState(10);\r\n const [modalData, setModalData] = useState();\r\n const [deleteConfirmModal, setDeleteConfirmModal] = useState(false);\r\n const [editButtonClicked, setEditButtonClicked] = useState(false);\r\n const [selectedDeleteRowId, setSelectedDeleteRowId] = useState();\r\n const [editButtonDisabled, setEditButtonDisabled] = useState(true);\r\n const [sideBarInitialValues,setSideBarInitialValues] = useState();\r\n const [updateClicked, setUpdateClicked] = useState(false);\r\n const [formData, setFormData] = useState({\r\n season: '',\r\n type: '',\r\n type_id: '',\r\n start_month: '',\r\n start_day: '',\r\n end_month: '',\r\n end_day: ''\r\n });\r\n const nextProps = useSelector((state) => ({\r\n manageCropsList: state.ManageCrops.manageCropsListData || null,\r\n isManageCropsListRequesting: state.ManageCrops.isManageCropsListRequesting,\r\n manageCropsSeasonsData: state.ManageCrops.manageCropsSeasonsData || null,\r\n CountryListData: state.Location.countryList || null,\r\n isManageCropsAddRequesting: state.ManageCrops.isManageCropsAddRequesting,\r\n manageCropsAddData: state.ManageCrops.manageCropsAddData || null,\r\n manageCropsDataById: state.ManageCrops.manageCropsListByIdData || null,\r\n manageCropsDeleteData: state.ManageCrops.manageCropsDeleteData || null,\r\n manageCropsUpdatedata: state.ManageCrops.manageCropsUpdateData || null,\r\n manageCropsListError: state.ManageCrops.manageCropsListDataError || null,\r\n manageCropsAddDataError: state.ManageCrops.manageCropsAddDataError,\r\n userDetailData: state.userList.userDetailData || null,\r\n }));\r\n\r\n useEffect(() => {\r\n if (isSuperAdmin() || isStaffUser()) {\r\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\r\n dispatch(manageCropsListRequest({ page: pageNumber, limit: pageLimit }));\r\n dispatch(manageCropsSeasonsRequest());\r\n } else{\r\n history.push('/home');\r\n }\r\n dispatch(userDetailRequest());\r\n }, []);\r\n\r\n useEffect(() => {\r\n if(nextProps.userDetailData){\r\n let a = [];\r\n const {\r\n data: { result },\r\n } = nextProps.userDetailData;\r\n if(result){\r\n result.user_permissions.map((i) => {\r\n a.push(i.codename);\r\n })\r\n if(isSuperAdmin() || a?.includes(\"add_crop\")){\r\n setHideAddButton(true);\r\n }\r\n setUserDetailData(a);\r\n }\r\n }\r\n },[nextProps.userDetailData])\r\n\r\n useEffect(() => {\r\n if(nextProps.manageCropsListError){\r\n const {\r\n data: { response },\r\n } = nextProps.manageCropsListError;\r\n if(response){\r\n setRecordsCount(0);\r\n setManageCropsList([]);\r\n setPageCount(0);\r\n }\r\n }\r\n },[nextProps.manageCropsListError])\r\n\r\n useEffect(() => {\r\n if (nextProps.manageCropsAddData) {\r\n const {\r\n data: { result },\r\n } = nextProps.manageCropsAddData;\r\n if(result){\r\n showSuccess(result);\r\n setModal(false);\r\n setBreadCrumbsData({country:\"\",state:\"\",district:\"\"})\r\n setSelectedCountry('');\r\n setSelectedState('');\r\n setSelectedDistrict('');\r\n setStateList([]);\r\n setDistrictList([]);\r\n let sideBarInitialValuesList= {\r\n country:\"\",state:\"\",district:\"\"\r\n }\r\n setSideBarInitialValues(sideBarInitialValuesList);\r\n let filterInitialValues = {\r\n season: {\r\n value: '',\r\n label: '',\r\n id: '',\r\n },\r\n breadCrumbs: {},\r\n };\r\n setModalData(filterInitialValues)\r\n setFormData({\r\n season: '',\r\n type: '',\r\n type_id: '',\r\n start_month: '',\r\n start_day: '',\r\n end_month: '',\r\n end_day: ''\r\n })\r\n dispatch(manageCropsListRequest({ page: pageNumber, limit: 10 }));\r\n }\r\n }\r\n }, [nextProps.manageCropsAddData]);\r\n\r\n\r\n useEffect(() => {\r\n if (nextProps.manageCropsDeleteData) {\r\n const {\r\n data: { result },\r\n } = nextProps.manageCropsDeleteData;\r\n if(result){\r\n showSuccess(result);\r\n setPageNumber(1);\r\n dispatch(manageCropsListRequest({page: 1, limit: 10 }));\r\n }\r\n }\r\n }, [nextProps.manageCropsDeleteData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.manageCropsUpdatedata) {\r\n const {\r\n data: { result },\r\n } = nextProps.manageCropsUpdatedata;\r\n if(result){\r\n showSuccess(result);\r\n setModal(false);\r\n setSelectedCountry('');\r\n setSelectedState('');\r\n setSelectedDistrict('');\r\n setStateList([]);\r\n setDistrictList([]);\r\n setAddModalDisabled(true);\r\n let sideBarInitialValuesList= {\r\n country:\"\",state:\"\",district:\"\"\r\n }\r\n setSideBarInitialValues(sideBarInitialValuesList);\r\n setFormData({\r\n season: '',\r\n type: '',\r\n type_id: '',\r\n start_month: '',\r\n start_day: '',\r\n end_month: '',\r\n end_day: ''\r\n })\r\n dispatch(manageCropsListRequest({ page: pageNumber, limit: 10 }));\r\n }\r\n }\r\n }, [nextProps.manageCropsUpdatedata]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(manageCropsAddSuccess({}));\r\n dispatch(manageCropsDeleteSuccess({}));\r\n dispatch(manageCropsListByIdSuccess({}));\r\n dispatch(manageCropsUpdateSuccess({}));\r\n }\r\n },[])\r\n\r\n useEffect(() => {\r\n if (nextProps.manageCropsDataById) {\r\n if (nextProps.manageCropsDataById.data.result) {\r\n const {\r\n data: { result },\r\n } = nextProps.manageCropsDataById;\r\n if (result) {\r\n let filterInitialValues = {\r\n season: {\r\n value: result[0].season_name,\r\n label: result[0].season_name,\r\n id: result[0].season_id,\r\n },\r\n from_month: {\r\n value:result[0].start_month,\r\n label: MONTHS.find((i)=> i.value === result[0].start_month)?.label,\r\n id: result[0].start_month,\r\n },\r\n from_day: {\r\n value:result[0].start_day, \r\n label:result[0].start_day,\r\n id:result[0].start_day,\r\n },\r\n to_month: {\r\n value:result[0].end_month,\r\n label:MONTHS.find((i)=> i.value === result[0].end_month)?.label,\r\n id:result[0].end_month,\r\n },\r\n to_day: {\r\n value:result[0].end_day ,\r\n label:result[0].end_day,\r\n id:result[0].end_day\r\n },\r\n breadCrumbs: result[0].location_name,\r\n };\r\n formData.season = result[0].season_id;\r\n formData.start_day = result[0].start_day;\r\n formData.start_month = result[0].start_month;\r\n formData.end_day = result[0].end_day;\r\n formData.end_month = result[0].end_month;\r\n formData.type = result[0].type;\r\n formData.type_id = result[0].type_id;\r\n formData.id = result[0].id;\r\n setFormData({ ...formData });\r\n setModal(true);\r\n setModalData(filterInitialValues);\r\n }\r\n }\r\n }\r\n }, [nextProps.manageCropsDataById]);\r\n\r\n useEffect(() => {\r\n if (nextProps.CountryListData) {\r\n const { result } = nextProps.CountryListData;\r\n if (result) {\r\n if (selectedDropdown === 'country') {\r\n setCountryList(result);\r\n } else if (selectedDropdown === 'state') {\r\n setStateList(result);\r\n } else if (selectedDropdown === 'district') {\r\n setDistrictList(result);\r\n }\r\n }\r\n }\r\n }, [nextProps.CountryListData]);\r\n useEffect(() => {\r\n if (nextProps.manageCropsList) {\r\n const {\r\n data: { result },\r\n } = nextProps.manageCropsList;\r\n if (result) {\r\n setManageCropsList(result.results);\r\n setRecordsCount(result.results.length);\r\n setPageCount(result.count);\r\n }\r\n }\r\n }, [nextProps.manageCropsList]);\r\n\r\n useEffect(() => {\r\n if (nextProps.manageCropsSeasonsData) {\r\n const {\r\n data: { result },\r\n } = nextProps.manageCropsSeasonsData;\r\n if (result) {\r\n let list = [];\r\n result.map((i) => {\r\n list.push({\r\n value: i.id,\r\n label: i.name,\r\n });\r\n });\r\n setManageCropsSeasonsList(list);\r\n }\r\n }\r\n }, [nextProps.manageCropsSeasonsData]);\r\n\r\n useEffect(() => {\r\n if (formData.season !== '' && formData.start_day !== '' && formData.end_day !== '') {\r\n setAddButtonDisabled(false);\r\n }\r\n }, [formData]);\r\n\r\n useEffect(() => {\r\n if(formData.type_id === ''){\r\n dispatch(manageCropsListRequest({ page: pageNumber, limit: pageLimit }));\r\n }\r\n }, [pageLimit, pageNumber]);\r\n\r\n const handleSelectedSeason = (item) => {\r\n if (editButtonClicked) {\r\n setEditButtonDisabled(false);\r\n }\r\n formData.season = item.id;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleFromMonth = (item) => {\r\n if (editButtonClicked) {\r\n setEditButtonDisabled(false);\r\n }\r\n formData.start_month = item.id;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleFromDay = (item) => {\r\n if (editButtonClicked) {\r\n setEditButtonDisabled(false);\r\n }\r\n formData.start_day = item.id;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleToMonth = (item) => {\r\n if (editButtonClicked) {\r\n setEditButtonDisabled(false);\r\n }\r\n formData.end_month = item.id;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleToDay = (item) => {\r\n if (editButtonClicked) {\r\n setEditButtonDisabled(false);\r\n }\r\n formData.end_day = item.id;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handlePageSize = (value) => {\r\n setPageLimit(value);\r\n setPageNumber(1);\r\n };\r\n\r\n const handleUpdate = () => {\r\n setUpdateClicked(true);\r\n setEditButtonDisabled(true);\r\n dispatch(manageCropsUpdateRequest(formData));\r\n };\r\n\r\n const handleDeleteConfirm = (bool_value, value) => {\r\n setDeleteConfirmModal(bool_value);\r\n if (value === 'yes') {\r\n dispatch(manageCropsDeleteRequest({ id: selectedDeleteRowId }));\r\n }\r\n };\r\n const handleSelectedCountry = (newValue, action) => {\r\n setSelectedState(\"\");\r\n setSelectedDistrict(\"\");\r\n if(newValue.value === 'select'){\r\n setSelectedCountry('');\r\n setStateList([]);\r\n setDistrictList([]);\r\n formData.type = '';\r\n formData.type_id = '';\r\n dispatch(\r\n manageCropsListRequest({\r\n type: '',\r\n type_id: '',\r\n page: 1,\r\n limit: pageLimit,\r\n }),\r\n );\r\n setAddModalDisabled(true);\r\n }else{\r\n setSelectedCountry(newValue);\r\n setSelectedDropdown('state');\r\n formData.type = 'country';\r\n formData.type_id = newValue.value;\r\n setFormData({ ...formData });\r\n dispatch(\r\n manageCropsListRequest({\r\n type: 'country',\r\n type_id: newValue.value,\r\n page: 1,\r\n limit: pageLimit,\r\n }),\r\n );\r\n dispatch(getCountryRequest({ location_type: LOCATION.State, parent_id: newValue.value }));\r\n setAddModalDisabled(false);\r\n setPageNumber(1);\r\n }\r\n };\r\n\r\n const handlePageNumber = (value) => {\r\n formData.type = '';\r\n formData.type_id = '';\r\n setFormData(formData);\r\n setPageNumber(value);\r\n };\r\n\r\n const handleBreadCrumbsData = (values) => {\r\n setBreadCrumbsData(values);\r\n };\r\n\r\n const handleSelectedState = (newValue, action) => {\r\n setSelectedDistrict(\"\");\r\n if(newValue.value === 'select'){\r\n setSelectedState('');\r\n formData.type = 'country';\r\n formData.type_id = selectedCountry.value;\r\n setFormData({ ...formData });\r\n setDistrictList([]);\r\n dispatch(\r\n manageCropsListRequest({\r\n type: 'country',\r\n type_id: selectedCountry.value,\r\n page: pageNumber,\r\n limit: pageLimit,\r\n }),\r\n );\r\n }else{\r\n setSelectedState(newValue);\r\n setSelectedDropdown('district');\r\n formData.type = 'state';\r\n formData.type_id = newValue.value;\r\n setFormData({ ...formData });\r\n dispatch(\r\n manageCropsListRequest({\r\n type: 'state',\r\n type_id: newValue.value,\r\n page: pageNumber,\r\n limit: pageLimit,\r\n }),\r\n );\r\n dispatch(getCountryRequest({ location_type: LOCATION.District, parent_id: newValue.value }));\r\n setAddModalDisabled(false);\r\n }\r\n };\r\n\r\n const handleSelectedDistrict = (newValue, action) => {\r\n if(newValue.value === 'select'){\r\n setSelectedDistrict('');\r\n formData.type = 'state';\r\n formData.type_id = selectedState.value;\r\n setFormData({ ...formData });\r\n dispatch(\r\n manageCropsListRequest({\r\n type: 'state',\r\n type_id: selectedState.value,\r\n page: pageNumber,\r\n limit: pageLimit,\r\n }),\r\n );\r\n }\r\n else{\r\n setSelectedDistrict(newValue);\r\n formData.type = 'district';\r\n formData.type_id = newValue.value;\r\n setFormData({ ...formData });\r\n dispatch(\r\n manageCropsListRequest({\r\n type: 'district',\r\n type_id: newValue.value,\r\n page: pageNumber,\r\n limit: pageLimit,\r\n }),\r\n );\r\n setAddModalDisabled(false);\r\n }\r\n };\r\n\r\n const handleAddClick = (value) => {\r\n if (value === 'add') {\r\n dispatch(manageCropsAddRequest(formData));\r\n setAddModalDisabled(true);\r\n } else if (value === 'cancel') {\r\n setAddModalDisabled(true);\r\n }\r\n };\r\n\r\n const handleSetModal = (value) => {\r\n setModal(value);\r\n setEditButtonClicked(false);\r\n setEditButtonDisabled(true);\r\n setAddButtonDisabled(true);\r\n };\r\n\r\n const handleResetInitialValues = () => {\r\n let filterInitialValues = {\r\n season: { value: '', label: '', id: '' },\r\n breadCrumbs: '',\r\n from_month: '',\r\n from_day: '',\r\n to_month: '',\r\n to_day: '',\r\n };\r\n setModalData(filterInitialValues);\r\n };\r\n\r\n const handleRowClick = (value) => {\r\n setEditButtonClicked(true);\r\n dispatch(manageCropsListByIdRequest({ id: value.id }));\r\n };\r\n\r\n const handleDeleteById = (value) => {\r\n setDeleteConfirmModal(true);\r\n setSelectedDeleteRowId(value.id);\r\n };\r\n\r\n const handleManageCropsBackButton = () => {\r\n history.push(\"/settingsDashboard\");\r\n }\r\n\r\n\r\n return (\r\n {t('MANAGE_CROP.DELETE_MANAGE_CROPS')}
\r\n\r\n
\r\n );\r\n};\r\nexport default ManageCrops;","export default __webpack_public_path__ + \"static/media/dummy_resource_image.27efe332.jpg\";","import React from 'react';\r\nimport { Card, CardBody, Col, Row } from 'reactstrap';\r\nimport { Field, reduxForm, change } from 'redux-form';\r\nimport { useDispatch } from 'react-redux';\r\nimport _ from 'lodash';\r\nimport {\r\n renderReactSelectInputField,\r\n renderTextField,\r\n} from '../../Components/common/renderInputField';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { t } from 'react-multi-lang';\r\nimport { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/md';\r\nimport {DATE_FORMAT} from '../../Components/constants'\r\nimport moment from 'moment';\r\nconst Filter = props => {\r\n const {\r\n isHideBar,\r\n setHideBar,\r\n categoryList,\r\n reset,\r\n handleReset,\r\n } = props;\r\n\r\n // const nextProps = useSelector(state => ({\r\n // isGetAllNewsFeedRequesting: state.NewsFeed.isGetAllNewsFeedRequesting,\r\n // }));\r\n const dispatch = useDispatch();\r\n const renderAPIParameterOptions = (list, action_name) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n if (action_name === 'category') {\r\n let default_option = { value: 'select', label: 'select', id: 'select' };\r\n options.push(default_option);\r\n }\r\n params.map(param => {\r\n let data = {\r\n value: param.name,\r\n label: `${param.name}`,\r\n id: param.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const handleFilterCategoryChange = data => {\r\n dispatch(change('FilterForm', 'filter_type', ''));\r\n props.handleFilterCategoryChange(data);\r\n };\r\n\r\n const handleFilterTitleChange = e => {\r\n props.filterTitleChange(e?.target?.value);\r\n };\r\n const handleFilterDate = e => {\r\n props?.filterDateHandler(e?.target?.value);\r\n };\r\n const handleClearFilters = () => {\r\n reset('FilterForm');\r\n handleReset();\r\n };\r\n return (\r\n <>\r\n {isHideBar ? (\r\n \r\n handleManageCropsBackButton()}/>\r\n
\r\n {t('MANAGE_CROP.MANAGE_CROP')}
\r\n\r\n
\r\n \r\n \r\n {t('FILTER.EXPAND_BAR')}\r\n \r\n setHideBar(!isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n
\r\n ) : (\r\n \r\n onEditorChange(Text)}\r\n />\r\n
\r\n Note:- For better user experience, kindly choose font family:\"National/verdana\" and font size:\"14px\".
\r\n \r\n );\r\n};\r\n\r\nexport default DraftEditor;\r\n","import React from 'react';\r\nimport TimePicker from 'react-time-picker';\r\n\r\nconst EventTimePicker = props => {\r\n const { timeChange, time } = props;\r\n const handleTime = value => {\r\n timeChange(value);\r\n };\r\n\r\n return (\r\n\r\n
\r\n \r\n );\r\n};\r\nexport default reduxForm({\r\n form: 'news-add-form',\r\n enableReinitialize: true,\r\n})(CreateNewsForm);\r\n","export const NEWS_FEED_CATEGORIES_CONST = {\r\n NEWS_FEED_CATEGORIES_REQUEST: 'NEWS_FEED_CATEGORIES_REQUEST',\r\n NEWS_FEED_CATEGORIES_SUCCESS: 'NEWS_FEED_CATEGORIES_SUCCESS',\r\n NEWS_FEED_CATEGORIES_FAILED: 'NEWS_FEED_CATEGORIES_FAILED',\r\n};\r\n\r\nexport const NEWS_FEED_SUB_CATEGORIES_CONST = {\r\n NEWS_FEED_SUB_CATEGORIES_REQUEST: 'NEWS_FEED_SUB_CATEGORIES_REQUEST',\r\n NEWS_FEED_SUB_CATEGORIES_SUCCESS: 'NEWS_FEED_SUB_CATEGORIES_SUCCESS',\r\n NEWS_FEED_SUB_CATEGORIES_FAILED: 'NEWS_FEED_SUB_CATEGORIES_FAILED',\r\n};\r\n\r\nexport const GET_ALL_NEWS_FEED_CONST = {\r\n GET_ALL_NEWS_FEED_REQUEST: 'GET_ALL_NEWS_FEED_REQUEST',\r\n GET_ALL_NEWS_FEED_SUCCESS: 'GET_ALL_NEWS_FEED_SUCCESS',\r\n GET_ALL_NEWS_FEED_FAILED: 'GET_ALL_NEWS_FEED_FAILED',\r\n};\r\n\r\nexport const GET_BY_ID_NEWS_FEED_CONST = {\r\n GET_BY_ID_NEWS_FEED_REQUEST: 'GET_BY_ID_NEWS_FEED_REQUEST',\r\n GET_BY_ID_NEWS_FEED_SUCCESS: 'GET_BY_ID_NEWS_FEED_SUCCESS',\r\n GET_BY_ID_NEWS_FEED_FAILED: 'GET_BY_ID_NEWS_FEED_FAILED',\r\n};\r\n\r\nexport const NEWS_FEED_ADD_CONST = {\r\n NEWS_FEED_ADD_REQUEST: 'NEWS_FEED_ADD_REQUEST',\r\n NEWS_FEED_ADD_SUCCESS: 'NEWS_FEED_ADD_SUCCESS',\r\n NEWS_FEED_ADD_FAILED: 'NEWS_FEED_ADD_FAILED',\r\n};\r\n\r\nexport const NEWS_FEED_DELETE_CONST = {\r\n NEWS_FEED_DELETE_REQUEST: 'NEWS_FEED_DELETE_REQUEST',\r\n NEWS_FEED_DELETE_SUCCESS: 'NEWS_FEED_DELETE_SUCCESS',\r\n NEWS_FEED_DELETE_FAILED: 'NEWS_FEED_DELETE_FAILED',\r\n};\r\n\r\nexport const NEWS_FEED_UPDATE_CONST = {\r\n NEWS_FEED_UPDATE_REQUEST: 'NEWS_FEED_UPDATE_REQUEST',\r\n NEWS_FEED_UPDATE_SUCCESS: 'NEWS_FEED_UPDATE_SUCCESS',\r\n NEWS_FEED_UPDATE_FAILED: 'NEWS_FEED_UPDATE_FAILED',\r\n};\r\n\r\nexport const NEWS_FEED_SUBSCRIBE_CONST = {\r\n NEWS_FEED_SUBSCRIBE_REQUEST: 'NEWS_FEED_SUBSCRIBE_REQUEST',\r\n NEWS_FEED_SUBSCRIBE_SUCCESS: 'NEWS_FEED_SUBSCRIBE_SUCCESS',\r\n NEWS_FEED_SUBSCRIBE_FAILED: 'NEWS_FEED_SUBSCRIBE_FAILED',\r\n};\r\n\r\nexport const NEWS_FEED_CHANGE_STATUS_CONST = {\r\n NEWS_FEED_CHANGE_STATUS_REQUEST: 'NEWS_FEED_CHANGE_STATUS_REQUEST',\r\n NEWS_FEED_CHANGE_STATUS_SUCCESS: 'NEWS_FEED_CHANGE_STATUS_SUCCESS',\r\n NEWS_FEED_CHANGE_STATUS_FAILED: 'NEWS_FEED_CHANGE_STATUS_FAILED',\r\n}","import {\r\n NEWS_FEED_CATEGORIES_CONST,\r\n NEWS_FEED_SUB_CATEGORIES_CONST,\r\n NEWS_FEED_ADD_CONST,\r\n GET_ALL_NEWS_FEED_CONST,\r\n NEWS_FEED_DELETE_CONST,\r\n NEWS_FEED_UPDATE_CONST,\r\n GET_BY_ID_NEWS_FEED_CONST,\r\n NEWS_FEED_SUBSCRIBE_CONST,\r\n NEWS_FEED_CHANGE_STATUS_CONST\r\n} from './newsFeedConsts';\r\n\r\nexport const newsFeedCategoriesRequest = (data) => ({\r\n type: NEWS_FEED_CATEGORIES_CONST.NEWS_FEED_CATEGORIES_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const newsFeedCategoriesSuccess = (response) => ({\r\n type: NEWS_FEED_CATEGORIES_CONST.NEWS_FEED_CATEGORIES_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const newsFeedCategoriesFailed = (error) => ({\r\n type: NEWS_FEED_CATEGORIES_CONST.NEWS_FEED_CATEGORIES_FAILED,\r\n payload: error,\r\n});\r\n\r\nexport const newsFeedSubCategoriesRequest = (data) => ({\r\n type: NEWS_FEED_SUB_CATEGORIES_CONST.NEWS_FEED_SUB_CATEGORIES_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const newsFeedSubCategoriesSuccess = (response) => ({\r\n type: NEWS_FEED_SUB_CATEGORIES_CONST.NEWS_FEED_SUB_CATEGORIES_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const newsFeedSubCategoriesFailed = (error) => ({\r\n type: NEWS_FEED_SUB_CATEGORIES_CONST.NEWS_FEED_SUB_CATEGORIES_FAILED,\r\n payload: error,\r\n});\r\n\r\nexport const newsFeedAddRequest = (data) => ({\r\n type: NEWS_FEED_ADD_CONST.NEWS_FEED_ADD_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const newsFeedAddSuccess = (response) => ({\r\n type: NEWS_FEED_ADD_CONST.NEWS_FEED_ADD_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const newsFeedAddFailed = (error) => ({\r\n type: NEWS_FEED_ADD_CONST.NEWS_FEED_ADD_FAILED,\r\n payload: error,\r\n});\r\n\r\nexport const getAllNewsFeedRequest = (data) => ({\r\n type: GET_ALL_NEWS_FEED_CONST.GET_ALL_NEWS_FEED_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const getAllNewsFeedSuccess = (response) => ({\r\n type: GET_ALL_NEWS_FEED_CONST.GET_ALL_NEWS_FEED_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const getAllNewsFeedFailed = (error) => ({\r\n type: GET_ALL_NEWS_FEED_CONST.GET_ALL_NEWS_FEED_FAILED,\r\n payload: error,\r\n});\r\n\r\nexport const newsFeedDeleteRequest = (data) => ({\r\n type: NEWS_FEED_DELETE_CONST.NEWS_FEED_DELETE_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const newsFeedDeleteSuccess = (response) => ({\r\n type: NEWS_FEED_DELETE_CONST.NEWS_FEED_DELETE_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const newsFeedDeleteFailed = (error) => ({\r\n type: NEWS_FEED_DELETE_CONST.NEWS_FEED_DELETE_FAILED,\r\n payload: error,\r\n});\r\n\r\nexport const newsFeedUpdateRequest = (data) => ({\r\n type: NEWS_FEED_UPDATE_CONST.NEWS_FEED_UPDATE_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const newsFeedUpdateSuccess = (response) => ({\r\n type: NEWS_FEED_UPDATE_CONST.NEWS_FEED_UPDATE_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const newsFeedUpdateFailed = (error) => ({\r\n type: NEWS_FEED_UPDATE_CONST.NEWS_FEED_UPDATE_FAILED,\r\n payload: error,\r\n});\r\n\r\nexport const getByIdNewsFeedRequest = (data) => ({\r\n type: GET_BY_ID_NEWS_FEED_CONST.GET_BY_ID_NEWS_FEED_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const getByIdNewsFeedSuccess = (response) => ({\r\n type: GET_BY_ID_NEWS_FEED_CONST.GET_BY_ID_NEWS_FEED_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const getByIdNewsFeedFailed = (error) => ({\r\n type: GET_BY_ID_NEWS_FEED_CONST.GET_BY_ID_NEWS_FEED_FAILED,\r\n payload: error,\r\n});\r\n\r\n\r\nexport const subscribeNewsFeedRequest = (data) => ({\r\n type: NEWS_FEED_SUBSCRIBE_CONST.NEWS_FEED_SUBSCRIBE_REQUEST,\r\n payload: data,\r\n});\r\n\r\nexport const subscribeNewsFeedSuccess = (response) => ({\r\n type: NEWS_FEED_SUBSCRIBE_CONST.NEWS_FEED_SUBSCRIBE_SUCCESS,\r\n payload: response,\r\n});\r\n\r\nexport const subscribeNewsFeedFailed = (error) => ({\r\n type: NEWS_FEED_SUBSCRIBE_CONST.NEWS_FEED_SUBSCRIBE_FAILED,\r\n payload: error,\r\n});\r\n\r\nexport const newsFeedChangeStatusRequest = (data) => ({\r\n type: NEWS_FEED_CHANGE_STATUS_CONST.NEWS_FEED_CHANGE_STATUS_REQUEST,\r\n payload: data\r\n})\r\n\r\nexport const newsFeedChangeStatusSuccess = (response) => ({\r\n type: NEWS_FEED_CHANGE_STATUS_CONST.NEWS_FEED_CHANGE_STATUS_SUCCESS,\r\n payload: response\r\n})\r\n\r\nexport const newsFeedChangeStatusFailed = (error) => ({\r\n type: NEWS_FEED_CHANGE_STATUS_CONST.NEWS_FEED_CHANGE_STATUS_FAILED,\r\n payload: error\r\n})\r\n\r\n","import React from 'react';\r\nimport { Row, Col, Modal, ModalBody } from 'reactstrap';\r\nimport { AiFillDelete } from 'react-icons/ai';\r\nimport { GoCircleSlash } from 'react-icons/go';\r\nimport { GrFormClose } from 'react-icons/gr';\r\nimport { AiFillCheckCircle } from 'react-icons/ai';\r\nimport { t } from 'react-multi-lang';\r\n\r\nconst AlertModal = props => {\r\n const handleChanges = data => {\r\n if (props.onDeleteClick) {\r\n props.onClick(data.id);\r\n } else if (props.onPublishClick) {\r\n props.onClick(data, { publish: !data.status });\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n {fromListing ? (\r\n
\r\n {t('NEWS_FEED.MODIFIED_NEWS')}
\r\n ) : (\r\n{t('NEWS_FEED.ADD_NEWS')}
\r\n )}\r\n\r\n {\r\n closeRightBar();\r\n }}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {props.onDeleteClick && \r\n {t('NEWS_FEED.ARE_YOU_SURE')}\r\n
\r\n \r\n {props.onPublishClick ? (\r\n <>{t('NEWS_FEED.THIS_WILL')} {props.data.status ? 'Unpublish' : 'Publish'} {t('NEWS_FEED.THE_NEWS_FEED')}\r\n ) : (\r\n <>{t('NEWS_FEED.DELETE_NEWS_TEXT')}\r\n )}\r\n
\r\n \r\n \r\n handleChanges(props.data)}\r\n >\r\n {props?.onDeleteClick\r\n ? t('NEWS_FEED.DELETE')\r\n : props?.onPublishClick && props.data.status\r\n ? t('NEWS_FEED.UNPUBLISH')\r\n : t('NEWS_FEED.PUBLISH')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AlertModal;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport {\r\n Row,\r\n Card,\r\n Col,\r\n} from 'reactstrap';\r\nimport { convertTimeFormat, isStaffUser, isSuperAdmin } from '../../Components/common/utils';\r\nimport { t } from 'react-multi-lang';\r\nimport _ from 'lodash';\r\nimport ReactTooltip from 'react-tooltip';\r\nimport RightArrow from '../../assets/Images/back-button.svg';\r\nimport DummyResourceImage from '../../assets/Images/dummy_resource_image.jpg';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { BiPlus } from 'react-icons/bi';\r\nimport Loader from '../../Components/common/loader';\r\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\r\nimport moment from 'moment';\r\nimport Filter from './Filter';\r\nimport CreateNewsForm from './CreateNewsForm';\r\nimport { showError, showSuccess } from '../../Components/Notifications';\r\nimport { FILE_EXTENSION } from '../../Components/constants/index';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport {\r\n getByIdNewsFeedRequest,\r\n newsFeedDeleteRequest,\r\n newsFeedCategoriesRequest,\r\n newsFeedSubCategoriesRequest,\r\n newsFeedAddRequest,\r\n getAllNewsFeedRequest,\r\n newsFeedUpdateRequest,\r\n newsFeedAddSuccess,\r\n getAllNewsFeedSuccess,\r\n getByIdNewsFeedSuccess,\r\n newsFeedUpdateSuccess,\r\n newsFeedDeleteSuccess,\r\n newsFeedCategoriesSuccess,\r\n newsFeedChangeStatusRequest,\r\n newsFeedChangeStatusSuccess,\r\n newsFeedSubCategoriesSuccess,\r\n} from '../../redux/newsFeed/newsFeedAction';\r\nimport AlertModal from './AlertModal';\r\n\r\nconst ManageNews = props => {\r\n let history = useHistory();\r\n let form = new FormData();\r\n const dispatch = useDispatch();\r\n const [toggleRightBar, setToggleRightBar] = useState(false);\r\n const [isHideBar, setHideBar] = useState(false);\r\n const [newsFeedDataById, setNewsFeedDataById] = useState();\r\n const [categoryList, setCategoryList] = useState([]);\r\n const [pageCount, setPageCount] = useState();\r\n const [subCategoryList, setSubCategoryList] = useState([]);\r\n const [selectedFilterCategory, setSelectedFilterCategory] = useState();\r\n const [filterSubCategoriesList, setFilterSubCategoriesList] = useState();\r\n const [isResourceSelected, setIsResourceSelected] = useState(false);\r\n const [selectedCategory, setSelectedCategory] = useState();\r\n const [typeList, setTypeList] = useState([]);\r\n const [content, setContent] = useState();\r\n const [time, setTime] = useState('');\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [fromListing, setFromListing] = useState(false);\r\n const [fileType, setFileType] = useState();\r\n const [filterChanges, setFilterChanges] = useState({\r\n filterCategory: '',\r\n filterTitle: '',\r\n filterDate: '',\r\n });\r\n const [imageFile, setImageFile] = useState();\r\n const [uploadedFile, setUploadedFile] = useState();\r\n const [saveButtonDisabled, setSaveButtonDisabled] = useState(true);\r\n const [newsFeedList, setNewsFeedList] = useState([]);\r\n const [formReset, setFormReset] = useState();\r\n const [filterCategoryList, setFilterCategoryList] = useState();\r\n const [isPublishModal, setIsPublishModal] = useState(false);\r\n const [isDeleteModal, setIsDeleteModal] = useState(false);\r\n const [updateNewsFeed, setUpdateNewsFeed] = useState('');\r\n const [showChangeStatus, setShowChangeStatus] = useState();\r\n const [formData, setFormData] = useState({\r\n title: '',\r\n description: '',\r\n category_id: '',\r\n sub_category_id: '',\r\n upload_image: '',\r\n external_link: '',\r\n upload_file: '',\r\n start_date: '',\r\n location: '',\r\n publish_status: false,\r\n });\r\n const HIDE_CATEGORIES = {\r\n IWMI_NEWS: 'iwmi_news',\r\n RESOURCES: 'resources',\r\n EXTERNAL_NEWS: 'external_news',\r\n EVENTS: 'events',\r\n };\r\n const handleManageCropsBackButton = () => {\r\n history.push('/settingsDashboard');\r\n };\r\n\r\n const { NewsFeed } = useSelector(state => ({\r\n NewsFeed: state.NewsFeed,\r\n }));\r\n\r\n useEffect(() => {\r\n window.scrollTo({ top: 0, behavior: 'auto' });\r\n if (isSuperAdmin() || isStaffUser()) {\r\n dispatch(newsFeedCategoriesRequest());\r\n dispatch(getAllNewsFeedRequest({ page: pageNumber }));\r\n dispatch(getByIdNewsFeedSuccess({}));\r\n setFromListing(false);\r\n } else {\r\n history.push('/home');\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedCategoriesListData) {\r\n const {\r\n data: { result },\r\n } = NewsFeed.newsFeedCategoriesListData;\r\n if (result.length) {\r\n let a = [];\r\n result.map(i => {\r\n return a.push({\r\n id: i.id,\r\n name: i.category_name,\r\n slug: i.slug,\r\n });\r\n });\r\n let filteredList = a.filter(\r\n data =>\r\n data.slug !== HIDE_CATEGORIES.IWMI_NEWS &&\r\n data.slug !== HIDE_CATEGORIES.EVENTS &&\r\n data.slug !== HIDE_CATEGORIES.RESOURCES,\r\n );\r\n setCategoryList(filteredList);\r\n setFilterCategoryList(filteredList);\r\n }\r\n }\r\n }, [NewsFeed.newsFeedCategoriesListData]);\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedSubCategoriesListData) {\r\n const {\r\n data: { result },\r\n } = NewsFeed.newsFeedSubCategoriesListData;\r\n if (result.length) {\r\n let a = [];\r\n result.map(i => {\r\n return a.push({\r\n id: i.id,\r\n name: i.sub_category_name,\r\n });\r\n });\r\n setSubCategoryList(a);\r\n if (!_.isEmpty(selectedFilterCategory)) setFilterSubCategoriesList(a);\r\n }\r\n }\r\n }, [NewsFeed.newsFeedSubCategoriesListData]);\r\n\r\n useEffect(() => {\r\n if (\r\n !_.isEmpty(formData?.title) &&\r\n !_.isEmpty(formData?.description) &&\r\n !_.isEmpty(formData?.category_id) &&\r\n (selectedCategory === HIDE_CATEGORIES.EXTERNAL_NEWS ||\r\n !_.isEmpty(imageFile) ||\r\n !_.isEmpty(uploadedFile)) &&\r\n ((selectedCategory === HIDE_CATEGORIES.EVENTS && !_.isEmpty(formData?.event_time)) ||\r\n selectedCategory !== HIDE_CATEGORIES.EVENTS)\r\n ) {\r\n setSaveButtonDisabled(false);\r\n } else {\r\n setSaveButtonDisabled(true);\r\n }\r\n }, [formData, imageFile]);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedAddData) {\r\n const {\r\n data: { result },\r\n } = NewsFeed.newsFeedAddData;\r\n if (result) {\r\n showSuccess(result);\r\n setImageFile();\r\n setContent();\r\n setIsResourceSelected(false);\r\n setToggleRightBar(!toggleRightBar);\r\n setSelectedCategory();\r\n setUploadedFile();\r\n setFormData({\r\n title: '',\r\n description: '',\r\n category_id: '',\r\n sub_category_id: '',\r\n upload_image: '',\r\n external_link: '',\r\n upload_file: '',\r\n publish_status: false,\r\n });\r\n setNewsFeedDataById('');\r\n setFormReset(true);\r\n setPageNumber(1);\r\n setNewsFeedList([]);\r\n dispatch(getAllNewsFeedRequest({ page: 1 }));\r\n }\r\n }\r\n }, [NewsFeed.newsFeedAddData]);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedAddDataError || NewsFeed.newsFeedAddDataNetworkError) {\r\n let dataError = NewsFeed.newsFeedAddDataError ? NewsFeed.newsFeedAddDataError : '';\r\n if (dataError) {\r\n let {\r\n data: {\r\n response: { data: responseData },\r\n },\r\n } = dataError;\r\n if (responseData) {\r\n if (responseData?.exception) {\r\n showError(responseData?.exception);\r\n }\r\n }\r\n }\r\n setImageFile();\r\n setContent();\r\n setIsResourceSelected(false);\r\n setToggleRightBar(!toggleRightBar);\r\n setSelectedCategory();\r\n setUploadedFile();\r\n setFormData({\r\n title: '',\r\n description: '',\r\n category_id: '',\r\n sub_category_id: '',\r\n upload_image: '',\r\n external_link: '',\r\n upload_file: '',\r\n publish_status: false,\r\n });\r\n setNewsFeedDataById('');\r\n setFormReset(true);\r\n }\r\n }, [NewsFeed.newsFeedAddDataError, NewsFeed.newsFeedAddDataNetworkError]);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedUpdateDataError || NewsFeed.newsFeedUpdateDataNetworkError) {\r\n let dataError = NewsFeed.newsFeedUpdateDataError ? NewsFeed.newsFeedUpdateDataError : '';\r\n if (dataError) {\r\n let {\r\n data: {\r\n response: { data: responseData },\r\n },\r\n } = dataError;\r\n if (responseData) {\r\n if (responseData?.exception) {\r\n showError(responseData?.exception);\r\n }\r\n }\r\n }\r\n setImageFile();\r\n setContent();\r\n setIsResourceSelected(false);\r\n setToggleRightBar(!toggleRightBar);\r\n setSelectedCategory();\r\n setUploadedFile();\r\n setFormData({\r\n title: '',\r\n description: '',\r\n category_id: '',\r\n sub_category_id: '',\r\n upload_image: '',\r\n external_link: '',\r\n upload_file: '',\r\n publish_status: false,\r\n });\r\n setNewsFeedDataById('');\r\n setFormReset(true);\r\n }\r\n }, [NewsFeed.newsFeedUpdateDataError, NewsFeed.newsFeedUpdateDataNetworkError]);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedUpdateData) {\r\n const {\r\n data: { result },\r\n } = NewsFeed.newsFeedUpdateData;\r\n if (result) {\r\n setIsPublishModal(false);\r\n showSuccess(result);\r\n setImageFile();\r\n setIsResourceSelected();\r\n setSelectedCategory();\r\n setToggleRightBar(!toggleRightBar);\r\n setContent();\r\n setUploadedFile();\r\n setFormData({\r\n title: '',\r\n description: '',\r\n category_id: '',\r\n sub_category_id: '',\r\n upload_image: '',\r\n external_link: '',\r\n upload_file: '',\r\n publish_status: false,\r\n });\r\n setNewsFeedDataById('');\r\n setFormReset(true);\r\n setPageNumber(1);\r\n setNewsFeedList([]);\r\n window.scrollTo({ top: 0, behavior: 'auto' });\r\n dispatch(getAllNewsFeedRequest({ page: 1 }));\r\n }\r\n }\r\n }, [NewsFeed.newsFeedUpdateData]);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedChangeStatusData) {\r\n const {\r\n data: { result },\r\n } = NewsFeed.newsFeedChangeStatusData;\r\n if (result) {\r\n if (showChangeStatus) {\r\n showSuccess(t('NEWS_FEED.SHOW_PUBLISH'));\r\n } else {\r\n showSuccess(t('NEWS_FEED.SHOW_UNPUBLISH'));\r\n }\r\n setIsPublishModal(false);\r\n setImageFile();\r\n setIsResourceSelected();\r\n setSelectedCategory();\r\n setToggleRightBar(false);\r\n setContent();\r\n setUploadedFile();\r\n setFormData({\r\n title: '',\r\n description: '',\r\n category_id: '',\r\n sub_category_id: '',\r\n upload_image: '',\r\n external_link: '',\r\n upload_file: '',\r\n publish_status: false,\r\n });\r\n setFormReset(true);\r\n setPageNumber(1);\r\n setNewsFeedList([]);\r\n dispatch(getAllNewsFeedRequest({ page: 1 }));\r\n }\r\n }\r\n }, [NewsFeed.newsFeedChangeStatusData]);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedDeleteData) {\r\n const {\r\n data: { result },\r\n } = NewsFeed.newsFeedDeleteData;\r\n if (result) {\r\n setIsDeleteModal(false);\r\n showSuccess(result);\r\n setImageFile();\r\n setContent();\r\n setUploadedFile();\r\n setIsResourceSelected();\r\n setSelectedCategory();\r\n setToggleRightBar(false);\r\n setFormData({\r\n title: '',\r\n description: '',\r\n category_id: '',\r\n sub_category_id: '',\r\n upload_image: '',\r\n external_link: '',\r\n upload_file: '',\r\n publish_status: false,\r\n });\r\n setFormReset(true);\r\n setPageNumber(1);\r\n setNewsFeedList([]);\r\n dispatch(getAllNewsFeedRequest({ page: 1 }));\r\n }\r\n }\r\n }, [NewsFeed.newsFeedDeleteData]);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.getAllNewsFeedData) {\r\n let new_list = [];\r\n const {\r\n data: { result },\r\n } = NewsFeed.getAllNewsFeedData;\r\n if (result) {\r\n if (newsFeedList) {\r\n if (pageNumber > 1) {\r\n new_list = newsFeedList.concat(result.results);\r\n } else {\r\n new_list = result.results;\r\n }\r\n } else {\r\n new_list = result.results;\r\n }\r\n setNewsFeedList(new_list);\r\n setPageCount(result?.count);\r\n } else {\r\n setNewsFeedList([]);\r\n }\r\n }\r\n }, [NewsFeed.getAllNewsFeedData]);\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(newsFeedAddSuccess({}));\r\n dispatch(getAllNewsFeedSuccess({}));\r\n dispatch(newsFeedUpdateSuccess({}));\r\n dispatch(getByIdNewsFeedSuccess({}));\r\n dispatch(newsFeedChangeStatusSuccess({}));\r\n dispatch(newsFeedDeleteSuccess({}));\r\n dispatch(newsFeedCategoriesSuccess({}));\r\n dispatch(newsFeedSubCategoriesSuccess({}));\r\n };\r\n }, []);\r\n useEffect(() => {\r\n if (\r\n filterChanges &&\r\n (!_.isEmpty(filterChanges.filterCategory) ||\r\n !_.isEmpty(filterChanges.filterTitle) ||\r\n !_.isEmpty(filterChanges.filterDate))\r\n ) {\r\n dispatch(\r\n getAllNewsFeedRequest({\r\n data: {\r\n newsfeed_category_id: filterChanges?.filterCategory?.id,\r\n title: filterChanges?.filterTitle,\r\n updated_date: filterChanges?.filterDate,\r\n status: '',\r\n },\r\n }),\r\n );\r\n setNewsFeedList([]);\r\n setPageNumber(1);\r\n } else {\r\n dispatch(getAllNewsFeedRequest({ page: 1 }));\r\n }\r\n }, [filterChanges]);\r\n\r\n useEffect(() => {\r\n if (fromListing) {\r\n afterUpdate(NewsFeed.getByIdNewsFeedData);\r\n }\r\n }, [NewsFeed.getByIdNewsFeedData]);\r\n\r\n useEffect(() => {\r\n if (selectedCategory && selectedCategory === HIDE_CATEGORIES.RESOURCES) {\r\n setIsResourceSelected(true);\r\n }\r\n }, [selectedCategory]);\r\n\r\n const afterUpdate = res => {\r\n if (res) {\r\n const {\r\n data: { result },\r\n } = res;\r\n if (result?.length) {\r\n setToggleRightBar(true);\r\n let arr = {\r\n title: result[0]?.title,\r\n description: result[0]?.content,\r\n category: {\r\n id: result[0]?.newsfeed_category_id,\r\n value: result[0]?.newsfeed_category_name,\r\n label: result[0]?.newsfeed_category_name,\r\n },\r\n type: {\r\n id: result[0]?.newsfeed_sub_category_id,\r\n name: result[0]?.newsfeed_sub_category_name,\r\n label: result[0]?.newsfeed_sub_category_name,\r\n },\r\n upload_image: result[0].media_name,\r\n upload_file: result[0].upload_file,\r\n external_link: result[0].external_link,\r\n start_date: result[0].event_date,\r\n location: result[0].event_location,\r\n event_time: result[0].event_time,\r\n publish_status: result[0].status,\r\n };\r\n setContent(result[0].content);\r\n if (result[0]?.event_time) setTime(result[0]?.event_time);\r\n setSelectedCategory(result[0].newsfeed_category_slug);\r\n setNewsFeedDataById(arr);\r\n let fileExtension = result[0].media_name.split('.').pop();\r\n let latest_file;\r\n if (fileExtension === FILE_EXTENSION.MP4) {\r\n latest_file = new File([result[0].media_name], result[0].media_name, {\r\n type: 'video/mp4',\r\n });\r\n setFileType('video');\r\n } else {\r\n latest_file = new File([result[0].media_name], result[0].media_name, {\r\n type: 'img/jpeg',\r\n });\r\n setFileType('image');\r\n }\r\n formData.title = result[0].title;\r\n formData.description = result[0].content;\r\n formData.category_id = result[0].newsfeed_category_id;\r\n formData.sub_category_id = result[0].newsfeed_sub_category_id;\r\n formData.upload_image = '';\r\n formData.newsfeed_id = result[0].id;\r\n formData.external_link = result[0].external_link;\r\n formData.location = result[0].event_location;\r\n formData.start_date = result[0].event_date;\r\n formData.event_time = result[0].event_time;\r\n formData.upload_file = '';\r\n formData.publish_status = result[0].status;\r\n\r\n setFormData({ ...formData });\r\n setImageFile(result[0].media_name);\r\n if (result[0].newsfeed_category_slug === 'resources') {\r\n setUploadedFile(result[0].upload_file);\r\n setIsResourceSelected(true);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const handleSubmit = () => {\r\n if (!saveButtonDisabled) {\r\n if (isResourceSelected) {\r\n form.append('upload_file', formData?.upload_file);\r\n }\r\n if (selectedCategory === HIDE_CATEGORIES.EVENTS) {\r\n form.append('event_date', formData?.start_date);\r\n form.append('event_location', formData?.location);\r\n form.append('event_time', formData?.event_time);\r\n }\r\n form.append('upload_media', formData?.upload_image);\r\n form.append('newsfeed_category_id', formData?.category_id);\r\n form.append('newsfeed_sub_category_id', formData?.sub_category_id);\r\n form.append('title', formData?.title);\r\n form.append('content', formData?.description);\r\n form.append('external_link', formData?.external_link);\r\n form.append('status', `${formData?.publish_status}`);\r\n setFormReset(false);\r\n dispatch(newsFeedAddRequest(form));\r\n }\r\n };\r\n\r\n const handlePublishChanges = (data, { publish }) => {\r\n form.append('newsfeed_id', data.id);\r\n form.append('status', `${_.capitalize(publish)}`);\r\n dispatch(newsFeedChangeStatusRequest(form));\r\n };\r\n\r\n const handleReadMore = data => {\r\n history.push(`/news-feed-details-page?newsFeedId=${data.id}&&from=${'bo'}`);\r\n };\r\n\r\n const handleUpdate = () => {\r\n if (!saveButtonDisabled) {\r\n if (isResourceSelected) {\r\n form.append('upload_file', formData?.upload_file);\r\n }\r\n if (selectedCategory === HIDE_CATEGORIES.EVENTS) {\r\n form.append('event_date', formData?.start_date);\r\n form.append('event_location', formData?.location);\r\n form.append('event_time', formData?.event_time);\r\n }\r\n form.append('upload_media', formData?.upload_image);\r\n form.append('newsfeed_category_id', formData?.category_id);\r\n form.append(\r\n 'newsfeed_sub_category_id',\r\n formData?.sub_category_id ? formData?.sub_category_id : '',\r\n );\r\n form.append('title', formData?.title);\r\n form.append('content', formData?.description);\r\n form.append('newsfeed_id', formData?.newsfeed_id);\r\n form.append('external_link', formData?.external_link);\r\n form.append('status', `${formData?.publish_status}`);\r\n setFormReset(false);\r\n dispatch(newsFeedUpdateRequest(form));\r\n }\r\n };\r\n\r\n const fileHandler = (value, fileExtension) => {\r\n if (fileExtension === FILE_EXTENSION.MP4) {\r\n setFileType('video');\r\n } else {\r\n setFileType('image');\r\n }\r\n\r\n formData.upload_image = value;\r\n setFormData({ ...formData });\r\n setImageFile(URL.createObjectURL(value));\r\n };\r\n\r\n const uploadFileHandler = value => {\r\n formData.upload_file = value;\r\n setFormData({ ...formData });\r\n setUploadedFile(value.name);\r\n };\r\n\r\n const closeRightBar = () => {\r\n setImageFile();\r\n setContent();\r\n setIsResourceSelected(false);\r\n setSelectedCategory();\r\n setUploadedFile();\r\n setFormData({\r\n title: '',\r\n description: '',\r\n category_id: '',\r\n sub_category_id: '',\r\n upload_image: '',\r\n external_link: '',\r\n upload_file: '',\r\n event_time: '',\r\n publish_status: false,\r\n });\r\n setFormReset(true);\r\n setFromListing(false);\r\n setNewsFeedDataById();\r\n dispatch(getByIdNewsFeedSuccess({}));\r\n setToggleRightBar(false);\r\n };\r\n\r\n const handleCategoryChange = data => {\r\n setSubCategoryList([]);\r\n formData.sub_category_id = '';\r\n formData.category_id = data.id;\r\n setFormData({ ...formData });\r\n setSelectedCategory(data.slug);\r\n if (data.slug === HIDE_CATEGORIES.RESOURCES) {\r\n setIsResourceSelected(true);\r\n } else {\r\n setIsResourceSelected(false);\r\n }\r\n dispatch(newsFeedSubCategoriesRequest({ category_id: data?.id }));\r\n };\r\n\r\n const handleSubCategoryChange = data => {\r\n formData.sub_category_id = data.id;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleTitle = data => {\r\n formData.title = data;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleDescription = data => {\r\n setContent(data);\r\n formData.description = data;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleLink = data => {\r\n formData.external_link = data;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const dateHandler = value => {\r\n formData.start_date = value;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const timeHandler = value => {\r\n setTime(value);\r\n formData.event_time = value;\r\n setFormData({ ...formData });\r\n };\r\n const locationHandler = value => {\r\n formData.location = value;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const publishHandler = value => {\r\n formData.publish_status = value;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const handleDelete = value => {\r\n dispatch(newsFeedDeleteRequest({ newsfeed_id: value }));\r\n };\r\n\r\n const handlePublishModal = data => {\r\n setShowChangeStatus(data.status);\r\n setIsPublishModal(!isPublishModal);\r\n if (!isPublishModal) setUpdateNewsFeed(data);\r\n };\r\n\r\n const handleDeleteModal = data => {\r\n setIsDeleteModal(!isDeleteModal);\r\n if (!isDeleteModal) setUpdateNewsFeed(data);\r\n };\r\n\r\n const handleEdit = value => {\r\n setFromListing(true);\r\n dispatch(getByIdNewsFeedRequest({ newsfeed_id: value.id }));\r\n if (HIDE_CATEGORIES.RESOURCES === value.newsfeed_category_slug) {\r\n dispatch(newsFeedSubCategoriesRequest({ category_id: value?.newsfeed_category_id }));\r\n }\r\n };\r\n\r\n const handleFilterCategoryChange = data => {\r\n if (data.id === 'select') {\r\n filterChanges.filterCategory = '';\r\n } else {\r\n filterChanges.filterCategory = data;\r\n }\r\n setFilterChanges({ ...filterChanges });\r\n };\r\n\r\n const handleFilterTitleChange = data => {\r\n filterChanges.filterTitle = data;\r\n setFilterChanges({ ...filterChanges });\r\n };\r\n\r\n const filterDateHandler = data => {\r\n filterChanges.filterDate = data;\r\n setFilterChanges({ ...filterChanges });\r\n };\r\n\r\n const fetchNextNewsFeedData = () => {\r\n setPageNumber(pageNumber + 1);\r\n dispatch(\r\n getAllNewsFeedRequest({\r\n page: pageNumber + 1,\r\n data: {\r\n newsfeed_category_id: filterChanges?.filterCategory?.id,\r\n title: filterChanges?.filterTitle,\r\n updated_date: filterChanges?.filterDate,\r\n status: '',\r\n },\r\n }),\r\n );\r\n };\r\n const handleReset = () => {\r\n setFormData({});\r\n formData.title = '';\r\n formData.description = '';\r\n formData.category_id = '';\r\n formData.sub_category_id = '';\r\n formData.upload_image = '';\r\n formData.external_link = '';\r\n formData.upload_file = '';\r\n formData.start_date = '';\r\n formData.location = '';\r\n formData.publish_status = false;\r\n setFilterChanges(formData);\r\n };\r\n return (\r\n <>\r\n {isPublishModal && (\r\n <>\r\n \r\n {toggleRightBar && (\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\nexport default ManageNews;\r\n","import React from 'react';\r\nimport { ListGroup, ListGroupItem } from 'reactstrap';\r\n\r\nconst Menu = props => {\r\n const { selectedMenuItem, handleSelectedItem, categoriesList } = props;\r\n\r\n const handleSelectedMenuItem = value => {\r\n handleSelectedItem(value);\r\n };\r\n\r\n return (\r\n \r\n {/* \r\n {!isHideBar && (\r\n
*/}\r\n \r\n {/* {!isHideBar ? ( */}\r\n
\r\n\r\n \r\n \r\n {t('FILTER.HIDE_BAR')}\r\n \r\n setHideBar(!isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n {/* ) : (\r\n ''\r\n )} */}\r\n \r\n \r\n {t('FILTER.EXPAND_BAR')}\r\n \r\n setHideBar(!isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n
\r\n )} */}\r\n \r\n \r\n handleManageCropsBackButton()}\r\n />\r\n \r\n \r\n \r\n {\r\n setToggleRightBar(!toggleRightBar);\r\n }}\r\n >\r\n
\r\n {t('NEWS_FEED.MANAGE_NEWS')}
\r\n \r\n{t('NEWS_FEED.ADD_NEWS')}
\r\n \r\n\r\n \r\n {' '}\r\n Loading ... {' '}\r\n \r\n }\r\n >\r\n {newsFeedList?.map((i,index) => {\r\n return (\r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n {NewsFeed.isGetAllNewsFeedRequesting && }\r\n
\r\n {_.isEmpty(newsFeedList) && !NewsFeed.isGetAllNewsFeedRequesting && (\r\n No records found
\r\n )}\r\n\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {t('NEWS_FEED.EDIT')}\r\n \r\n \r\n {t('NEWS_FEED.DELETE')}\r\n \r\n \r\n {t('NEWS_FEED.CLICK_PUBLISH')}\r\n \r\n \r\n {t('NEWS_FEED.CLICK_UNPUBLISH')}\r\n \r\n
\r\n \r\n \r\n \r\n {i?.title}\r\n
\r\n {i?.content?.length > 100 ? (\r\n\r\n handleReadMore(i)}\r\n >\r\n {t('NEWS_FEED.READ_MORE')}\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n {t('NEWS_FEED.CATEGORY')}: {i?.newsfeed_category_name}\r\n
\r\n {!_.isEmpty(i?.newsfeed_sub_category_name) && (\r\n\r\n {t('NEWS_FEED.SUB_CATEGORY')}:{' '}\r\n {i?.newsfeed_sub_category_name}\r\n
\r\n )}\r\n {!_.isEmpty(i?.updated_date) && (\r\n\r\n {t('NEWS_FEED.UPDATED_DATE')}:{' '}\r\n {moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\r\n
\r\n )}\r\n {!_.isEmpty(i?.event_date) && (\r\n\r\n Event Date:{' '}\r\n {moment(i?.event_date).format(DISPLAY_DATE_FORMAT)}\r\n
\r\n )}\r\n {!_.isEmpty(i?.event_time) && (\r\n\r\n Event Time: {convertTimeFormat(i?.event_time)}\r\n
\r\n )}\r\n\r\n {i?.status === true ? (\r\n <>\r\n handlePublishModal(i)}\r\n />\r\n \r\n ) : (\r\n <>\r\n handlePublishModal(i)}\r\n >\r\n \r\n )}\r\n\r\n handleEdit(i)}\r\n id=\"edit-news\"\r\n data-tip\r\n data-for=\"edit_news\"\r\n >\r\n\r\n handleDeleteModal(i)}\r\n id=\"delete-news\"\r\n data-tip\r\n data-for=\"delete_news\"\r\n >\r\n
\r\n \r\n \r\n {categoriesList?.map((i,index) => {\r\n return (\r\n handleSelectedMenuItem(i)}\r\n action\r\n key={index}\r\n >\r\n {i.category_name}\r\n \r\n );\r\n })}\r\n \r\n
\r\n );\r\n};\r\nexport default Menu;\r\n","import React from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { useDispatch } from 'react-redux';\r\nimport {\r\n Card,\r\n CardImg,\r\n CardTitle,\r\n CardSubtitle,\r\n CardBody,\r\n Row,\r\n Col,\r\n} from 'reactstrap';\r\nimport moment from 'moment';\r\nimport {\r\n NEWS_FEED_CATEGORIES,\r\n NEWS_FEED_LENGTH_CONSTANT,\r\n} from '../../../Components/constants/index';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport { DISPLAY_DATE_FORMAT } from '../../../Components/constants';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport { htmlToText } from '../../../Components/common/utils';\r\nimport Loader from '../../../Components/common/loader';\r\nimport { getAllNewsFeedRequest } from '../../../redux/newsFeed/newsFeedAction';\r\n\r\nconst ProjectNews = props => {\r\n const {\r\n newsFeedList,\r\n isNewsFeedRequesting,\r\n pageNumber,\r\n pageCount,\r\n setPageNumber,\r\n selectedMenuItem,\r\n } = props;\r\n\r\n const t = useTranslation();\r\n const history = useHistory();\r\n const dispatch = useDispatch();\r\n\r\n\r\n const handleTitleClick = data => {\r\n history.push(`/news-feed-details-page?newsFeedId=${data.id}`);\r\n };\r\n\r\n const fetchNextTemplateData = selectedMenuItem => {\r\n setPageNumber(pageNumber + 1);\r\n dispatch(\r\n getAllNewsFeedRequest({\r\n page: pageNumber + 1,\r\n data: { newsfeed_category_id: selectedMenuItem?.id, status: 'true' },\r\n }),\r\n );\r\n };\r\n\r\n return (\r\n \r\n
\r\n );\r\n};\r\nexport default ProjectNews;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { Row, Col } from 'reactstrap';\r\nimport axios from 'axios';\r\nimport {\r\n Card,\r\n CardTitle,\r\n CardSubtitle,\r\n CardBody,\r\n ListGroup,\r\n ListGroupItem,\r\n} from 'reactstrap';\r\nimport moment from 'moment';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { DISPLAY_DATE_FORMAT } from '../../../Components/constants';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport {\r\n NEWS_FEED_CATEGORIES,\r\n NEWS_FEED_LENGTH_CONSTANT,\r\n} from '../../../Components/constants/index';\r\nimport Loader from '../../../Components/common/loader';\r\nimport _ from 'lodash';\r\nimport { newsFeedSubCategoriesRequest } from '../../../redux/newsFeed/newsFeedAction';\r\nimport {\r\n EXTERNAL_RSS_FEED_REQUEST_URL,\r\n EXTERNAL_RSS_FIELD_CONST,\r\n} from '../../../Components/constants/index';\r\n\r\nconst IWMINews = props => {\r\n const t = useTranslation();\r\n const dispatch = useDispatch();\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState(0);\r\n const [rssFeedList, setRssFeedList] = useState([]);\r\n const [selectedRssFeedItem, setSelectedRssFeedItem] = useState('');\r\n const [initialRssFeedItemList, setInitialRssFeedItemList] = useState('');\r\n const [selectedRssFeedItemList, setSelectedRssFeedItemList] = useState([]);\r\n const [visibleRssFeedList] = useState({\r\n start: EXTERNAL_RSS_FIELD_CONST.startIndex,\r\n end: EXTERNAL_RSS_FIELD_CONST.endIndex,\r\n });\r\n const nextProps = useSelector(state => ({\r\n NewsFeedSubCategoriesData: state.NewsFeed.newsFeedSubCategoriesListData,\r\n isNewsFeedSubCategoriesRequesting: state.NewsFeed.isNewsFeedSubCategoriesRequesting,\r\n }));\r\n\r\n useEffect(() => {\r\n if (nextProps.NewsFeedSubCategoriesData) {\r\n const {\r\n data: { result },\r\n } = nextProps.NewsFeedSubCategoriesData;\r\n setRssFeedList(result);\r\n if (result?.length) {\r\n result.map((i, index) => {\r\n if (index === 0) {\r\n setSelectedRssFeedItem(i);\r\n }\r\n });\r\n }\r\n }\r\n }, [nextProps.NewsFeedSubCategoriesData]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(props.selectedMenuItem)) {\r\n dispatch(newsFeedSubCategoriesRequest({ category_id: props.selectedMenuItem.id }));\r\n }\r\n }, [props.selectedMenuItem]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(selectedRssFeedItem)) {\r\n axios\r\n .get(EXTERNAL_RSS_FEED_REQUEST_URL.replace('{link}', selectedRssFeedItem.url))\r\n .then(response => {\r\n let data = response?.data;\r\n setInitialRssFeedItemList(data);\r\n let items = data?.items?.slice(0, 6);\r\n setSelectedRssFeedItemList({ ...data, items });\r\n setPageCount(data?.items?.length);\r\n setPageNumber(1);\r\n });\r\n }\r\n }, [selectedRssFeedItem]);\r\n\r\n\r\n const handleSelectedRSSFeedItem = (i, index) => {\r\n setSelectedRssFeedItem(i);\r\n };\r\n\r\n\r\n const fetchNextTemplateData = () => {\r\n let pageNuM = pageNumber + 1;\r\n setPageNumber(pageNuM);\r\n if (initialRssFeedItemList?.items) {\r\n let news_list = [];\r\n let list = _.cloneDeep(selectedRssFeedItemList?.items);\r\n let hasMoreData =\r\n selectedRssFeedItemList?.items?.length + 6 < initialRssFeedItemList?.items?.length\r\n ? true\r\n : false;\r\n let data = initialRssFeedItemList?.items?.slice(\r\n selectedRssFeedItemList?.items?.length,\r\n hasMoreData\r\n ? selectedRssFeedItemList?.items?.length + 6\r\n : initialRssFeedItemList?.items?.length,\r\n );\r\n if (selectedRssFeedItemList?.items?.length) {\r\n if (pageNuM > 1) {\r\n news_list = data?.length ? list?.concat(data) : list;\r\n }\r\n } else {\r\n news_list = list;\r\n }\r\n setSelectedRssFeedItemList({ ...selectedRssFeedItemList, items: news_list });\r\n } else {\r\n setSelectedRssFeedItemList([]);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {NEWS_FEED_CATEGORIES.Project_News}\r\n
\r\n
\r\n \r\n
\r\n {isNewsFeedRequesting && fetchNextTemplateData(selectedMenuItem)}\r\n hasMore={pageNumber * 6 < pageCount ? true : false}\r\n loader={\r\n isNewsFeedRequesting && (\r\n \r\n \r\n )\r\n }\r\n className=\"flex flex-wrap\"\r\n >\r\n \r\n {newsFeedList?.map((i,index) => {\r\n return (\r\n handleTitleClick(i)}>\r\n \r\n \r\n \r\n {i?.title?.length > NEWS_FEED_LENGTH_CONSTANT.SIXTY\r\n ? `${i?.title.substring(0, 60)}... `\r\n : i?.title}\r\n \r\n \r\n \r\n {t('BULLET_IN.PUBLISHED_ON') +\r\n ' ' +\r\n moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n {t('NEWS_FEED.NO_RECORDS')}
\r\n )}\r\n{t('BULLET_IN.LOADING')}
\r\n\r\n {htmlToText(i.content)?.length > 300 ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n {htmlToText(i.content).substring(0, 200)}\r\n ...\r\n handleTitleClick(i)}>\r\n {t('NEWS_FEED.READ_MORE')}\r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\nexport default IWMINews;\r\n","import React, { useState, useEffect } from 'react';\r\nimport {\r\n Card,\r\n CardTitle,\r\n CardSubtitle,\r\n CardBody,\r\n Row,\r\n Col,\r\n} from 'reactstrap';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport { NEWS_FEED_LENGTH_CONSTANT } from '../../../Components/constants';\r\nimport _ from 'lodash';\r\nimport moment from 'moment';\r\nimport { DISPLAY_DATE_FORMAT } from '../../../Components/constants';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport { NEWS_FEED_CATEGORIES, NEWS_FEED_URL_CONSTANT } from '../../../Components/constants/index';\r\nimport { htmlToText } from '../../../Components/common/utils';\r\nimport Loader from '../../../Components/common/loader';\r\n\r\nconst Events = props => {\r\n const t = useTranslation();\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState(0);\r\n const [initialEventsRssFeedData, setInitialEventsRssFeedData] = useState('');\r\n const [eventsRssFeedData, setEventsRssFeedData] = useState();\r\n\r\n useEffect(() => {\r\n const axios = require('axios');\r\n axios.get(NEWS_FEED_URL_CONSTANT.EVENTS_URL).then(response => {\r\n let arrayData = response?.data;\r\n setInitialEventsRssFeedData(arrayData);\r\n let data = arrayData?.items?.slice(0, 6);\r\n setEventsRssFeedData({ ...arrayData, items: data });\r\n setPageCount(arrayData?.items?.length);\r\n setPageNumber(1);\r\n });\r\n }, []);\r\n\r\n const fetchNextTemplateData = () => {\r\n let pageNuM = pageNumber + 1;\r\n setPageNumber(pageNuM);\r\n if (initialEventsRssFeedData?.items) {\r\n let news_list = [];\r\n let list = _.cloneDeep(eventsRssFeedData?.items);\r\n let data = initialEventsRssFeedData?.items?.slice(\r\n eventsRssFeedData?.items?.length,\r\n initialEventsRssFeedData?.items?.length,\r\n );\r\n if (eventsRssFeedData?.items?.length) {\r\n if (pageNuM > 1) {\r\n news_list = data?.length ? list?.concat(data) : list;\r\n }\r\n } else {\r\n news_list = list;\r\n }\r\n setEventsRssFeedData({ ...eventsRssFeedData, items: news_list });\r\n } else {\r\n setEventsRssFeedData([]);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {NEWS_FEED_CATEGORIES.IWMI_News}\r\n
\r\n
\r\n \r\n
\r\n {(props.isNewsFeedRequesting || nextProps.isNewsFeedSubCategoriesRequesting) && \r\n
\r\n fetchNextTemplateData()}\r\n hasMore={pageNumber * 6 < pageCount ? true : false}\r\n className=\"flex flex-wrap\"\r\n >\r\n \r\n {!_.isEmpty(selectedRssFeedItemList) &&\r\n selectedRssFeedItemList?.items?.length &&\r\n selectedRssFeedItemList?.items.map((i,index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {i?.title?.length > NEWS_FEED_LENGTH_CONSTANT.SIXTY\r\n ? `${i?.title.substring(0, 60)}... `\r\n : i?.title}\r\n \r\n \r\n \r\n {t('BULLET_IN.PUBLISHED_ON') +\r\n ' ' +\r\n moment(i?.pubDate).format(DISPLAY_DATE_FORMAT)}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n \r\n \r\n {rssFeedList?.length\r\n ? rssFeedList\r\n ?.slice(visibleRssFeedList.start, visibleRssFeedList.end + 1)\r\n ?.map((item, index) => {\r\n return (\r\n handleSelectedRSSFeedItem(item, index)}\r\n action\r\n key={index}\r\n >\r\n {item.sub_category_name}\r\n \r\n );\r\n })\r\n : ''}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n );\r\n};\r\nexport default Events;\r\n","export default __webpack_public_path__ + \"static/media/share_icon.f4eb1ae2.svg\";","import _ from 'lodash';\r\nimport React, { useEffect, useState } from 'react';\r\nimport axios from 'axios';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { t } from 'react-multi-lang';\r\nimport {\r\n Row,\r\n Col,\r\n ListGroup,\r\n ListGroupItem,\r\n ListGroupItemHeading,\r\n} from 'reactstrap';\r\nimport { MdChevronLeft, MdChevronRight } from 'react-icons/md';\r\nimport ShareIcon from '../../../assets/Images/share_icon.svg';\r\nimport {\r\n EXTERNAL_RSS_FEED_REQUEST_URL,\r\n EXTERNAL_RSS_FIELD_CONST,\r\n NEWS_FEED_CATEGORIES,\r\n NEWS_FEED_KEYWORDS_CONST,\r\n} from '../../../Components/constants/index';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport { newsFeedSubCategoriesRequest } from '../../../redux/newsFeed/newsFeedAction';\r\nimport { newsFeedDateFormat } from '../../../Components/common/utils';\r\nimport Loader from '../../../Components/common/loader';\r\n\r\nconst ExternalNews = props => {\r\n const dispatch = useDispatch();\r\n const [rssFeedList, setRssFeedList] = useState([]);\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState(0);\r\n const [selectedRssFeedItem, setSelectedRssFeedItem] = useState('');\r\n const [initialRssFeedItemList, setInitialRssFeedItemList] = useState('');\r\n const [selectedRssFeedItemList, setSelectedRssFeedItemList] = useState([]);\r\n const [subCategoryIndex, setSubCategoryIndex] = useState(0);\r\n const [visibleRssFeedList] = useState({\r\n start: EXTERNAL_RSS_FIELD_CONST.startIndex,\r\n end: EXTERNAL_RSS_FIELD_CONST.endIndex,\r\n });\r\n\r\n\r\n const { NewsFeed } = useSelector(state => ({\r\n NewsFeed: state.NewsFeed,\r\n }));\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(props.selectedMenuItem)) {\r\n dispatch(newsFeedSubCategoriesRequest({ category_id: props.selectedMenuItem.id }));\r\n }\r\n }, [props.selectedMenuItem]);\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(selectedRssFeedItem)) {\r\n axios\r\n .get(EXTERNAL_RSS_FEED_REQUEST_URL.replace('{link}', selectedRssFeedItem.url))\r\n .then(response => {\r\n let data = response?.data;\r\n data['items'] = data?.items?.filter(item => {\r\n for (let x of NEWS_FEED_KEYWORDS_CONST) {\r\n if (item.title.toLowerCase()?.includes(x.toLowerCase())) {\r\n return item;\r\n }\r\n }\r\n });\r\n setInitialRssFeedItemList(data);\r\n let items = data?.items?.slice(0, 6);\r\n setSelectedRssFeedItemList({ ...data, items });\r\n setPageCount(data?.items?.length);\r\n setPageNumber(1);\r\n });\r\n }\r\n }, [selectedRssFeedItem]);\r\n\r\n useEffect(() => {\r\n if (NewsFeed.newsFeedSubCategoriesListData) {\r\n if (NewsFeed.newsFeedSubCategoriesListData?.data) {\r\n const { result } = NewsFeed.newsFeedSubCategoriesListData?.data;\r\n setRssFeedList(result);\r\n if (result?.length) {\r\n result.map((i, index) => {\r\n if (index === 0) {\r\n setSelectedRssFeedItem(i);\r\n }\r\n });\r\n }\r\n }\r\n }\r\n }, [\r\n NewsFeed.newsFeedSubCategoriesListData,\r\n NewsFeed.isNewsFeedSubCategoriesRequesting,\r\n NewsFeed.newsFeedSubCategoriesListDataError,\r\n ]);\r\n\r\n const handleSelectedRSSFeedItem = (i, index) => {\r\n setSelectedRssFeedItem(i);\r\n setSubCategoryIndex(index);\r\n };\r\n\r\n const handleNext = () => {\r\n setSubCategoryIndex(subCategoryIndex + 1);\r\n setSelectedRssFeedItem(rssFeedList[subCategoryIndex + 1]);\r\n };\r\n\r\n const handlePrevious = () => {\r\n setSubCategoryIndex(subCategoryIndex - 1);\r\n setSelectedRssFeedItem(rssFeedList[subCategoryIndex - 1]);\r\n };\r\n\r\n\r\n const fetchNextTemplateData = () => {\r\n let pageNuM = pageNumber + 1;\r\n setPageNumber(pageNuM);\r\n if (initialRssFeedItemList?.items) {\r\n let news_list = [];\r\n let list = _.cloneDeep(selectedRssFeedItemList?.items);\r\n let hasMoreData =\r\n selectedRssFeedItemList?.items?.length + 6 < initialRssFeedItemList?.items?.length\r\n ? true\r\n : false;\r\n let data = initialRssFeedItemList?.items?.slice(\r\n selectedRssFeedItemList?.items?.length,\r\n hasMoreData\r\n ? selectedRssFeedItemList?.items?.length + 6\r\n : initialRssFeedItemList?.items?.length,\r\n );\r\n if (selectedRssFeedItemList?.items?.length) {\r\n if (pageNuM > 1) {\r\n news_list = data?.length ? list?.concat(data) : list;\r\n }\r\n } else {\r\n news_list = list;\r\n }\r\n setSelectedRssFeedItemList({ ...selectedRssFeedItemList, items: news_list });\r\n } else {\r\n setSelectedRssFeedItemList([]);\r\n }\r\n };\r\n\r\n\r\n return (\r\n \r\n {NEWS_FEED_CATEGORIES.Events}\r\n
\r\n
\r\n \r\n
\r\n {props.isNewsFeedRequesting && fetchNextTemplateData()}\r\n hasMore={pageNumber * 6 < pageCount ? true : false}\r\n className=\"flex flex-wrap\"\r\n >\r\n \r\n {eventsRssFeedData?.items?.reverse().map((i,index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {i?.title?.length > NEWS_FEED_LENGTH_CONSTANT.SIXTY\r\n ? `${i?.title.substring(0, 60)}... `\r\n : i?.title}\r\n \r\n \r\n \r\n {t('BULLET_IN.PUBLISHED_ON') +\r\n ' ' +\r\n moment(i?.pubDate).format(DISPLAY_DATE_FORMAT)}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n \r\n {htmlToText(i.content)?.length > 300 ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n {htmlToText(i.content).substring(0, 200)}\r\n ...\r\n
\r\n \r\n
\r\n );\r\n};\r\nexport default ExternalNews;\r\n","import moment from 'moment';\r\nimport _ from 'lodash';\r\nimport React, { useEffect, useState } from 'react';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport { Row, Card, Col, CardTitle, CardBody, CardSubtitle, CardText } from 'reactstrap';\r\nimport Loader from '../../../Components/common/loader';\r\nimport { DISPLAY_DATE_FORMAT } from '../../../Components/constants/index';\r\nimport {\r\n NEWS_FEED_LENGTH_CONSTANT,\r\n NEWS_FEED_URL_CONSTANT,\r\n} from '../../../Components/constants';\r\nimport { htmlToText } from '../../../Components/common/utils';\r\n\r\nconst Resources = props => {\r\n const { newsFeedList, isNewsFeedRequesting } = props;\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState(0);\r\n const t = useTranslation();\r\n const [subCategoriesFilteredList, setSubCategoriesFilteredList] = useState([]);\r\n const [rssFeedData, setRssFeedData] = useState();\r\n const [secondaryRssFeedData, setSecondaryRssFeedData] = useState();\r\n\r\n useEffect(() => {\r\n const axios = require('axios');\r\n axios.get(NEWS_FEED_URL_CONSTANT.RESOURCE_URL).then(response => {\r\n setSecondaryRssFeedData(response.data);\r\n });\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (secondaryRssFeedData?.items) {\r\n let le = secondaryRssFeedData.items?.slice(0, 6);\r\n le.sort(function(a, b) {\r\n return new Date(b.pubDate) - new Date(a.pubDate);\r\n });\r\n setRssFeedData({ ...secondaryRssFeedData, items: le });\r\n setPageCount(secondaryRssFeedData?.items?.length);\r\n }\r\n }, [secondaryRssFeedData]);\r\n\r\n useEffect(() => {\r\n if (newsFeedList?.length) {\r\n let newList = subCategoriesFilteredList;\r\n newsFeedList.map(i => {\r\n let arr = [];\r\n subCategoriesFilteredList.map(x => arr?.push(x.newsfeed_sub_category_id));\r\n if (arr?.includes(i?.newsfeed_sub_category_id)) {\r\n return newList;\r\n } else {\r\n return newList.push({\r\n newsfeed_sub_category_id: i?.newsfeed_sub_category_id,\r\n newsfeed_sub_category_name: i?.newsfeed_sub_category_name,\r\n });\r\n }\r\n });\r\n setSubCategoriesFilteredList([...newList]);\r\n }\r\n }, [newsFeedList]);\r\n\r\n useEffect(() => {\r\n let subCatIdList = [];\r\n let newList = [];\r\n if (subCategoriesFilteredList?.length) {\r\n subCategoriesFilteredList.map(data => {\r\n subCatIdList = newsFeedList.filter(\r\n i => data.newsfeed_sub_category_id === i.newsfeed_sub_category_id,\r\n );\r\n newList.push({\r\n subCategoryId: data.newsfeed_sub_category_id,\r\n subCategoryName: data.newsfeed_sub_category_name,\r\n resources_list: subCatIdList,\r\n });\r\n });\r\n }\r\n }, [subCategoriesFilteredList]);\r\n\r\n const fetchNextTemplateData = () => {\r\n let pageNuM = pageNumber + 1;\r\n setPageNumber(pageNuM);\r\n if (secondaryRssFeedData?.items) {\r\n let news_list = [];\r\n let list = _.cloneDeep(rssFeedData?.items);\r\n let hasMoreData =\r\n rssFeedData?.items?.length + 6 < secondaryRssFeedData?.items?.length ? true : false;\r\n let data = secondaryRssFeedData?.items?.slice(\r\n rssFeedData?.items?.length,\r\n hasMoreData ? rssFeedData?.items?.length + 6 : secondaryRssFeedData?.items?.length,\r\n );\r\n let updatedData = data;\r\n if (rssFeedData?.items?.length) {\r\n if (pageNuM > 1) {\r\n news_list = updatedData?.length ? list?.concat(updatedData) : list;\r\n }\r\n } else {\r\n news_list = list;\r\n }\r\n news_list.sort(function(a, b) {\r\n return new Date(b.pubDate) - new Date(a.pubDate);\r\n });\r\n setRssFeedData({ ...rssFeedData, items: news_list });\r\n } else {\r\n setRssFeedData([]);\r\n }\r\n };\r\n\r\n return (\r\n \r\n {t('NEWS_FEED.NEWS_SOURCES')} \r\n
\r\n
\r\n \r\n
\r\n {props.isNewsFeedRequesting && \r\n \r\n {props?.newsFeedList?.length &&\r\n props?.newsFeedList?.map(i => {\r\n return (\r\n \r\n \r\n {i?.external_link ? (\r\n {i.newsfeed_sub_category_name\r\n ? `${i.title} | ${i.newsfeed_sub_category_name}`\r\n : i.title}\r\n ) : ({\r\n i.newsfeed_sub_category_name\r\n ? `${i.title} | ${i.newsfeed_sub_category_name}`\r\n : i.title}\r\n )}\r\n \r\n \r\n );\r\n })}\r\n \r\n \r\n
\r\n
\r\n \r\n {NEWS_FEED_CATEGORIES.External_News}\r\n
\r\n
\r\n \r\n
\r\n The following sources provide up-to-date news on Zambia Drought Monitoring System.\r\n The RSS feeds displayed at right provide the latest stories, or click on the links\r\n below for more in-depth coverage.\r\n
\r\n\r\n {' '}\r\n
\r\n \r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n handleSelectedRSSFeedItem(item, index)}\r\n action\r\n key={index}\r\n >\r\n {item.sub_category_name}\r\n \r\n );\r\n })\r\n : ''}\r\n = rssFeedList?.length - 1 ? true : false}\r\n >\r\n \r\n
\r\n \r\n fetchNextTemplateData()}\r\n hasMore={pageNumber * 6 < pageCount ? true : false}\r\n className=\"flex flex-wrap\"\r\n >\r\n \r\n {!_.isEmpty(selectedRssFeedItemList) && selectedRssFeedItemList?.items?.length ? (\r\n selectedRssFeedItemList?.items.map((i,index) => {\r\n return (\r\n \r\n \r\n {' '}\r\n \r\n {i?.title}\r\n \r\n \r\n \r\n );\r\n })\r\n ) : (\r\n \r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {newsFeedDateFormat(i?.pubDate)}\r\n {t('NEWS_FEED.NO_DATA')}
\r\n )}\r\n \r\n
\r\n );\r\n};\r\nexport default Resources;\r\n","import React from 'react';\r\nimport { Row, Col, Input } from 'reactstrap';\r\nimport Cookies from 'js-cookie';\r\nimport ProjectNews from '../ProjectNews/index';\r\nimport IWMINews from '../IWMI-News/index';\r\nimport Events from '../Events/index';\r\nimport ExternalNews from '../ExternalNews/index';\r\nimport Resources from '../Resources/index';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { useTranslation } from 'react-multi-lang';\r\nimport { NEWS_FEED_CATEGORIES } from '../../../Components/constants/index';\r\n\r\nconst NewsFeedContent = props => {\r\n const {\r\n pageNumber,\r\n pageCount,\r\n setPageCount,\r\n setPageNumber,\r\n emailSubmitHandler,\r\n isEmailSubmit,\r\n isSubscribeLoading,\r\n selectedMenuItem,\r\n newsFeedList,\r\n subscribeButtonHandler,\r\n subscribeLoggedInButtonHandler,\r\n emailInputHandler,\r\n isSubscribeClicked,\r\n emailSubscribed,\r\n isNewsFeedRequesting,\r\n } = props;\r\n const t = useTranslation();\r\n\r\n const renderContent = () => {\r\n switch (selectedMenuItem?.category_name) {\r\n case NEWS_FEED_CATEGORIES.Project_News:\r\n return (\r\n \r\n {t('NEWS_FEED.PUBLICATIONS')}\r\n
\r\n
\r\n \r\n
\r\n {isNewsFeedRequesting && fetchNextTemplateData()}\r\n hasMore={pageNumber * 6 < pageCount ? true : false}\r\n loader={\r\n isNewsFeedRequesting && (\r\n \r\n \r\n )\r\n }\r\n className=\"flex flex-wrap\"\r\n >\r\n \r\n {rssFeedData?.items.map((i,index) => {\r\n return (\r\n \r\n \r\n \r\n \r\n {i?.title?.length > NEWS_FEED_LENGTH_CONSTANT.SIXTY\r\n ? `${i?.title.substring(0, 60)}... `\r\n : i?.title}\r\n \r\n \r\n \r\n {t('BULLET_IN.PUBLISHED_ON') +\r\n ' ' +\r\n moment(i?.pubDate).format(DISPLAY_DATE_FORMAT)}\r\n \r\n \r\n \r\n \r\n );\r\n })}\r\n
\r\n \r\n
\r\n {t('BULLET_IN.LOADING')}
\r\n\r\n {htmlToText(i.content)?.length > 170 ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n {htmlToText(i.content).substring(0, 100)}\r\n ...\r\n
\r\n {t('NEWS_FEED.NO_RECORDS')}
;\r\n }\r\n };\r\n\r\n const handleEmailSubmitClick = () => {\r\n emailSubmitHandler();\r\n };\r\n\r\n const handleEmailInput = e => {\r\n emailInputHandler(e.target.value);\r\n };\r\n\r\n const handleSubscribeClick = () => {\r\n subscribeButtonHandler();\r\n };\r\n\r\n const handleSubscribeClickForLoggedIn = () => {\r\n subscribeLoggedInButtonHandler();\r\n };\r\n\r\n return (\r\n <>\r\n\r\n {!Cookies.get('user') ? (\r\n !emailSubscribed &&\r\n (isSubscribeClicked ? (\r\n \r\n {t('NEWS_FEED.SUBSCRIBE_NOW')}\r\n \r\n )}\r\n
\r\n \r\n \r\n handleEmailInput(e)}\r\n />\r\n \r\n \r\n {t('NEWS_FEED.SUBMIT')}\r\n \r\n \r\n
\r\n
\r\n ) : (\r\n \r\n ))\r\n ) : (\r\n {renderContent()}
\r\n \r\n );\r\n};\r\nexport default NewsFeedContent;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { t } from 'react-multi-lang';\r\nimport { Row, Col } from 'reactstrap';\r\nimport Menu from './Menu/index';\r\nimport { useHistory } from 'react-router-dom';\r\nimport NewsFeedContent from './NewsFeedContent/index';\r\nimport Footer from '../landing-page/footer';\r\nimport {\r\n newsFeedCategoriesRequest,\r\n getAllNewsFeedRequest,\r\n subscribeNewsFeedRequest,\r\n subscribeNewsFeedSuccess,\r\n} from '../../redux/newsFeed/newsFeedAction';\r\nimport _ from 'lodash';\r\nimport { isValidEmail,isLogedIn } from '../../Components/common/utils';\r\nimport { showSuccess, showError } from '../../Components/Notifications';\r\nimport Cookies from 'js-cookie';\r\nimport RightArrow from '../../assets/Images/back-button.svg';\r\n\r\nconst NewsFeed = () => {\r\n const dispatch = useDispatch();\r\n const history = useHistory();\r\n const [categoriesList, setCategoriesList] = useState();\r\n const [selectedMenuItem, setSelectedMenuItem] = useState();\r\n const [newsFeedList, setNewsFeedList] = useState([]);\r\n const [email, setEmail] = useState();\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState();\r\n const [emailSubscribed, setEmailSubscribed] = useState(false);\r\n const [isSubscribeClicked, setIsSubscribeClicked] = useState(false);\r\n const [isEmailSubmit, setIsEmailSubmit] = useState(false);\r\n const nextProps = useSelector(state => ({\r\n newsFeedCategoriesListData: state.NewsFeed.newsFeedCategoriesListData,\r\n isGetAllNewsFeedRequesting: state.NewsFeed.isGetAllNewsFeedRequesting,\r\n getAllNewsFeedData: state.NewsFeed.getAllNewsFeedData,\r\n newsFeedSubscribeData: state.NewsFeed.newsFeedSubscribeData,\r\n isNewsFeedSubscribeRequesting: state.NewsFeed.isNewsFeedSubscribeRequesting,\r\n newsFeedSubscribeDataError: state.NewsFeed.newsFeedSubscribeDataError,\r\n }));\r\n\r\n useEffect(() => {\r\n if (!isLogedIn()) {\r\n let path = window.location.pathname\r\n history.push(`/login?prevPath=${path.substring(1,path.length)}`);\r\n }\r\n window.scrollTo({ top: 0, behavior: 'instant' });\r\n dispatch(newsFeedCategoriesRequest());\r\n }, []);\r\n\r\n useEffect(() => {\r\n return () => {\r\n dispatch(subscribeNewsFeedSuccess({}));\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (nextProps.newsFeedCategoriesListData) {\r\n const {\r\n data: { result },\r\n } = nextProps.newsFeedCategoriesListData;\r\n if (result) {\r\n setCategoriesList(result);\r\n setSelectedMenuItem(result[0]);\r\n dispatch(\r\n getAllNewsFeedRequest({\r\n page: pageNumber,\r\n data: { newsfeed_category_id: result[0].id, status: 'true' },\r\n }),\r\n );\r\n }\r\n }\r\n }, [nextProps.newsFeedCategoriesListData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.getAllNewsFeedData) {\r\n let news_list =[];\r\n let list = _.cloneDeep(newsFeedList)\r\n const {\r\n data: { result },\r\n } = nextProps.getAllNewsFeedData;\r\n if (result) {\r\n if(newsFeedList?.length){\r\n if (pageNumber > 1) {\r\n news_list = list?.concat(result.results);\r\n } else {\r\n news_list = result?.results;\r\n }\r\n }\r\n else {\r\n news_list = result?.results;\r\n }\r\n setNewsFeedList(news_list);\r\n setPageCount(result?.count);\r\n } else {\r\n setNewsFeedList([]);\r\n }\r\n }\r\n }, [nextProps.getAllNewsFeedData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.newsFeedSubscribeData) {\r\n const {\r\n data: { result },\r\n } = nextProps.newsFeedSubscribeData;\r\n if (result) {\r\n showSuccess(result);\r\n setIsEmailSubmit(false);\r\n setIsSubscribeClicked(false);\r\n setEmail();\r\n setEmailSubscribed(true);\r\n }\r\n }\r\n }, [nextProps.newsFeedSubscribeData]);\r\n\r\n useEffect(() => {\r\n if (nextProps.newsFeedSubscribeDataError) {\r\n const {\r\n data: { response },\r\n } = nextProps.newsFeedSubscribeDataError;\r\n if (response) {\r\n showError(response?.data?.message[0]);\r\n setIsEmailSubmit(false);\r\n setIsSubscribeClicked(false);\r\n setEmail();\r\n }\r\n }\r\n }, [nextProps.newsFeedSubscribeDataError]);\r\n\r\n const handleSelectedItem = value => {\r\n setNewsFeedList([]);\r\n setPageNumber(1)\r\n setPageCount(0);\r\n dispatch(\r\n getAllNewsFeedRequest({\r\n page: 1,\r\n data: { newsfeed_category_id: value.id, status: 'true' },\r\n }),\r\n );\r\n setSelectedMenuItem(value);\r\n };\r\n\r\n const subscribeButtonHandler = () => {\r\n setIsSubscribeClicked(true);\r\n };\r\n\r\n const subscribeLoggedInButtonHandler = () => {\r\n setIsSubscribeClicked(true);\r\n dispatch(subscribeNewsFeedRequest({ email: Cookies.get('loggedin_user_details') }));\r\n };\r\n\r\n const emailInputHandler = value => {\r\n setEmail(value);\r\n if (isValidEmail(value)) {\r\n setIsEmailSubmit(true);\r\n } else {\r\n setIsEmailSubmit(false);\r\n }\r\n };\r\n\r\n const emailSubmitHandler = () => {\r\n setIsEmailSubmit(false);\r\n dispatch(subscribeNewsFeedRequest({ email: email }));\r\n };\r\n\r\n const handleManageCropsBackButton = () => {\r\n //history.goBack();\r\n history.push(\"/home\")\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n handleManageCropsBackButton()}\r\n />\r\n\r\n \r\n
\r\n
\r\n {t('NEWS_FEED.NEWS_FEED')}
\r\n \r\n\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default NewsFeed;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { t } from 'react-multi-lang';\r\nimport { convertTimeFormat } from '../../Components/common/utils';\r\nimport _ from 'lodash';\r\nimport {\r\n getByIdNewsFeedRequest,\r\n getByIdNewsFeedSuccess,\r\n} from '../../redux/newsFeed/newsFeedAction';\r\nimport moment from 'moment';\r\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\r\nimport Footer from '../landing-page/footer';\r\nimport { Link } from 'react-router-dom';\r\n\r\nconst NewsFeedDetailsPage = props => {\r\n const dispatch = useDispatch();\r\n const history = useHistory();\r\n const [newsFeedDetailsData, setNewsFeedDetailsData] = useState('');\r\n const nextProps = useSelector(state => ({\r\n getByIdNewsFeedData: state.NewsFeed.getByIdNewsFeedData,\r\n }));\r\n\r\n useEffect(() => {\r\n window.scrollTo({ top: 0, behavior: 'instant' });\r\n let search = window.location.search;\r\n let URLParams = new URLSearchParams(search);\r\n let newsFeedId = URLParams.get('newsFeedId');\r\n dispatch(getByIdNewsFeedRequest({ newsfeed_id: newsFeedId }));\r\n return () => {\r\n dispatch(getByIdNewsFeedSuccess({}));\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (nextProps.getByIdNewsFeedData) {\r\n const {\r\n data: { result },\r\n } = nextProps.getByIdNewsFeedData;\r\n if (result?.length) {\r\n setNewsFeedDetailsData(result[0]);\r\n }\r\n }\r\n }, [nextProps.getByIdNewsFeedData]);\r\n \r\n const goBack = ()=>{\r\n let search = window.location.search;\r\n let URLParams = new URLSearchParams(search);\r\n let fromBackOffice=URLParams.get('from');\r\n if (fromBackOffice){\r\n history.push('/manage-newsfeed')\r\n }\r\n else{\r\n history.push('/news-feed')\r\n }\r\n }\r\n\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n {!_.isEmpty(newsFeedDetailsData) ? (\r\n <>\r\n
\r\n \r\n \r\n {newsFeedDetailsData?.newsfeed_category_name}\r\n {' '}\r\n / {newsFeedDetailsData?.title}\r\n
\r\n{newsFeedDetailsData?.title}
\r\n\r\n {/* {newsFeedDetailsData?.newsfeed_category_name}{' '} */}\r\n {newsFeedDetailsData?.newsfeed_sub_category_name\r\n ? newsFeedDetailsData?.newsfeed_sub_category_name\r\n : ''}{' '}\r\n {newsFeedDetailsData?.created_date\r\n ? t('BULLET_IN.PUBLISHED_ON') + ' ' +moment(newsFeedDetailsData?.created_date).format(DISPLAY_DATE_FORMAT)\r\n : ''}\r\n {newsFeedDetailsData?.event_time\r\n ? convertTimeFormat(newsFeedDetailsData?.event_time)\r\n : ''}\r\n
\r\n {newsFeedDetailsData?.external_link\r\n ?Link:\r\n {newsFeedDetailsData?.external_link.length > 40\r\n ? newsFeedDetailsData?.external_link?.slice(0,40) + '...'\r\n : newsFeedDetailsData?.external_link.length}\r\n \r\n
\r\n :\"\"\r\n }\r\n \r\n ) : (\r\nLoading..
\r\n )}\r\n\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\nexport default NewsFeedDetailsPage;\r\n","import React, { useState } from 'react';\r\nimport { Dropdown, DropdownItem, DropdownMenu, DropdownToggle} from 'reactstrap';\r\nimport { Modal, ModalHeader, ModalBody} from 'reactstrap';\r\nimport { t } from 'react-multi-lang';\r\nimport { useHistory } from 'react-router-dom';\r\n\r\nconst BulletDpModal = props => {\r\n const history = useHistory();\r\n const { isOpen, toggleModal, templateList } = props;\r\n const [dropdownOpen, setDropdownOpen] = useState(false);\r\n const [dropDownText] = useState('');\r\n\r\n const toggleDp = () => setDropdownOpen(prevState => !prevState);\r\n\r\n const toggle = () => {\r\n toggleModal();\r\n };\r\n\r\n const handleTemplates = (list, defaultList) => {\r\n history.push({\r\n pathname: '/create-template',\r\n state: [list, defaultList],\r\n });\r\n };\r\n\r\n return (\r\n \r\n \r\n \r\n {t('BULLET_IN.CREATE_BULLETIN_TEMPLATE')}\r\n \r\n \r\n \r\n \r\n {dropDownText ? dropDownText : t('BULLET_IN.SELECT_TEMPLATE_CATEGORY')}\r\n \r\n \r\n \r\n {templateList?.length ? templateList?.map((item, id, array) => {\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BulletDpModal;\r\n","import React from 'react';\r\nimport { Row, Col, Modal, ModalBody } from 'reactstrap';\r\nimport { AiFillDelete } from 'react-icons/ai';\r\nimport { GoCircleSlash } from 'react-icons/go';\r\nimport { GrFormClose } from 'react-icons/gr';\r\nimport { AiFillCheckCircle } from 'react-icons/ai';\r\nimport { t } from 'react-multi-lang';\r\n\r\nconst AlertModal = props => {\r\n const handleChanges = data => {\r\n if (props?.onDeleteClick) {\r\n props?.onClick(data?.id);\r\n } else if (props?.onPublishClick) {\r\n props?.onClick(data, { is_publish: !data?.is_publish });\r\n }\r\n };\r\n\r\n return (\r\n <>\r\n \r\n handleTemplates(array, item)}\r\n >\r\n {item?.label}\r\n \r\n
\r\n );\r\n }):(<>)}\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n Warning
\r\n\r\n {t('BULLET_IN.ARE_YOU_SURE')}\r\n
\r\n \r\n {props?.onPublishClick ? (\r\n <>\r\n {t('BULLET_IN.THIS_WILL')} {props?.data?.is_publish ? 'Unpublish' : 'Publish'}{' '}\r\n {t('BULLET_IN.THE_BULLETIN')}\r\n \r\n ) : (\r\n <>{props?.fromTemplate ? t('BULLET_IN.DELETE_TEMPLATE_USER_TEXT') :t('BULLET_IN.DELETE_USER_TEXT')}\r\n )}\r\n
\r\n \r\n \r\n handleChanges(props?.data)}\r\n >\r\n {props?.onDeleteClick\r\n ? t('USER_GUIDE.DELETE')\r\n : props?.onPublishClick && props?.data?.is_publish\r\n ? t('USER_GUIDE.UNPUBLISH')\r\n : t('USER_GUIDE.PUBLISH')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {dropDownText}\r\n \r\n \r\n \r\n {templateListOptions?.map((item, id) => {\r\n return (\r\n \r\n \r\n\r\n setBulletModal(true)}\r\n >\r\n {t('BULLET_IN.CREATE_TEMPLATE')}\r\n \r\n \r\n
\r\n
\r\n \r\n history.goBack()}\r\n />\r\n\t\t \r\n
\r\n \r\n \r\n {t('BULLET_IN.BULLET_IN_TEMPLATES')}\r\n
\r\n\r\n {\r\n handleDropDownFilter(item);\r\n }}\r\n >\r\n {item?.label}\r\n \r\n
\r\n );\r\n })}\r\n \r\n \r\n {\r\n cardHandler(i);\r\n }}\r\n >\r\n \r\n {t('BULLET_IN.CLICK_TO_DELETE')}\r\n \r\n \r\n \r\n );\r\n }):(<>)}\r\n \r\n {/* */}\r\n
\r\n \r\n );\r\n};\r\n\r\nexport default BulletIn;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport _ from 'lodash';\r\nimport { useHistory } from 'react-router-dom';\r\nimport {\r\n Dropdown,\r\n Card,\r\n CardImg,\r\n CardSubtitle,\r\n CardTitle,\r\n Row,\r\n Col,\r\n} from 'reactstrap';\r\nimport moment from 'moment';\r\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\r\nimport '../../assets/CSS/bulletin.css';\r\nimport { t } from 'react-multi-lang';\r\nimport { Modal, ModalHeader, ModalBody } from 'reactstrap';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport Loader from '../../Components/common/loader';\r\nimport {\r\n getTemplateRequest,\r\n getAllTemplateListRequest,\r\n} from '../../redux/bulletin/bulletinActions';\r\n\r\nconst BulletTemplateModal = props => {\r\n const { isOpen, toggleModal } = props;\r\n\r\n const history = useHistory();\r\n\r\n const dispatch = useDispatch();\r\n\r\n\r\n const [dropdownOpen, setDropdownOpen] = useState(false);\r\n const toggleDp = () => setDropdownOpen(prevState => !prevState);\r\n const [templates, setTemplates] = useState([]);\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState();\r\n const [templateListOptions, setTemplateListOptions] = useState([]);\r\n\r\n const { Bulletin } = useSelector(state => ({\r\n Bulletin: state.Bulletin,\r\n }));\r\n\r\n useEffect(() => {\r\n dispatch(\r\n getTemplateRequest({\r\n page: pageNumber,\r\n data: {},\r\n }),\r\n );\r\n dispatch(getAllTemplateListRequest());\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (Bulletin?.getAllTemplateListData) {\r\n let options = [];\r\n let data = Bulletin.getAllTemplateListData;\r\n if (data) {\r\n const resultData = data?.data;\r\n if (resultData && resultData?.result) {\r\n let list = resultData?.result;\r\n let params = [...list];\r\n if (params?.length) {\r\n params?.map(param => {\r\n let data = {\r\n value: param.name,\r\n label: `${param.name}`,\r\n id: param.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n }\r\n }\r\n }\r\n setTemplateListOptions(options);\r\n }\r\n }, [Bulletin.getAllTemplateListData]);\r\n\r\n useEffect(() => {\r\n if (Bulletin?.getTemplateData?.data) {\r\n let new_list = [];\r\n const {\r\n data: { result },\r\n } = Bulletin.getTemplateData.data;\r\n if (result) {\r\n if (templates) {\r\n if (pageNumber > 1) {\r\n new_list = templates?.concat(result?.results);\r\n } else {\r\n new_list = result?.results;\r\n }\r\n } else {\r\n new_list = result?.results;\r\n }\r\n setTemplates(new_list);\r\n setPageCount(result?.count);\r\n } else {\r\n setTemplates([]);\r\n }\r\n }\r\n }, [Bulletin.getTemplateData]);\r\n\r\n const toggle = () => {\r\n toggleModal();\r\n };\r\n\r\n const fetchNextTemplateData = () => {\r\n setPageNumber(pageNumber + 1);\r\n dispatch(\r\n getTemplateRequest({\r\n page: pageNumber + 1,\r\n data: {},\r\n }),\r\n );\r\n };\r\n\r\n const cardHandler = data => {\r\n let list = templateListOptions;\r\n let defaultList = {\r\n label: data?.category_name,\r\n value: data?.category_name,\r\n id: data?.category_id,\r\n };\r\n history.push({\r\n pathname: '/create-bulletin',\r\n state: [list, defaultList, data],\r\n });\r\n };\r\n\r\n return (\r\n {Bulletin.isGetTemplateRequesting &&
\r\n {_.isEmpty(templates) && !Bulletin.isGetTemplateRequesting && _.isEmpty(Bulletin?.getTemplateData) && (\r\n {Bulletin?.getTemplateDataError?.data?.response?.data?.message}
\r\n )}\r\n{t('BULLET_IN.LOADING')}
\r\n \r\n )\r\n }\r\n >\r\n {templates?.length ? templates?.map(i => {\r\n return (\r\n\r\n {i?.title} \r\n \r\n {i?.category_name}\r\n \r\n \r\n {moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\r\n \r\n {\r\n handleDeleteModal(e, i);\r\n }}\r\n id=\"delete-bulletin\"\r\n data-tip\r\n data-for=\"delete-bulletin\"\r\n >\r\n
\r\n \r\n \r\n \r\n {t('BULLET_IN.BULLET_IN_TEMPLATES')}\r\n \r\n \r\n \r\n \r\n \r\n {\r\n cardHandler(i);\r\n }}\r\n >\r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default BulletTemplateModal;\r\n","import React, { useState } from 'react';\r\nimport { Modal, ModalBody, ModalHeader, FormGroup, Label, Input, Button } from 'reactstrap';\r\nimport { t } from 'react-multi-lang';\r\n\r\nconst UploadBulletinTypeModal = (props) => {\r\n const { isOpen, toggleModal, setBulletModal, handleCreateBulletinPdf } = props;\r\n\r\n const fromTemplate = 'fromTemplate';\r\n const fromPdf = 'fromPdf';\r\n const [selectedType, setSelectedType] = useState(fromTemplate);\r\n const toggle = () => {\r\n toggleModal();\r\n };\r\n \r\n const handleChange = (e) => {\r\n setSelectedType(e.target.value);\r\n };\r\n const handleClick = () => {\r\n if (selectedType === fromTemplate) {\r\n setBulletModal(true);\r\n toggleModal();\r\n } else if (selectedType === fromPdf) {\r\n handleCreateBulletinPdf();\r\n toggleModal();\r\n }\r\n };\r\n return (\r\n <>\r\n {Bulletin.isGetTemplateRequesting &&
\r\n {_.isEmpty(templates) && !Bulletin.isGetTemplateRequesting && (\r\n \r\n {t('BULLET_IN.NO_RECORDS_FOUND')}\r\n
\r\n )}\r\n{t('BULLET_IN.LOADING')}
\r\n \r\n )\r\n }\r\n scrollableTarget=\"infinteScrollReference\"\r\n >\r\n {templates?.length ? templates?.map(i => {\r\n return (\r\n\r\n \r\n {i?.title === String(i?.title).toUpperCase()\r\n ? i?.title?.length > 16\r\n ? i?.title?.substring(0, 16) + '...'\r\n : i?.title\r\n : i?.title?.length > 21\r\n ? i?.title?.substring(0, 21) + '...'\r\n : i?.title}\r\n \r\n \r\n {i?.category_name}\r\n \r\n \r\n {moment(i?.created_date).format(DISPLAY_DATE_FORMAT)}\r\n \r\n
\r\n \r\n \r\n );\r\n }):(<>)}\r\n \r\n handleChange(e)}>\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n Next\r\n \r\n
\r\n \r\n
\r\n {textAreaCount}/500
\r\n\r\n \r\n history.push('/settingsDashboard')}\r\n />\r\n
\r\n
\r\n {t('BULLET_IN.ALL_BULLETINS')}
\r\n \r\n\r\n history.push('/create-bulletinPdf')}\r\n >\r\n {t('BULLET_IN.CREATE_BULLETINS')}\r\n \r\n
\r\n }\r\n \r\n {Bulletin.isGetAllBulletinRequesting &&
\r\n {_.isEmpty(dataList) &&\r\n !Bulletin.isGetAllBulletinRequesting &&\r\n Bulletin.getAllBulletinData && (\r\n \r\n {t('BULLET_IN.NO_RECORDS_FOUND')}\r\n
\r\n )}\r\n{t('BULLET_IN.LOADING')}
\r\n \r\n )\r\n }\r\n className=\"flex flex-wrap\"\r\n >\r\n\r\n \r\n {bulletModal && (\r\n
\r\n
\r\n \r\n \r\n );\r\n};\r\nexport default BackOffcieBulletin;\r\n","export default __webpack_public_path__ + \"static/media/user_guide_home_header.c4b3fb8e.png\";","import { useSelector, useDispatch } from 'react-redux';\r\nimport HeaderImage from '../../assets/Images/user_guide_home_header.png';\r\nimport { getAllTopicsListRequest } from '../../redux/actions';\r\nimport React, { useState, useEffect } from 'react';\r\nimport { Row, Col, Card } from 'reactstrap';\r\nimport { htmlToText } from '../../Components/common/utils';\r\nimport '../../assets/CSS/StaticSidebar.css';\r\nimport _ from 'lodash';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { t } from 'react-multi-lang';\r\nimport Footer from '../landing-page/footer';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\nimport Loader from '../../Components/common/loader';\r\nimport {isLogedIn } from '../../Components/common/utils';\r\n\r\nconst UserGuide = (props) => {\r\n let history = useHistory();\r\n const dispatch = useDispatch();\r\n\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState();\r\n const [getAllTopicsList, setGetAllTopicsList] = useState([]);\r\n const [searchContentWordEntered, setSearchContentWordEntered] = useState('');\r\n const { UserGuideState } = useSelector((state) => ({\r\n UserGuideState: state.UserGuide,\r\n }));\r\n\r\n useEffect(() => {\r\n if ( !isLogedIn()) {\r\n let path = window.location.pathname\r\n history.push(`/login?prevPath=${path.substring(1,path.length)}`);\r\n }\r\n setGetAllTopicsList([]);\r\n window.scrollTo({ top: 0, behavior: 'instant' });\r\n dispatch(getAllTopicsListRequest({ page: 1 }));\r\n return () => {\r\n setGetAllTopicsList([]);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (UserGuideState?.getAllTopicsListData?.data?.data?.result) {\r\n let new_list = [];\r\n const {\r\n data: { result },\r\n } = UserGuideState?.getAllTopicsListData?.data;\r\n if (result) {\r\n if (getAllTopicsList) {\r\n if (pageNumber > 1) {\r\n new_list = getAllTopicsList.concat(result.results);\r\n } else {\r\n new_list = result.results;\r\n }\r\n } else {\r\n new_list = result.results;\r\n }\r\n setGetAllTopicsList(new_list);\r\n setPageCount(result?.count);\r\n } else {\r\n setGetAllTopicsList([]);\r\n }\r\n }\r\n }, [UserGuideState.getAllTopicsListData]);\r\n\r\n const handleSearchContent = (e) => {\r\n const searchContent = e.target.value;\r\n setSearchContentWordEntered(searchContent);\r\n };\r\n\r\n const handleKeyPress = (event) => {\r\n if (event.key === 'Enter' && event.target.value?.length !== 0) {\r\n history.push({\r\n pathname: '/user-guide-search',\r\n search: `?q=${searchContentWordEntered}`,\r\n });\r\n }\r\n };\r\n\r\n const handleClick = () => {\r\n if (searchContentWordEntered?.length !== 0) {\r\n history.push({\r\n pathname: '/user-guide-search',\r\n search: `?q=${searchContentWordEntered}`,\r\n });\r\n }\r\n };\r\n\r\n const fetchNextTemplateData = () => {\r\n setPageNumber(pageNumber + 1);\r\n dispatch(\r\n getAllTopicsListRequest({\r\n page: pageNumber + 1,\r\n }),\r\n );\r\n };\r\n\r\n\r\n const renderTools = () => {\r\n return (\r\n <>\r\n {getAllTopicsList?.length\r\n ? getAllTopicsList.map((item) => {\r\n return (\r\n \r\n \r\n {\r\n handlePublishModal(e, i);\r\n }}\r\n />\r\n )}\r\n \r\n {t('BULLET_IN.CLICK_TO_PUBLISH')}\r\n \r\n \r\n {t('BULLET_IN.CLICK_TO_DELETE')}\r\n \r\n \r\n {t('BULLET_IN.CLICK_TO_REJECT')}\r\n \r\n \r\n {t('BULLET_IN.CLICK_TO_PREVIEW')}\r\n \r\n \r\n {t('BULLET_IN.CLICK_TO_APPROVE')}\r\n \r\n \r\n
\r\n \r\n );\r\n })\r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n {i?.topic?.length\r\n ? i?.topic?.length > 29\r\n ? i?.topic?.substring(0, 29) + '...'\r\n : i?.topic\r\n : ''}\r\n \r\n \r\n {moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\r\n \r\n {!i?.is_publish ? (\r\n activeTab !== BULLETIN_TAB_CONSTS.REJECTED ? (\r\n activeTab === BULLETIN_TAB_CONSTS.APPROVED ? (\r\n
{' '}\r\n {(isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[4])) &&\r\n activeTab === BULLETIN_TAB_CONSTS.APPROVED &&\r\n !i?.is_publish && (\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n )\r\n ) : (\r\n \r\n {t('BULLET_IN.REJECTED')}\r\n
\r\n )\r\n ) : activeTab !== BULLETIN_TAB_CONSTS.REJECTED ? (\r\n \r\n
\r\n ) : (\r\n \r\n {t('BULLET_IN.REJECTED')}\r\n
\r\n )}\r\n \r\n {\r\n handlePreview(e, i);\r\n }}\r\n // loading={Bulletin?.isPreviewBulletinRequesting}\r\n id=\"eye-bulletin\"\r\n data-tip\r\n data-for=\"eye-bulletin\">\r\n\r\n {(isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[3])) &&\r\n activeTab === BULLETIN_TAB_CONSTS.PENDING && (\r\n {\r\n handleApprove(e, i);\r\n }}\r\n // loading={Bulletin.isApproveRejectRequesting && approveButtonLoader}\r\n id=\"approve-bulletin\"\r\n data-tip\r\n data-for=\"approve-bulletin\">)}\r\n\r\n {(isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[3])) && \r\n activeTab !== BULLETIN_TAB_CONSTS.REJECTED && (\r\n {\r\n handleReject(e, i);\r\n }}\r\n id=\"ban-bulletin\"\r\n data-tip\r\n data-for=\"ban-bulletin\">\r\n )}\r\n\r\n {(isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[2])) &&\r\n activeTab === BULLETIN_TAB_CONSTS.PENDING && (\r\n {\r\n handleDeleteModal(e, i);\r\n }}\r\n id=\"delete-bulletin\"\r\n data-tip\r\n data-for=\"delete-bulletin\"\r\n >\r\n )}\r\n
\r\n \r\n
\r\n \r\n \r\n );\r\n })\r\n : ''}\r\n \r\n );\r\n };\r\n\r\n return (\r\n <>\r\n {item?.name}
\r\n\r\n {htmlToText(item.description)?.length > 100 ? (\r\n\r\n
\r\n ) : (\r\n \r\n )}\r\n \r\n {htmlToText(item.description).substring(0, 100)}\r\n ...\r\n
\r\n \r\n 
\r\n
\r\n\r\n {t('USER_GUIDE.SOUTH_ASIA_TEXT')}
\r\n \r\n
\r\n \r\n \r\n
\r\n {UserGuideState.isGetAllTopicsListRequesting &&
\r\n {_.isEmpty(getAllTopicsList) && !UserGuideState.isGetAllTopicsListRequesting && (\r\n \r\n {t('USER_GUIDE.NO_RECORDS_FOUND')}\r\n
\r\n )}\r\n{t('BULLET_IN.LOADING')}
\r\n \r\n )\r\n }\r\n >\r\n\r\n {renderTools()}
\r\n
\r\n \r\n {/* hide this section in future */}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default UserGuide;\r\n","var _circle, _path;\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nimport * as React from \"react\";\nfunction SvgUserGuide(_ref, svgRef) {\n let {\n title,\n titleId,\n ...props\n } = _ref;\n return /*#__PURE__*/React.createElement(\"svg\", _extends({\n width: 80,\n height: 80,\n viewBox: \"0 0 80 80\",\n fill: \"none\",\n xmlns: \"http://www.w3.org/2000/svg\",\n ref: svgRef,\n \"aria-labelledby\": titleId\n }, props), title ? /*#__PURE__*/React.createElement(\"title\", {\n id: titleId\n }, title) : null, _circle || (_circle = /*#__PURE__*/React.createElement(\"circle\", {\n cx: 40,\n cy: 40,\n r: 40,\n fill: \"#29A091\"\n })), _path || (_path = /*#__PURE__*/React.createElement(\"path\", {\n d: \"M44.24 20.7854C44.9667 20.5907 45.7248 20.5411 46.4707 20.6393C47.2167 20.7376 47.936 20.9819 48.5876 21.3581C49.2391 21.7344 49.8102 22.2354 50.2682 22.8323C50.7261 23.4293 51.062 24.1107 51.2566 24.8375L56.9191 45.9667C57.1138 46.6934 57.1634 47.4515 57.0652 48.1974C56.9669 48.9434 56.7227 49.6627 56.3464 50.3143C55.9701 50.9658 55.4692 51.5369 54.8722 51.9948C54.2752 52.4528 53.5938 52.7887 52.867 52.9833L39.79 56.4896C39.0629 56.6849 38.3045 56.735 37.558 56.637C36.8116 56.539 36.0918 56.2949 35.4397 55.9186C34.7877 55.5423 34.2162 55.0411 33.758 54.4438C33.2997 53.8465 32.9637 53.1647 32.7691 52.4375L27.1087 31.3083C26.914 30.5815 26.8644 29.8235 26.9627 29.0775C27.0609 28.3316 27.3052 27.6123 27.6815 26.9607C28.0577 26.3091 28.5587 25.7381 29.1557 25.2801C29.7526 24.8222 30.434 24.4863 31.1608 24.2916L44.24 20.7854ZM27.0879 39.2875L30.7587 52.975C31.1194 54.3319 31.8407 55.5659 32.8462 56.5458L31.9233 56.4958C30.4061 56.4161 28.9826 55.7371 27.9661 54.608C26.9495 53.4789 26.423 51.9922 26.5025 50.475L27.0879 39.2875ZM45.0483 23.8041L31.9691 27.3125C31.3024 27.4912 30.7339 27.9273 30.3885 28.525C30.0432 29.1227 29.9493 29.8331 30.1275 30.5L35.7879 51.6312C35.8764 51.9616 36.0291 52.2713 36.2372 52.5427C36.4454 52.814 36.705 53.0417 37.0012 53.2127C37.2974 53.3837 37.6244 53.4947 37.9635 53.5394C38.3025 53.584 38.6471 53.5614 38.9775 53.4729L52.0587 49.9667C52.7255 49.7879 53.294 49.3518 53.6393 48.7541C53.9846 48.1564 54.0785 47.446 53.9004 46.7791L48.2379 25.6458C48.0591 24.9791 47.623 24.4106 47.0253 24.0652C46.4276 23.7199 45.7173 23.626 45.0504 23.8041H45.0483ZM25.1608 36.2083L24.4212 50.3666C24.3441 51.8208 24.6712 53.2042 25.3045 54.4083L24.442 54.0729C23.7396 53.8033 23.0971 53.398 22.5513 52.8801C22.0055 52.3622 21.567 51.7418 21.261 51.0545C20.9549 50.3671 20.7873 49.6262 20.7676 48.8741C20.7479 48.1219 20.8765 47.3732 21.1462 46.6708L25.1608 36.2083ZM35.292 29.6541C35.5563 29.5833 35.832 29.5652 36.1033 29.6009C36.3745 29.6365 36.6362 29.7253 36.8731 29.8621C37.1101 29.9988 37.3178 30.1809 37.4844 30.398C37.651 30.615 37.7733 30.8628 37.8441 31.1271C37.915 31.3914 37.9331 31.667 37.8974 31.9383C37.8617 32.2096 37.773 32.4712 37.6362 32.7082C37.4994 32.9451 37.3173 33.1529 37.1003 33.3195C36.8832 33.4861 36.6355 33.6083 36.3712 33.6791C36.1069 33.75 35.8313 33.7681 35.56 33.7324C35.2887 33.6968 35.0271 33.608 34.7901 33.4712C34.3115 33.195 33.9622 32.74 33.8191 32.2062C33.676 31.6725 33.7508 31.1037 34.027 30.6251C34.3033 30.1465 34.7583 29.7973 35.292 29.6541Z\",\n fill: \"white\"\n })));\n}\nconst ForwardRef = /*#__PURE__*/React.forwardRef(SvgUserGuide);\nexport default __webpack_public_path__ + \"static/media/user-guide.dc9200ee.svg\";\nexport { ForwardRef as ReactComponent };","import React from 'react';\r\nimport { Editor } from '@tinymce/tinymce-react';\r\n\r\nconst DraftEditor = props => {\r\n const { content, onEditorChange } = props;\r\n return (\r\n <>\r\n \r\n onEditorChange(Text)}\r\n init={{\r\n height: '26rem',\r\n selector: '#tiny-editor',\r\n plugins: [\r\n 'advlist autolink lists link image charmap print preview anchor',\r\n 'searchreplace visualblocks code fullscreen',\r\n 'insertdatetime media paste imagetools wordcount',\r\n ],\r\n toolbar:\r\n 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | link image | code',\r\n image_title: true,\r\n file_picker_types: 'image',\r\n file_picker_callback: function(cb) {\r\n var input = document.createElement('input');\r\n input.setAttribute('type', 'file');\r\n input.setAttribute('accept', 'image/*');\r\n input.onchange = function() {\r\n var file = this.files[0];\r\n var reader = new FileReader();\r\n reader.onload = () => {\r\n var id = 'blobid' + new Date().getTime();\r\n var blobCache = window.tinymce.activeEditor.editorUpload.blobCache;\r\n var base64 = reader.result.split(',')[1];\r\n var blobInfo = blobCache.create(id, file, base64);\r\n blobCache.add(blobInfo);\r\n cb(blobInfo.blobUri(), { title: file.name });\r\n };\r\n reader.readAsDataURL(file);\r\n };\r\n input.click();\r\n },\r\n }}\r\n />\r\n
\r\n Note:- For better user experience, kindly choose font family:\"National/verdana\" and font size:\"14px\".
\r\n \r\n );\r\n};\r\n\r\nexport default DraftEditor;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { Row, Col, Card, Container } from 'reactstrap';\r\nimport { Field, reduxForm, change } from 'redux-form';\r\nimport { useHistory } from 'react-router-dom';\r\nimport RightArrow from '../../assets/Images/back-button.svg';\r\nimport _ from 'lodash';\r\nimport Select from 'react-select';\r\nimport {\r\n renderReactSelectInputField,\r\n renderReactUserInputField\r\n} from '../../Components/common/renderInputField';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { t } from 'react-multi-lang';\r\nimport DraftEditor from './DraftEditor';\r\nimport {\r\n addUserGuideRequest,\r\n addUserGuideSuccess,\r\n getAllTopicsRequest,\r\n getAllUserGuideRequest,\r\n updateUserGuideRequest,\r\n updateUserGuideSuccess,\r\n addUserGuideFailed,\r\n updateUserGuideFailed\r\n} from '../../redux/userGuide/userGuideActions';\r\nimport { showError } from '../../Components/Notifications';\r\nconst place=[\r\n {id:1,label: \"Before\" ,value:\"before\"},\r\n {id:2,label: \"After\" ,value:\"after\"},\r\n \r\n]\r\n\r\nconst CreateUserGuidePage = props => {\r\n const { reset, formUserGuideData, fromListing, categoryList } = props;\r\n let history = useHistory();\r\n const dispatch = useDispatch();\r\n let formSubmissionDataHandler = new FormData();\r\n\r\n const [selectedOption, setSelectedOption] = useState();\r\n const [subTopicOptions, setSubTopicOptions] = useState();\r\n const [saveButtonDisabled, setSaveButtonDisabled] = useState(true);\r\n const [formReset, setFormReset] = useState(false);\r\n const [topic,setTopic]=useState(false)\r\n const [subtopic,setSubtopic]=useState(false)\r\n const [defaultValue,setDefaultValue] = useState('')\r\n const [updateButtonDisable,setUpdateButtonDisable] = useState(false)\r\n const [isSubTopicOptionsEmpty,setIsSubTopicOptionsEmpty]= useState(true)\r\n const [formData, setFormData] = useState({\r\n topic: '',\r\n topic_id: '',\r\n sub_topic: '',\r\n level:'',\r\n before_sub_topic:'',\r\n before_sub_topic_id: '',\r\n title: '',\r\n description: '',\r\n publish_status: false,\r\n });\r\n\r\n const { UserGuide } = useSelector(state => ({\r\n UserGuide: state.UserGuide,\r\n }));\r\n\r\n useEffect(() => {\r\n setFormReset(false);\r\n dispatch(getAllTopicsRequest());\r\n return () => {\r\n dispatch(updateUserGuideSuccess({}));\r\n dispatch(addUserGuideSuccess({}));\r\n dispatch(updateUserGuideFailed({}))\r\n dispatch(addUserGuideFailed({}))\r\n };\r\n\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (UserGuide?.addUserGuideDataError) {\r\n let {\r\n data: { response },\r\n } = UserGuide?.addUserGuideDataError;\r\n showError(UserGuide?.addUserGuideDataError?.data?.response?.data?.message[0]);\r\n }\r\n }, [UserGuide.addUserGuideDataError]);\r\n\r\nuseEffect(() => {\r\n if (UserGuide?.updateUserGuideDataError) {\r\n let {\r\n data: { response },\r\n } = UserGuide?.updateUserGuideDataError;\r\n showError(UserGuide?.updateUserGuideDataError?.data?.response?.data?.message[0]);\r\n }\r\n}, [UserGuide.updateUserGuideDataError]);\r\n\r\n useEffect(() => {\r\n if (formUserGuideData) {\r\n setFormData(formUserGuideData);\r\n }\r\n }, [formUserGuideData]);\r\n\r\n useEffect(() => {\r\n renderAPISubTopicOptions(categoryList, selectedOption);\r\n }, [selectedOption]);\r\n\r\n useEffect(()=>{\r\n if (_.isEmpty(subTopicOptions)){\r\n setIsSubTopicOptionsEmpty(true)\r\n }\r\n else{\r\n setIsSubTopicOptionsEmpty(false)\r\n }\r\n },[subTopicOptions])\r\n\r\n /**\r\n * changed by : sai krishna thalla\r\n * reason: enable button not working properly in add\r\n * date: 13-sep-2022\r\n */\r\n useEffect(() => {\r\n if (!_.isEmpty(subTopicOptions)){\r\n if (formData?.topic_id && formData?.description && formData?.sub_topic && formData?.before_sub_topic_id && formData?.level ) {\r\n setSaveButtonDisabled(false);\r\n } else {\r\n setSaveButtonDisabled(true);\r\n }\r\n }\r\n else{\r\n if (formData?.topic_id && formData?.description && formData?.sub_topic) {\r\n setSaveButtonDisabled(false);\r\n } else {\r\n setSaveButtonDisabled(true);\r\n }\r\n }\r\n }, [formData]);\r\n\r\n useEffect(() => {\r\n if (!formData?.description && _.isEmpty(selectedOption))\r\n {\r\n setUpdateButtonDisable(true)\r\n }\r\n else{\r\n setUpdateButtonDisable(false)\r\n }\r\n },[formData])\r\n\r\n useEffect(() => {\r\n if (formReset) {\r\n reset();\r\n }\r\n }, [formReset]);\r\n\r\n useEffect(() => {\r\n if (UserGuide?.addUserGuideData?.data?.data?.result) {\r\n setFormData({\r\n id:'',\r\n topic: '',\r\n topic_id: '',\r\n sub_topic: '',\r\n level:'',\r\n before_sub_topic: '',\r\n before_sub_topic_id: '',\r\n title: '',\r\n description: '',\r\n publish_status: false,\r\n });\r\n setFormReset(true);\r\n dispatch(getAllUserGuideRequest({ page: 1, data: { is_delete: 'False',is_backoffice: \"True\",is_backoffice: \"True\" } }));\r\n history.goBack();\r\n } else if (UserGuide?.addUserGuideDataError) {\r\n let {\r\n data: { response },\r\n } = UserGuide?.addUserGuideDataError;\r\n //showError(UserGuide?.addUserGuideDataError?.data?.response?.data?.errors?.data[0]);\r\n }\r\n }, [UserGuide.addUserGuideData, UserGuide.addUserGuideDataError]);\r\n\r\n useEffect(() => {\r\n if (UserGuide?.updateUserGuideData?.data?.data?.result) {\r\n setFormData({\r\n id:'',\r\n topic: '',\r\n topic_id: '',\r\n sub_topic: '',\r\n level:'',\r\n before_sub_topic: '',\r\n before_sub_topic_id: '',\r\n title: '',\r\n description: '',\r\n publish_status: false,\r\n });\r\n setFormReset(true);\r\n dispatch(getAllUserGuideRequest({ page: 1, data: { is_delete: 'False',is_backoffice: \"True\" } }));\r\n props.handleFromManageUserGuide(false);\r\n history.goBack();\r\n } else if (UserGuide?.updateUserGuideDataError) {\r\n if (UserGuide?.updateUserGuideDataError.data.response.data.message);\r\n }\r\n }, [UserGuide.updateUserGuideData, UserGuide.updateUserGuideDataError]);\r\n\r\n useEffect(()=>{\r\nif (UserGuide?.updateUserGuideData?.status === \"400\"){\r\n\r\n}\r\n },[UserGuide.updateUserGuideData])\r\n\r\n useEffect(() => {\r\n if (!_.isEmpty(props?.initialValues)) {\r\n if (!_.isEmpty(categoryList)) {\r\n renderAPISubTopicOptions(categoryList, props.initialValues.topic.value);\r\n }\r\n setSubtopic(true);\r\n setTopic(true);\r\n }\r\n }, [props.initialValues]);\r\n\r\n useEffect(()=>{\r\n if (props?.initialValues?.level){\r\n setDefaultValue(props.initialValues.level == 1 ? place[0] : place[1])\r\n }\r\n },[props.initialValues.level])\r\n\r\n const renderAPITopicOptions = list => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params?.length) {\r\n params.map(param => {\r\n let data = {\r\n value: param.name,\r\n label: `${param.name}`,\r\n id: param.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const renderAPISubTopicOptions = (list, option) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n let requiredTopic = params.filter(param => param.name === option);\r\n if (requiredTopic?.length) {\r\n let requiredSubTopic = requiredTopic[0].sub_topic;\r\n\r\n if (requiredSubTopic?.length) {\r\n requiredSubTopic.forEach(element => {\r\n let data = {\r\n value: element.name,\r\n label: `${element.name}`,\r\n id: element.id,\r\n order:element.order,\r\n };\r\n options.push(data);\r\n });\r\n setSubTopicOptions(options);\r\n } else {\r\n setSubTopicOptions([]);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const topicHandler = data => {\r\n if (data?.value) {\r\n setSelectedOption(data.value);\r\n formData.topic = data.value;\r\n formData.topic_id = data.id;\r\n // formData.sub_topic_id = ''; //\r\n //setFormData({ ...formData });\r\n setTopic(true);\r\n dispatch(change('user-guide-add-form','Beforesubtopic',''))\r\n formData.before_sub_topic = '';\r\n formData.before_sub_topic_id = '';\r\n formData.before_sub_topic_order='';\r\n setFormData({ ...formData });\r\n\r\n }\r\n };\r\n\r\n const subTopicHandler = data => {\r\n const value=data.currentTarget.value;\r\n if (value) {\r\n formData.sub_topic = value;\r\n setFormData({ ...formData });\r\n setSubtopic(true);\r\n\r\n // formData.title = '';\r\n // setFormData({ ...formData });\r\n setSubtopic(true);\r\n setTopic(true);\r\n }\r\n \r\n };\r\n const level=data=>{\r\n if(data){\r\n formData.level=data.id;\r\n setDefaultValue(data.id == 1 ? place[0] : place[1])\r\n setFormData({...formData});\r\n }\r\n }\r\n const beforeSubTopicHandler = data => {\r\n if (data?.value) {\r\n formData.before_sub_topic = data.value;\r\n formData.before_sub_topic_id = data.id;\r\n formData.before_sub_topic_order=data.order;\r\n setFormData({ ...formData });\r\n\r\n // formData.title = data.value;\r\n // setFormData({ ...formData });\r\n }\r\n };\r\n\r\n const handleDescription = data => {\r\n formData.description = data;\r\n setFormData({ ...formData });\r\n };\r\n const handlePublishStatus = e => {\r\n formData.publish_status = e.target.checked;\r\n setFormData({ ...formData });\r\n };\r\n\r\n const onFormSubmit = e => {\r\n e.preventDefault();\r\n formSubmissionDataHandler.append(\"topic_id\", formData?.topic_id);\r\n formSubmissionDataHandler.append(\"subtopic_name\", formData?.sub_topic);\r\n\r\n if (formData?.level){\r\n formSubmissionDataHandler.append('level', formData?.level);\r\n }\r\n if (formData?.before_sub_topic_order){\r\n formSubmissionDataHandler.append(\"order\", formData?.before_sub_topic_order );\r\n }\r\n\r\n formSubmissionDataHandler.append(\"content\", formData?.description);\r\n formSubmissionDataHandler.append(\"status\", `${_.capitalize(formData?.publish_status)}`);\r\n formSubmissionDataHandler.append(\"order_subtopic_id\",formData?.before_sub_topic_id)\r\n if (formData?.title){\r\n formSubmissionDataHandler.append(\"title\", formData?.title);\r\n }\r\n setFormReset(false);\r\n dispatch(addUserGuideRequest(formSubmissionDataHandler));\r\n };\r\n\r\n const handleUpdate = () => {\r\n if (!updateButtonDisable) {\r\n formSubmissionDataHandler.append('id', formData?.id);\r\n formSubmissionDataHandler.append('topic_id', formData?.topic_id);\r\n formSubmissionDataHandler.append('subtopic_id', formData?.sub_topic_id);\r\n formSubmissionDataHandler.append('subtopic_name', formData?.sub_topic);\r\n formSubmissionDataHandler.append('level', formData?.level);\r\n formSubmissionDataHandler.append('order', formData?.before_sub_topic_order);\r\n formSubmissionDataHandler.append('content', formData?.description);\r\n formSubmissionDataHandler.append('status', `${_.capitalize(formData?.publish_status)}`);\r\n formSubmissionDataHandler.append('title', formData?.title);\r\n formSubmissionDataHandler.append('order_subtopic_id',formData?.before_sub_topic_id)\r\n setFormReset(false);\r\n dispatch(updateUserGuideRequest(formSubmissionDataHandler));\r\n }\r\n };\r\n return (\r\n <>\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n );\r\n};\r\nexport default reduxForm({\r\n form: 'user-guide-add-form',\r\n enableReinitialize: true,\r\n})(CreateUserGuidePage);\r\n","import React, { useState } from 'react';\r\nimport { Card, CardBody } from 'reactstrap';\r\nimport { Field, reduxForm, change } from 'redux-form';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport _ from 'lodash';\r\nimport {\r\n renderReactSelectInputField,\r\n} from '../../Components/common/renderInputField';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { t } from 'react-multi-lang';\r\nconst Filter = props => {\r\n const {\r\n categoryList,\r\n } = props;\r\n\r\n const [subTopicOptions, setSubTopicOptions] = useState();\r\n const [filterButtonDisabled, setFilterButtonDisabled] = useState(true);\r\n const [isSubTopicOptionsDisabled, setIsSubTopicOptionsDisabled] = useState(true);\r\n\r\n const dispatch = useDispatch();\r\n\r\n const { UserGuide } = useSelector(state => ({\r\n UserGuide: state.UserGuide,\r\n }));\r\n\r\n const renderAPIParameterOptions = (list, action_name) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n if (params.length) {\r\n if (action_name === 'category') {\r\n let default_option = { value: 'select', label: 'select', id: 'select' };\r\n options.push(default_option);\r\n }\r\n params.map(param => {\r\n let data = {\r\n value: param.name,\r\n label: `${param.name}`,\r\n id: param.id,\r\n key:param.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const renderAPISubTopicOptions = (list, option) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n let default_option = { value: 'select', label: 'select', id: 'select' };\r\n options.push(default_option);\r\n let requiredTopic = params.filter(param => param.name === option);\r\n if (requiredTopic?.length) {\r\n let requiredSubTopic = requiredTopic[0].sub_topic;\r\n if (requiredSubTopic?.length) {\r\n requiredSubTopic.forEach(element => {\r\n let data = {\r\n value: element.name,\r\n label: `${element.name}`,\r\n id: element.id,\r\n };\r\n options.push(data);\r\n });\r\n setIsSubTopicOptionsDisabled(false);\r\n setSubTopicOptions(options);\r\n } else {\r\n setIsSubTopicOptionsDisabled(true);\r\n setSubTopicOptions([]);\r\n }\r\n } else {\r\n setIsSubTopicOptionsDisabled(true);\r\n setSubTopicOptions([]);\r\n }\r\n }\r\n };\r\n\r\n const handleFilterCategoryChange = data => {\r\n dispatch(change('userGuideFilterForm', 'filter_sub_category', ''));\r\n props.handleFilterCategoryChange(data);\r\n renderAPISubTopicOptions(categoryList, data.value);\r\n if (data.value !== 'select') {\r\n setFilterButtonDisabled(false);\r\n } else {\r\n setFilterButtonDisabled(true);\r\n }\r\n };\r\n\r\n const handleFilterSubCategoryChange = data => {\r\n props.handleFilterSubCategoryChange(data);\r\n };\r\n\r\n const onFormSubmit = e => {\r\n e.preventDefault();\r\n props.handleFilterSubmit();\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n history.goBack()}\r\n />\r\n \r\n {fromListing ? (\r\n
\r\n \r\n {t('USER_GUIDE.MODIFY_USER_GUIDE')}\r\n
\r\n ) : (\r\n\r\n {t('USER_GUIDE.ADD_USER_GUIDE')}\r\n
\r\n )}\r\n\r\n {\r\n onFormSubmit(e);\r\n }}\r\n >\r\n
\r\n \r\n \r\n {\r\n topicHandler(e);\r\n \r\n }}\r\n required={true}\r\n isMulti={false}\r\n options={renderAPITopicOptions(categoryList)}\r\n >\r\n \r\n { \r\n subTopicHandler(e)}}\r\n required={true}\r\n isMulti={false}\r\n isDisabled={!topic}\r\n >\r\n \r\n
\r\n \r\n
\r\n \r\n\r\n
\r\n\r\n \r\n handlePublishStatus(e)}\r\n required={false}\r\n />\r\n \r\n
\r\n \r\n {!fromListing ? (\r\n \r\n {t('USER_GUIDE.SAVE')}\r\n \r\n ) : (\r\n \r\n {t('USER_GUIDE.UPDATE')}\r\n \r\n )}\r\n
\r\n \r\n \r\n handleFilterCategoryChange(e)}\r\n required={true}\r\n isMulti={false}\r\n options={renderAPIParameterOptions(categoryList, 'category')}\r\n >\r\n {subTopicOptions?.length ? (\r\n handleFilterSubCategoryChange(e)}\r\n required={true}\r\n isMulti={false}\r\n options={subTopicOptions}\r\n isDisabled={isSubTopicOptionsDisabled}\r\n >\r\n ) : (\r\n ''\r\n )}\r\n
\r\n \r\n \r\n \r\n {t('USER_GUIDE.FILTER')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n {props.onDeleteClick && \r\n {t('USER_GUIDE.ARE_YOU_SURE')}\r\n
\r\n \r\n {props.onPublishClick ? (\r\n <>\r\n {t('USER_GUIDE.THIS_WILL')} {props.data.status ? 'Unpublish' : 'Publish'}{' '}\r\n {t('USER_GUIDE.THE_USER_GUIDE')}\r\n \r\n ) : (\r\n <>{t('USER_GUIDE.DELETE_USER_TEXT')}\r\n )}\r\n
\r\n \r\n \r\n handleChanges(props.data)}\r\n >\r\n {props?.onDeleteClick\r\n ? t('USER_GUIDE.DELETE')\r\n : props?.onPublishClick && props.data.status\r\n ? t('USER_GUIDE.UNPUBLISH')\r\n : t('USER_GUIDE.PUBLISH')}\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default AlertModal;\r\n","import RightArrow from '../../assets/Images/back-button.svg';\r\nimport { useState, useEffect } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { t } from 'react-multi-lang';\r\nimport _ from 'lodash';\r\nimport ReactTooltip from 'react-tooltip';\r\nimport DummyResourceImage from '../../assets/Images/dummy_resource_image.jpg';\r\nimport { AiFillCheckCircle } from 'react-icons/ai';\r\nimport { GoCircleSlash } from 'react-icons/go';\r\nimport Loader from '../../Components/common/loader';\r\nimport { DISPLAY_DATE_FORMAT } from '../../Components/constants';\r\nimport moment from 'moment';\r\nimport { showSuccess, showError } from '../../Components/Notifications';\r\nimport { FILE_EXTENSION } from '../../Components/constants/index';\r\nimport InfiniteScroll from 'react-infinite-scroll-component';\r\n\r\nimport { BiPlus } from 'react-icons/bi';\r\nimport CreateUserGuidePage from './CreateUserGuidePage';\r\nimport { MdKeyboardArrowLeft ,MdKeyboardArrowRight} from 'react-icons/md';\r\nimport Filter from './Filter';\r\nimport AlertModal from './AlertModal';\r\n\r\nimport {\r\n Row,\r\n Card,\r\n Col,\r\n} from 'reactstrap';\r\nimport {\r\n getAllUserGuideRequest,\r\n changeStatusUserGuideRequest,\r\n deleteUserGuideRequest,\r\n getAllTopicsRequest,\r\n deleteUserGuideSuccess,\r\n changeStatusUserGuideSuccess,\r\n getAllUserGuideSuccess,\r\n addUserGuideSuccess,\r\n updateUserGuideSuccess,\r\n} from '../../redux/userGuide/userGuideActions';\r\nimport { isStaffUser, isSuperAdmin } from '../../Components/common/utils';\r\nconst ManageUserGuide = () => {\r\n const dispatch = useDispatch();\r\n let history = useHistory();\r\n let form = new FormData();\r\n const [isHideBar, setHideBar] = useState(false);\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState();\r\n const [userGuideList, setUserGuideList] = useState([]);\r\n const [isPublishModal, setIsPublishModal] = useState(false);\r\n const [isDeleteModal, setIsDeleteModal] = useState(false);\r\n const [isToggleRightBar, setIsToggleRightBar] = useState(false);\r\n const [updateUserGuide, setUpdateUserGuide] = useState('');\r\n const [fromListing, setFromListing] = useState(false);\r\n const [defaultUserGuideOptions, setDefaultUserGuideOptions] = useState({});\r\n const [categoryList, setCategoryList] = useState([]);\r\n const [filterCategoryList, setFilterCategoryList] = useState();\r\n const [filterSubCategoriesList, setFilterSubCategoriesList] = useState();\r\n const [filterChanges, setFilterChanges] = useState({\r\n filterCategory: '',\r\n filterSubCategory: '',\r\n });\r\n const [formUserGuideData, setFormUserGuideData] = useState({\r\n id: '',\r\n topic: '',\r\n topic_id: '',\r\n sub_topic: '',\r\n sub_topic_id: '',\r\n title: '',\r\n description: '',\r\n publish_status: false,\r\n });\r\n const [showChangeStatus, setShowChangeStatus] = useState();\r\n const [scrollValue, setScrollValue] = useState(0);\r\n const { UserGuide } = useSelector(state => ({\r\n UserGuide: state.UserGuide,\r\n }));\r\n\r\n useEffect(() => {\r\n window.scrollTo({ top: scrollValue, behavior: 'auto' });\r\n if (isSuperAdmin() || isStaffUser()) {\r\n dispatch(getAllUserGuideRequest({ page: pageNumber, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\r\n dispatch(getAllTopicsRequest());\r\n setFromListing(false);\r\n setIsToggleRightBar(false);\r\n\r\n return () => {\r\n dispatch(addUserGuideSuccess({}));\r\n dispatch(updateUserGuideSuccess({}));\r\n dispatch(deleteUserGuideSuccess({}));\r\n dispatch(getAllUserGuideSuccess({}));\r\n dispatch(changeStatusUserGuideSuccess({}));\r\n dispatch(getAllUserGuideSuccess({}));\r\n };\r\n } else {\r\n history.push('/home');\r\n }\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (UserGuide?.getAllTopicData) {\r\n if (UserGuide?.getAllTopicData?.data) {\r\n const {\r\n data: { result },\r\n } = UserGuide?.getAllTopicData?.data;\r\n setFilterCategoryList(result);\r\n }\r\n }\r\n }, [UserGuide.getAllTopicData]);\r\n\r\n useEffect(() => {\r\n if (UserGuide.updateUserGuideData) {\r\n setIsPublishModal(false);\r\n setPageNumber(1);\r\n setFormUserGuideData({\r\n id: '',\r\n topic: '',\r\n topic_id: '',\r\n sub_topic: '',\r\n sub_topic_id: '',\r\n title: '',\r\n description: '',\r\n publish_status: false,\r\n });\r\n setUserGuideList([]);\r\n setFromListing(false);\r\n dispatch(getAllUserGuideSuccess({}));\r\n dispatch(getAllUserGuideRequest({ page: 1, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\r\n }\r\n }, [UserGuide.updateUserGuideData]);\r\n\r\n useEffect(() => {\r\n if (UserGuide.changeStatusUserGuideData) {\r\n const result = UserGuide?.changeStatusUserGuideData?.data?.data?.result;\r\n\r\n if (result) {\r\n setScrollValue(parseInt(window.pageYOffset));\r\n if (showChangeStatus) {\r\n showSuccess(t('USER_GUIDE.SHOW_PUBLISH'));\r\n } else {\r\n showSuccess(t('USER_GUIDE.SHOW_UNPUBLISH'));\r\n }\r\n setFromListing(false);\r\n setPageNumber(1);\r\n setUserGuideList([]);\r\n setIsPublishModal(false);\r\n dispatch(getAllUserGuideSuccess({}));\r\n dispatch(getAllUserGuideRequest({ page: 1, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\r\n }\r\n }\r\n }, [UserGuide.changeStatusUserGuideData]);\r\n\r\n useEffect(() => {\r\n if (UserGuide?.deleteUserGuideData) {\r\n const result = UserGuide?.deleteUserGuideData?.data?.data?.result;\r\n if (result) {\r\n showSuccess(result);\r\n setPageNumber(1);\r\n setIsDeleteModal(false);\r\n setUserGuideList([]);\r\n setFromListing(false);\r\n dispatch(getAllUserGuideSuccess({}));\r\n dispatch(getAllUserGuideRequest({ page: 1, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\r\n }\r\n }\r\n }, [UserGuide.deleteUserGuideData]);\r\n\r\n useEffect(() => {\r\n if (UserGuide.getAllUserGuideData?.data?.result?.results) {\r\n let new_list = [];\r\n const {\r\n data: { result },\r\n } = UserGuide.getAllUserGuideData;\r\n\r\n if (result) {\r\n if (userGuideList) {\r\n if (pageNumber > 1) {\r\n new_list = userGuideList.concat(result.results);\r\n } else {\r\n new_list = result.results;\r\n }\r\n } else {\r\n new_list = result.results;\r\n }\r\n setUserGuideList(new_list);\r\n setPageCount(result?.count);\r\n } else {\r\n setUserGuideList([]);\r\n }\r\n }\r\n if (scrollValue !== 0) {\r\n window.scrollTo({ top: scrollValue, behavior: 'auto' });\r\n }\r\n }, [UserGuide.getAllUserGuideData]);\r\n\r\n const handlePublishModal = data => {\r\n setShowChangeStatus(data.status);\r\n setIsPublishModal(!isPublishModal);\r\n if (!isPublishModal) setUpdateUserGuide(data);\r\n };\r\n\r\n const handleDeleteModal = data => {\r\n setScrollValue(parseInt(window.pageYOffset));\r\n setIsDeleteModal(!isDeleteModal);\r\n if (!isDeleteModal) setUpdateUserGuide(data);\r\n };\r\n\r\n const handlePublishChanges = (data, { publish }) => {\r\n form.append('id', data.id);\r\n form.append('status', `${_.capitalize(publish)}`);\r\n dispatch(changeStatusUserGuideRequest(form));\r\n };\r\n\r\n const handleDelete = value => {\r\n dispatch(deleteUserGuideRequest({ id: value }));\r\n };\r\n\r\n\r\n const fetchNextUserGuideData = () => {\r\n setPageNumber(pageNumber + 1);\r\n dispatch(\r\n getAllUserGuideRequest({\r\n page: pageNumber + 1,\r\n fromBackOffice: true,\r\n data: {\r\n topic_id: filterChanges?.filterCategory?.id,\r\n subtopic_id: filterChanges?.filterSubCategory?.id,\r\n\r\n status: '',\r\n is_delete: 'False',\r\n is_backoffice: \"True\"\r\n },\r\n }),\r\n );\r\n };\r\n\r\n const handleReadMore = data => {\r\n if (!_.isEmpty(data.subtopic_id) && !_.isEmpty(data.topic_id)) {\r\n history.push(`/user-guide-details?topicId=${data.topic_id}&&sub-topic-name=${data?.subtopic_name}`)\r\n\r\n } else {\r\n history.push(\r\n `/user-guide-detail-search-content?unique=${data.id}&&category=${data.topic_id}`,\r\n );\r\n }\r\n };\r\n\r\n const handleFilterCategoryChange = data => {\r\n if (data.id === 'select') {\r\n filterChanges.filterCategory = '';\r\n filterChanges.filterSubCategory = '';\r\n setPageNumber(1);\r\n dispatch(getAllUserGuideRequest({ page: pageNumber, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\r\n } else {\r\n filterChanges.filterCategory = data;\r\n }\r\n setFilterChanges({ ...filterChanges });\r\n };\r\n\r\n const handleFilterSubCategoryChange = data => {\r\n if (data.id === 'select') {\r\n filterChanges.filterSubCategory = '';\r\n } else {\r\n filterChanges.filterSubCategory = data;\r\n }\r\n setFilterChanges({ ...filterChanges });\r\n };\r\n\r\n const handleFilterSubmit = () => {\r\n if (\r\n filterChanges &&\r\n (!_.isEmpty(filterChanges.filterCategory) || !_.isEmpty(filterChanges.filterSubCategory))\r\n ) {\r\n dispatch(\r\n getAllUserGuideRequest({\r\n fromBackOffice: true,\r\n data: {\r\n topic_id: filterChanges?.filterCategory?.id,\r\n subtopic_id: filterChanges?.filterSubCategory?.id,\r\n status: '',\r\n is_delete: 'False',\r\n is_backoffice: \"True\"\r\n },\r\n }),\r\n );\r\n setUserGuideList([]);\r\n setPageNumber(1);\r\n } else {\r\n dispatch(getAllUserGuideRequest({ page: 1, fromBackOffice: true, data: { is_delete: 'False',is_backoffice: \"True\" } }));\r\n }\r\n };\r\n\r\n useEffect(() => {\r\n if (UserGuide?.addUserGuideData?.data?.data?.result) {\r\n showSuccess(UserGuide?.addUserGuideData?.data?.data?.result);\r\n }\r\n }, [UserGuide.addUserGuideData]);\r\n\r\n useEffect(() => {\r\n if (UserGuide?.updateUserGuideData?.data?.data?.result) {\r\n showSuccess(UserGuide?.updateUserGuideData?.data?.data?.result);\r\n }\r\n }, [UserGuide.updateUserGuideData]);\r\n\r\n return (\r\n <>\r\n {isPublishModal && (\r\n <>\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ManageUserGuide;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { t } from 'react-multi-lang';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { Row, Col, Collapse } from 'reactstrap';\r\nimport '../../assets/CSS/bulletin.css';\r\nimport '../../assets/CSS/StaticSidebar.css';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { AiOutlineCaretUp, AiOutlineCaretDown } from 'react-icons/ai';\r\nimport '../../assets/CSS/static-page.css';\r\nimport RightArrow from '../../assets/Images/back-button.svg';\r\nimport '../../assets/CSS/UserGuideSearchContent.css';\r\nimport {\r\n getAllTopicsRequest,\r\n getAllTopicSuccess,\r\n getAllUserGuideRequest,\r\n getAllUserGuideSuccess,\r\n searchByCriteriaUserGuideRequest,\r\n} from '../../redux/actions';\r\nimport Loader from '../../Components/common/loader';\r\nimport _ from 'lodash';\r\nimport Footer from '../landing-page/footer';\r\n\r\nconst UserGuideDetailPage = () => {\r\n const dispatch = useDispatch();\r\n let history = useHistory();\r\n const [getAllTopicDataList, setGetAllTopicDataList] = useState([]);\r\n const [TopicHeading, setTopicHeading] = useState('');\r\n const [subTopicHeading, setSubTopicHeading] = useState([]);\r\n const [initialSubtopicHeading, setInitialSubtopicHeading] = useState([]);\r\n const [isOpen, setIsOpen] = useState(false);\r\n const [allData, setAllData] = useState([]);\r\n const [activeSubTopic, setActiveSubTopic] = useState(0);\r\n const [filteredData, setFilteredData] = useState([]);\r\n const [wordEntered, setWordEntered] = useState('');\r\n const [sideBarSearch, setSideBarSearch] = useState(false);\r\n const [searchEnteredSubTopics, setSearchEnteredSubTopics] = useState([]);\r\n const [noResults, setNoResults] = useState(false);\r\n const [searchContentWordEntered, setSearchContentWordEntered] = useState('');\r\n const [pageNumber, setPageNumber] = useState(1);\r\n const [secondpageNumber, setSecondPageNumber] = useState(1);\r\n const [pageCount, setPageCount] = useState();\r\n const [topicId, setTopicId] = useState();\r\n // const [sectionId, setSectionId] = useState();\r\n\r\n const {\r\n getAllTopicData,\r\n isGetAllUserGuideRequesting,\r\n getAllUserGuideData,\r\n searchByCriteriaUserGuideData,\r\n } = useSelector(state => ({\r\n getAllTopicData: state.UserGuide.getAllTopicData,\r\n getAllUserGuideData: state.UserGuide.getAllUserGuideData,\r\n isGetAllUserGuideRequesting: state.UserGuide.isGetAllUserGuideRequesting,\r\n searchByCriteriaUserGuideData: state.UserGuide.searchByCriteriaUserGuideData,\r\n }));\r\n\r\n useEffect(() => {\r\n setSubTopicHeading([]);\r\n let search = window.location.search;\r\n let URLParams = new URLSearchParams(search);\r\n let topicId = URLParams.get('topicId');\r\n setTopicId(topicId);\r\n if (topicId){\r\n dispatch(getAllTopicsRequest({ topic_id: topicId }));\r\n dispatch(\r\n getAllUserGuideRequest({\r\n page: pageNumber,\r\n fromBackOffice: false,\r\n data: { topic_id: topicId, status: 'True', is_delete: 'False', is_backoffice: \"False\" },\r\n }),\r\n );\r\n }\r\n window.scrollTo({ top: 0, behavior: 'instant' });\r\n return () => {\r\n setAllData([]);\r\n setNoResults(false);\r\n setSubTopicHeading([]);\r\n setGetAllTopicDataList([]);\r\n dispatch(searchByCriteriaUserGuideRequest({}));\r\n dispatch(getAllTopicSuccess({}));\r\n dispatch(getAllUserGuideSuccess({}));\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (getAllTopicData?.data) {\r\n const { data } = getAllTopicData.data;\r\n if (!_.isEmpty(data) && !_.isEmpty(data.result)) {\r\n setGetAllTopicDataList(data.result);\r\n setNoResults(false);\r\n }\r\n }\r\n }, [getAllTopicData]);\r\n\r\n useEffect(() => {\r\n if (getAllTopicDataList?.length) {\r\n setTopicHeading(getAllTopicDataList[0]?.name);\r\n let { sub_topic } = getAllTopicDataList[0];\r\n setInitialSubtopicHeading(sub_topic);\r\n if (!sub_topic?.length) {\r\n setIsOpen(false);\r\n } else {\r\n setIsOpen(true);\r\n }\r\n }\r\n }, [getAllTopicDataList]);\r\n \r\n useEffect(() => {\r\n if (getAllUserGuideData?.data && !getAllUserGuideData?.fromBackOffice) {\r\n let new_list = [];\r\n const { result } = getAllUserGuideData?.data;\r\n if (result) {\r\n if (allData) {\r\n if (secondpageNumber > 1) {\r\n new_list = allData.concat(result.results);\r\n } else {\r\n new_list = result.results;\r\n }\r\n } else {\r\n new_list = result.results;\r\n }\r\n setAllData(new_list);\r\n setPageCount(result?.count);\r\n } else {\r\n setAllData([]);\r\n }\r\n }\r\n }, [getAllUserGuideData]);\r\n\r\n useEffect(() => {\r\n let hasMore = pageNumber * 10 < pageCount ? true : false;\r\n if (hasMore) {\r\n setSecondPageNumber(pageNumber + 1);\r\n recursion(pageNumber, pageCount);\r\n }\r\n }, [pageCount]);\r\n\r\n useEffect(() => {\r\n let a = [];\r\n if (allData && allData.length && initialSubtopicHeading.length) {\r\n for (const element of allData) {\r\n let allDataElement = element?.title;\r\n for (let j = 0; j < initialSubtopicHeading.length; j++) {\r\n if (initialSubtopicHeading[j]?.name?.trim() == allDataElement?.trim()) {\r\n a.push(initialSubtopicHeading[j]);\r\n break;\r\n }\r\n }\r\n }\r\n setSubTopicHeading(a);\r\n }\r\n }, [allData, initialSubtopicHeading]);\r\n\r\nuseEffect(()=>{\r\n let search = window.location.search; \r\n let URLParams = new URLSearchParams(search);\r\n let searchSubTopicName = URLParams.get('sub-topic-name');\r\n let index;\r\n if (subTopicHeading.length >= pageCount-2 && subTopicHeading.length <= pageCount && searchSubTopicName){\r\n subTopicHeading.map((item,idx)=>{\r\n if (item.name === searchSubTopicName){\r\n index = idx\r\n }\r\n })\r\n if(index && searchSubTopicName){\r\n toggle(index,searchSubTopicName)\r\n }\r\n} \r\n},[subTopicHeading?.length,allData?.length])\r\n\r\n const recursion = (pageNumber, pageCount) => {\r\n let pagenum = pageNumber;\r\n let hasMore = pagenum * 10 < pageCount ? true : false;\r\n if (hasMore && topicId) {\r\n dispatch(\r\n getAllUserGuideRequest({\r\n page: pagenum + 1,\r\n fromBackOffice: false,\r\n data: { topic_id: topicId, status: 'True', is_delete: 'False',is_backoffice: \"False\" },\r\n }),\r\n );\r\n recursion(pagenum + 1, pageCount);\r\n }\r\n };\r\n\r\n const handleFilter = e => {\r\n const searchWord = e.target.value;\r\n if (searchWord?.length === 0) {\r\n setNoResults(false);\r\n setFilteredData([]);\r\n setSearchEnteredSubTopics([]);\r\n }\r\n setWordEntered(searchWord);\r\n };\r\n const clearSearch = a => {\r\n setNoResults(false);\r\n setSideBarSearch(false);\r\n setSearchEnteredSubTopics([]);\r\n setFilteredData([]);\r\n setWordEntered('');\r\n };\r\n const handleSearchContent = e => {\r\n const searchContent = e.target.value;\r\n setSearchContentWordEntered(searchContent);\r\n };\r\n\r\n useEffect(() => {\r\n if (wordEntered?.length !== 0) {\r\n let search = window.location.search;\r\n let URLParams = new URLSearchParams(search);\r\n let topic_name = URLParams.get('topic_name');\r\n dispatch(searchByCriteriaUserGuideRequest({ topic_name: topic_name, name: wordEntered }));\r\n }\r\n }, [wordEntered]);\r\n\r\n useEffect(() => {\r\n let serachedSubTopicList = [];\r\n if (searchByCriteriaUserGuideData?.data) {\r\n const { data } = searchByCriteriaUserGuideData.data;\r\n if (!_.isEmpty(data) && !_.isEmpty(data.result)) {\r\n data.result.map(item => {\r\n serachedSubTopicList.push(item);\r\n });\r\n setNoResults(false);\r\n setSearchEnteredSubTopics(serachedSubTopicList);\r\n } else {\r\n setNoResults(true);\r\n setSearchEnteredSubTopics([]);\r\n }\r\n }\r\n }, [searchByCriteriaUserGuideData]);\r\n\r\n const toggle = (tab, id) => {\r\n setActiveSubTopic(tab);\r\n scrollToElement(id);\r\n };\r\n\r\n const scrollToElement = id => {\r\n \r\n const element = document.getElementById(\r\n id\r\n .toLowerCase()\r\n .trim()\r\n .split(' ')\r\n .join('_'),\r\n );\r\n\r\n if (!_.isEmpty(element)) \r\n {\r\n element?.scrollIntoView({block: \"start\"});\r\n }else{ \r\n window.scroll(0, 0);\r\n }\r\n\r\n };\r\n\r\n const handleManageCropsBackButton = () => {\r\n // history.push('/user-guide');\r\n if (window.history.length == 1) {\r\n window.close();\r\n } else {\r\n history.goBack();\r\n }\r\n };\r\n\r\n const handleKeyPress = event => {\r\n if (event.key === 'Enter' && event.target.value?.length !== 0) {\r\n history.push({\r\n pathname: '/user-guide-search',\r\n search: `?q=${searchContentWordEntered}`,\r\n });\r\n }\r\n };\r\n const handleClick = () => {\r\n if (searchContentWordEntered?.length !== 0) {\r\n history.push({\r\n pathname: '/user-guide-search',\r\n search: `?q=${searchContentWordEntered}`,\r\n });\r\n }\r\n };\r\n \r\n return (\r\n <>\r\n \r\n \r\n {!isHideBar && (\r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {t('FILTER.HIDE_BAR')}\r\n \r\n setHideBar(!isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n \r\n {!isHideBar ? (\r\n
\r\n \r\n )}\r\n \r\n
\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n \r\n {t('FILTER.EXPAND_BAR')}\r\n \r\n setHideBar(!isHideBar)}\r\n size={25}\r\n />\r\n \r\n \r\n
\r\n )}\r\n \r\n \r\n history.goBack()}\r\n />\r\n \r\n \r\n
\r\n\r\n {t('USER_GUIDE.MANAGE_USER_GUIDE')}
\r\n \r\n\r\n history.push('/manage-user-guide-form/add')}\r\n className=\"manage-news-feed-cursor-pointer\"\r\n >\r\n
\r\n \r\n {t('USER_GUIDE.ADD_USER_GUIDE')}\r\n
\r\n \r\n\r\n \r\n \r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n {UserGuide.isGetAllUserGuideRequesting &&
\r\n {_.isEmpty(userGuideList) && !UserGuide.isGetAllUserGuideRequesting && (\r\n \r\n {t('USER_GUIDE.NO_RECORDS_FOUND')}\r\n
\r\n )}\r\n{t('USER_GUIDE.LOADING')}
\r\n \r\n )\r\n }\r\n >\r\n {userGuideList.map((i,index) => {\r\n return (\r\n\r\n \r\n {t('NEWS_FEED.EDIT')}\r\n \r\n \r\n {t('NEWS_FEED.DELETE')}\r\n \r\n \r\n {t('NEWS_FEED.CLICK_PUBLISH')}\r\n \r\n \r\n {t('NEWS_FEED.CLICK_UNPUBLISH')}\r\n \r\n
\r\n \r\n {i?.title}\r\n
\r\n {i?.content?.length > 100 ? (\r\n \r\n ) : (\r\n\r\n \r\n {/* ...\r\n handleReadMore(i)}>\r\n {t('USER_GUIDE.READ_MORE')}\r\n */}\r\n
\r\n )}\r\n \r\n {t('USER_GUIDE.CATEGORY')}: {i?.topic_name}\r\n
\r\n {\r\n\r\n {t('USER_GUIDE.SUB_CATEGORY')}:{' '}\r\n {i?.subtopic_name\r\n ? i?.subtopic_name\r\n : t('USER_GUIDE.NOT_AVAILABLE')}\r\n
\r\n }\r\n {!_.isEmpty(i?.updated_date) && (\r\n\r\n {t('USER_GUIDE.UPDATED_DATE')}:{' '}\r\n {moment(i?.updated_date).format(DISPLAY_DATE_FORMAT)}\r\n
\r\n )}\r\n\r\n\r\n {i?.status === true ? (\r\n <>\r\n handlePublishModal(i)}\r\n >\r\n \r\n ) : (\r\n <>\r\n handlePublishModal(i)}\r\n >\r\n \r\n )}\r\n {\r\n if (!_.isEmpty(i.topic_id) && !_.isEmpty(i.subtopic_id)) {\r\n history.push(\r\n `/manage-user-guide-form/edit?unique=${i.id}&&category=${i.topic_id}&&sub-category=${i.subtopic_id}`,\r\n );\r\n } else {\r\n history.push(\r\n `/manage-user-guide-form/edit?unique=${i.id}&&category=${i.topic_id}`,\r\n );\r\n }\r\n }}\r\n id=\"edit-news\"\r\n data-tip\r\n data-for=\"edit_news\"\r\n >\r\n handleDeleteModal(i)}\r\n id=\"delete-news\"\r\n data-tip\r\n data-for=\"delete_news\"\r\n >\r\n
\r\n \r\n {isGetAllUserGuideRequesting &&
\r\n \r\n \r\n
\r\n\r\n \r\n {\r\n setIsOpen(!isOpen);\r\n }}\r\n >\r\n \r\n {' '}\r\n \r\n ) : (\r\n \r\n {subTopicHeading?.length && searchEnteredSubTopics?.length === 0\r\n ? subTopicHeading.map((i, index) => {\r\n return (\r\n \r\n );\r\n })\r\n : ''}\r\n {subTopicHeading?.length && searchEnteredSubTopics?.length !== 0\r\n ? searchEnteredSubTopics.map((i, id) => {\r\n return (\r\n \r\n )}\r\n
\r\n \r\n setSideBarSearch(true)}\r\n />\r\n\r\n {wordEntered?.length ? (\r\n clearSearch()}\r\n >\r\n ) : (\r\n \r\n )}\r\n
\r\n\r\n \r\n {TopicHeading ? (\r\n \r\n {!isOpen ? (\r\n
\r\n \r\n\r\n {noResults ? (\r\n \r\n {t('USER_GUIDE.NO_RESULTS_FOUND')}\r\n
\r\n- \r\n
\r\n \r\n handleManageCropsBackButton()}\r\n />\r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n {allData\r\n ? allData.map((i, id) => {\r\n return (\r\n
\r\n );\r\n })\r\n : ''}\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n {getAllTopicDataList[0]?.name}
\r\n \r\n {getAllTopicDataList[0]?.description}\r\n
\r\n\r\n {allData\r\n ? allData.map((i, id) => {\r\n return (\r\n
\r\n \r\n
\r\n \r\n {i.title}
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default UserGuideDetailPage;\r\n","import React, { useState, useEffect } from 'react';\r\nimport { t } from 'react-multi-lang';\r\nimport { useHistory } from 'react-router-dom';\r\nimport '../../assets/CSS/Common.css';\r\nimport '../../assets/CSS/UserGuideSearchContent.css';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { searchContentUserGuideRequest } from '../../redux/actions';\r\nimport _ from 'lodash';\r\nimport Loader from '../../Components/common/loader';\r\nimport RightArrow from '../../assets/Images/back-button.svg';\r\nimport { Row, Col, Card } from 'reactstrap';\r\nimport { htmlToText } from '../../Components/common/utils';\r\nimport '../../assets/CSS/StaticSidebar.css';\r\nimport Footer from '../landing-page/footer';\r\n\r\nfunction UserSearchContentPage() {\r\n const [searchContent, setSearchContent] = useState([]);\r\n const dispatch = useDispatch();\r\n let history = useHistory();\r\n const {\r\n searchContentUserGuideData,\r\n isGetAllUserGuideRequesting,\r\n isSearchContentUserGuideRequesting,\r\n } = useSelector(state => ({\r\n searchContentUserGuideData: state.UserGuide.searchContentUserGuideData,\r\n isSearchContentUserGuideRequesting: state.UserGuide.isSearchContentUserGuideRequesting,\r\n isGetAllUserGuideRequesting: state.UserGuide.isGetAllUserGuideRequesting,\r\n }));\r\n let search = window.location.search;\r\n let URLParams = new URLSearchParams(search);\r\n let searchWord = URLParams.get('q');\r\n useEffect(() => {\r\n if (searchWord?.length !== 0) {\r\n dispatch(searchContentUserGuideRequest({ content: searchWord }));\r\n }\r\n }, []);\r\n useEffect(() => {\r\n let serchedResults = [];\r\n setSearchContent([]);\r\n if (searchContentUserGuideData?.data) {\r\n const { data } = searchContentUserGuideData?.data;\r\n if (!_.isEmpty(data) && !_.isEmpty(data?.result)) {\r\n data.result.map(item => {\r\n serchedResults.push(item);\r\n });\r\n setSearchContent(serchedResults);\r\n }\r\n }\r\n }, [searchContentUserGuideData]);\r\n const handleSubTopicListItem = ( topic_id, subtopic_name, topic_name) => {\r\n history.push(`/user-guide-details?topicId=${topic_id}&&sub-topic-name=${subtopic_name}&topic_name=${topic_name}`)\r\n};\r\n const handleManageCropsBackButton = () => {\r\n history.goBack();\r\n };\r\n return (\r\n <>\r\n \r\n {isGetAllUserGuideRequesting &&
\r\n \r\n );\r\n}\r\n\r\nexport default UserSearchContentPage;\r\n","import React, { useEffect } from 'react';\r\nimport { useState } from 'react';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { getAllUserGuideRequest } from '../../redux/actions';\r\nimport CreateUserGuidePage from './CreateUserGuidePage';\r\nimport _ from 'lodash';\r\nconst ManageForm = props => {\r\n const dispatch = useDispatch();\r\n const { UserGuide } = useSelector(state => ({\r\n UserGuide: state.UserGuide,\r\n }));\r\n const place=[\r\n {id:1,label: \"Before\" ,value:\"before\"},\r\n {id:2,label: \"After\" ,value:\"after\"},\r\n ]\r\n const [defaultUserGuideOptions, setDefaultUserGuideOptions] = useState({});\r\n const [categoryList, setCategoryList] = useState([]);\r\n const [fromListing, setFromListing] = useState(false);\r\n const [fromManageUser, setFromManageUser] = useState(false);\r\n const [subTopicOptions, setSubTopicOptions] = useState();\r\n\r\n\r\n const [formUserGuideData, setFormUserGuideData] = useState({\r\n id: '',\r\n topic: '',\r\n topic_id: '',\r\n sub_topic: '',\r\n sub_topic_id: '',\r\n title: '',\r\n description: '',\r\n publish_status: false,\r\n before_sub_topic_order:'',\r\n level:'',\r\n });\r\n\r\n useEffect(() => {\r\n let search = window.location.search;\r\n let URLParams = new URLSearchParams(search);\r\n let topicId = URLParams.get('category');\r\n let Id = URLParams.get('unique');\r\n let subTopicId = URLParams.get('sub-category');\r\n\r\n if (!_.isEmpty(topicId) && !_.isEmpty(subTopicId)) {\r\n dispatch(\r\n getAllUserGuideRequest({\r\n data: { id: Id, topic_id: topicId, subtopic_id: subTopicId, is_delete: 'False',is_backoffice: \"True\" },\r\n }),\r\n );\r\n } else {\r\n dispatch(getAllUserGuideRequest({ data: { id: Id, topic_id: topicId, is_delete: 'False',is_backoffice: \"True\" } }));\r\n }\r\n setFromManageUser(true);\r\n setDefaultUserGuideOptions({});\r\n return () => {\r\n setFromManageUser(false);\r\n };\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (UserGuide?.getAllTopicData) {\r\n if (UserGuide?.getAllTopicData?.data) {\r\n const {\r\n data: { result },\r\n } = UserGuide?.getAllTopicData?.data;\r\n setCategoryList(result);\r\n }\r\n }\r\n }, [UserGuide.getAllTopicData]);\r\n\r\n\r\n useEffect(() => {\r\n if (UserGuide.getAllUserGuideData?.data?.result?.results) {\r\n let new_list = [];\r\n const {\r\n data: { result },\r\n } = UserGuide.getAllUserGuideData;\r\n if (result) {\r\n const { results } = result;\r\n if (results?.length) {\r\n const action = props.match.params?.action;\r\n if (action === 'edit' && fromManageUser) {\r\n afterUpdate(results[0]);\r\n setFromListing(true);\r\n } else {\r\n setDefaultUserGuideOptions({});\r\n setFromListing(false);\r\n setFormUserGuideData({\r\n id: '',\r\n topic: '',\r\n topic_id: '',\r\n sub_topic: '',\r\n sub_topic_id: '',\r\n title: '',\r\n description: '',\r\n publish_status: false,\r\n before_sub_topic_order:'',\r\n level:'',\r\n });\r\n }\r\n }\r\n }\r\n }\r\n }, [UserGuide.getAllUserGuideData]);\r\n\r\n useEffect(() => {\r\n if (UserGuide.updateUserGuideData) {\r\n setFormUserGuideData({\r\n id: '',\r\n topic: '',\r\n topic_id: '',\r\n sub_topic: '',\r\n sub_topic_id: '',\r\n title: '',\r\n description: '',\r\n publish_status: false,\r\n });\r\n\r\n dispatch(getAllUserGuideRequest({ page: 1, data: { is_delete: 'False' ,is_backoffice: \"True\"} }));\r\n }\r\n }, [UserGuide.updateUserGuideData]);\r\n\r\n /**\r\n * added by : sai krishna thalla\r\n * reason : add default order and levels while updating the user guide\r\n * date: 8-sep-2022\r\n */\r\n useEffect(()=>{\r\n if (!_.isEmpty(categoryList) && formUserGuideData?.topic){\r\n renderAPISubTopicOptions(categoryList,formUserGuideData?.topic)\r\n }\r\n },[categoryList,formUserGuideData?.topic])\r\n\r\n\r\n useEffect(()=>{\r\n if (subTopicOptions?.length && subTopicOptions && defaultUserGuideOptions.order_subtopic_id){\r\n let orderOption = subTopicOptions.find(i => i.id == defaultUserGuideOptions?.order_subtopic_id)\r\n let obj = _.clone(defaultUserGuideOptions)\r\n obj.Beforesubtopic = orderOption\r\n setDefaultUserGuideOptions(obj)\r\n }\r\n },[subTopicOptions,defaultUserGuideOptions.order_subtopic_id])\r\n\r\n const renderAPISubTopicOptions = (list, option) => {\r\n if (list) {\r\n let params = [...list];\r\n let options = [];\r\n let requiredTopic = params.filter(param => param.name === option);\r\n if (requiredTopic?.length) {\r\n let requiredSubTopic = requiredTopic[0].sub_topic;\r\n\r\n if (requiredSubTopic?.length) {\r\n requiredSubTopic.forEach(element => {\r\n let data = {\r\n value: element.name,\r\n label: `${element.name}`,\r\n id: element.id,\r\n order:element.order,\r\n };\r\n options.push(data);\r\n });\r\n setSubTopicOptions(options);\r\n } else {\r\n setSubTopicOptions([]);\r\n }\r\n }\r\n }\r\n };\r\n\r\n const afterUpdate = data => {\r\n let arr = {\r\n topic: {\r\n id: data?.topic_id,\r\n value: data?.topic_name,\r\n label: data?.topic_name,\r\n },\r\n subtopic: data?.subtopic_name,\r\n title: data?.title,\r\n status: data?.status,\r\n order:data?.order,\r\n level:data?.level,\r\n order_subtopic_id:data?.order_subtopic_id\r\n };\r\n formUserGuideData.topic = data?.topic_name;\r\n formUserGuideData.topic_id = data?.topic_id;\r\n formUserGuideData.sub_topic = data?.subtopic_name;\r\n formUserGuideData.sub_topic_id = data?.subtopic_id;\r\n formUserGuideData.description = data?.content;\r\n formUserGuideData.publish_status = data?.status;\r\n formUserGuideData.title = data?.title;\r\n formUserGuideData.id = data?.id;\r\n formUserGuideData.level= data?.level;\r\n formUserGuideData.before_sub_topic_order = data?.order;\r\n formUserGuideData.before_sub_topic_id = data?.order_subtopic_id\r\n setDefaultUserGuideOptions(arr);\r\n setFormUserGuideData({ ...formUserGuideData });\r\n };\r\n\r\n const handleFromManageUserGuide = data => {\r\n setFromManageUser(false);\r\n };\r\n return (\r\n <>\r\n \r\n handleManageCropsBackButton()}\r\n />\r\n \r\n {t('USER_GUIDE.SEARCHED_RESULTS')} \"{{searchWord.toUpperCase()}}\"\r\n \r\n
\r\n\r\n \r\n {isSearchContentUserGuideRequesting && (\r\n \r\n \r\n )}\r\n \r\n {searchContent?.map(item => {\r\n return (\r\n
\r\n
\r\n \r\n
\r\n )}\r\n {!isSearchContentUserGuideRequesting &&\r\n _.isEmpty(searchContent) &&\r\n searchContentUserGuideData && (\r\n {t('USER_GUIDE.NO_RESULTS')}
\r\n\r\n \r\n handleSubTopicListItem( item.topic_id,item.subtopic_name ,item.topic_name)\r\n }\r\n >\r\n
\r\n \r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n {item?.subtopic_name?.length > 21\r\n ? item?.subtopic_name?.substring(0, 22) + '...'\r\n : item?.subtopic_name}\r\n
\r\n {htmlToText(item.content)?.length > 170 ? (\r\n\r\n
\r\n ) : (\r\n \r\n {htmlToText(item.content).substring(0, 170) + '...'}\r\n
\r\n \r\n \r\n
\r\n \r\n {isGetAllUserGuideRequesting &&
\r\n \r\n \r\n \r\n \r\n
\r\n \r\n {\r\n setIsOpen(!isOpen);\r\n }}\r\n >\r\n
\r\n \r\n \r\n {!isOpen ? (\r\n
\r\n \r\n \r\n handleManageCropsBackButton()}\r\n />\r\n \r\n
\r\n { searchContent.length == 0 && !isGetAllUserGuideRequesting ?
\r\n );\r\n })\r\n : ''}\r\n \r\n \r\n \r\n {t('USER_GUIDE.NO_RESULTS_FOUND')}\r\n
: ''}\r\n {searchContent\r\n ? searchContent.map((i) => {\r\n return (\r\n\r\n
\r\n {i.title}
\r\n\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default UserSearchDetailPage;\r\n\r\n\r\n","export default __webpack_public_path__ + \"static/media/AboutUs2.95b50068.jpeg\";","export default __webpack_public_path__ + \"static/media/aboutUsBackImage.df85888b.png\";","export default __webpack_public_path__ + \"static/media/AboutUs1.6e8d0854.jpeg\";","export default __webpack_public_path__ + \"static/media/AboutUs3.97e77e76.jpeg\";","import AboutUsImage2 from '../../assets/Images/AboutUs2.jpeg';\r\nimport AboutUsImage4 from '../../assets/Images/aboutUsBackImage.png';\r\nimport TopBannerImage from '../../assets/Images/AboutUs1.jpeg';\r\nimport BottomBannerImage from '../../assets/Images/AboutUs3.jpeg';\r\nimport _ from 'lodash';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { t } from 'react-multi-lang';\r\nimport { Row, Col } from 'reactstrap';\r\nimport '../../assets/CSS/StaticSidebar.css';\r\nimport Footer from './footer';\r\nimport { getToken } from '../../Components/common/utils';\r\n\r\nconst AboutUs = props => {\r\n let history = useHistory();\r\n window.scrollTo({ top: 0, behavior: 'auto' });\r\n return (\r\n <>\r\n \r\n 
\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n {/*
\r\n {t('ABOUT_US.ABOUT_US_CONTENT')}
*/}\r\n\r\n
\r\n \r\n {t('ABOUT_US.ABOUT_US_CONTENT_ONE')}
\r\n{t('ABOUT_US.ABOUT_US_CONTENT_TWO')}
\r\n\r\n 
\r\n 
\r\n
\r\n \r\n \r\n 
\r\n
\r\n {/* hide this section in future */}\r\n \r\n
\r\n {/* Footer here */}\r\n \r\n \r\n );\r\n};\r\n\r\nexport default AboutUs;\r\n","import React, { useEffect, useState } from 'react';\r\nimport { ListGroup, ListGroupItem} from 'reactstrap';\r\n\r\nconst Menu = props => {\r\n const { handleSelectedItem } = props;\r\n \r\n\r\n const [year, setYear] = useState([])\r\n const [selectedYear, setSelectedYear] = useState(new Date().getFullYear())\r\n\r\n const handleSelectedMenuItem = value => {\r\n setSelectedYear(value)\r\n handleSelectedItem(value);\r\n };\r\n\r\n\r\n useEffect(() => {\r\n let listOfYears = []\r\n \r\n for (let i = new Date().getFullYear(); i >= (new Date().getFullYear() - 4 ) ; i--) {\r\n listOfYears.push(i)\r\n }\r\n setYear(listOfYears)\r\n }, [])\r\n return (\r\n \r\n
\r\n {t('HOME_PAGE.KEEP_IN_TOUCH')}
\r\n \r\n {t('HOME_PAGE.REGISTER')}\r\n {!getToken() ? (\r\n \r\n ) : (\r\n ''\r\n )}\r\n \r\n\r\n {/* \r\n {year?.map((i,index) => {\r\n return (\r\n handleSelectedMenuItem(i)}\r\n action\r\n key={index}\r\n >\r\n {i}\r\n \r\n );\r\n })}\r\n \r\n
\r\n );\r\n};\r\nexport default Menu;\r\n","export const required = value => {\r\n return !value;\r\n};\r\n","import React, { useState, useEffect } from 'react';\r\nimport { Row, Col, Card, Button, Modal, ModalBody, ModalHeader } from 'reactstrap';\r\nimport { Field, reduxForm } from 'redux-form';\r\nimport {\r\n renderReactSelectInputField,\r\n renderTextField,\r\n} from '../../Components/common/renderInputField';\r\nimport { t } from 'react-multi-lang';\r\nimport { renderDateFormat } from '../../Components/common/utils';\r\nimport { renderOptions } from '../../Components/helpers';\r\nimport { required } from '../../Components/constants/validate';\r\nimport { createRef } from 'react';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { useCallback } from 'react';\r\nimport { useDispatch } from 'react-redux';\r\nimport { MONTHLY_BULLETIN, LOCATION } from '../../Components/constants';\r\nimport {\r\n getDistrictByStateRequest,\r\n} from '../../redux/actions';\r\nimport Select from 'react-select';\r\n\r\n\r\nfunction CreateBulletin(props) {\r\n const [startDate, setStartDate] = useState(null);\r\n const dispatch = useDispatch();\r\n const [indicators, setIndicators] = useState([]);\r\n const [countrysList, setCountryList] = useState([]);\r\n const [statesList, setStateList] = useState([]);\r\n const [districtsList,setDistrictList] = useState([]);\r\n const [bulletinType, setBulletinType]= useState('');\r\n const [state, setState] = useState();\r\n const [country, setCountry]=useState();\r\n const [district, setDistrict]= useState();\r\n\r\n const [selectedLocation, setSelectedLocation] = useState({\r\n country: {},\r\n state: {},\r\n district: {},\r\n });\r\n const {\r\n handleSubmit,\r\n isOpen,\r\n toggleModal,\r\n LocationData,\r\n isBulletinPage,\r\n indicatorsList,\r\n bulletinCategories,\r\n initialValues,\r\n setIndicatorRows,\r\n setMapRefs,\r\n indicatorRows,\r\n setEachRowAPIPayload,\r\n } = props;\r\n const history = useHistory();\r\n\r\n\r\n const onSubmit = values => {\r\n toggleModal();\r\n let indicators = values.indicators?.length\r\n ? values.indicators.map(item => {\r\n return item.label;\r\n })\r\n : [];\r\n \r\n let country =\"\"\r\n if(values?.country?.label){\r\n country=values.country.label\r\n }else{\r\n country=\"Zambia\"\r\n }\r\n \r\n let state=\"\";\r\n\r\n if(values?.province?.label){\r\n if(values?.province?.label==\"Select All\"){\r\n state=\"\"\r\n }else{\r\n state = values.province.label\r\n }\r\n }else{\r\n state=\"\"\r\n } \r\n\r\n let district=\"\";\r\n if (values?.district?.label){\r\n if(values?.district?.label==\"Select All\"){\r\n district=\"\"\r\n }else{\r\n district = values.district.label\r\n }\r\n }\r\n else{\r\n district=\"\"\r\n };\r\n let startDate;\r\n let endDate;\r\n if((bulletinType === MONTHLY_BULLETIN ) || (initialValues?.bulletinType?.label === MONTHLY_BULLETIN)){\r\n startDate = `${values.startDate}-01`;\r\n endDate=`${values.startDate}-28`;\r\n }else{\r\n startDate = values.startDate;\r\n endDate = values.endDate;\r\n }\r\n toggleModal();\r\n const newQueryParams = `?country=${country.toString()}&state=${state.toString()}&district=${district.toString()}&indicators=${indicators.toString()}&startDate=${\r\n startDate\r\n }&endDate=${endDate}&bulletinType=${values.bulletinType.label}&bulletinId=${values.bulletinType.id}`;\r\n\r\n\r\n if (!isBulletinPage) {\r\n history.push({\r\n pathname: '/create-online-bulletin',\r\n search: newQueryParams,\r\n });\r\n } else {\r\n setMapRefs(prev => ({\r\n ...prev,\r\n [`row${Object.keys(indicatorRows)?.length}`]: createRef({}),\r\n }));\r\n const formData = {\r\n country : \"Zambia\",\r\n state: values.province?.label,\r\n district :values.district?.label,\r\n indicatorsList: values.indicators,\r\n startDate: startDate,\r\n endDate: endDate,\r\n };\r\n // data for api call\r\n setEachRowAPIPayload(formData);\r\n // pushing row into existing row data\r\n setIndicatorRows(prev => ({\r\n ...prev,\r\n [`row${Object.keys(prev)?.length}`]: formData,\r\n }));\r\n }\r\n };\r\n\r\n useEffect(() => { \r\n if (LocationData.countryList) {\r\n const { result } = LocationData.countryList;\r\n if (result?.[0]) {\r\n let arr = [];\r\n result.map((i) => {\r\n return arr.push({\r\n id: i.id,\r\n name: i.name,\r\n value: i.name,\r\n label: i.name,\r\n region_id: i.region_id,\r\n latitude: i.latitude,\r\n longitude: i.longitude,\r\n zoom_level: i.zoom_level,\r\n });\r\n });\r\n setCountryList(arr);\r\n }\r\n }\r\n }, [LocationData.countryList]);\r\n\r\n useEffect(() => {\r\n if (LocationData.stateList) {\r\n let result=[]\r\n let defaultOption = { value: '', label: 'Select All', id: 'select',name:\"Select All\" };\r\n result.push(defaultOption)\r\n // if (LocationData?.stateList?.data) result.push(LocationData?.stateList?.data?.result);\r\n if (LocationData?.stateList?.data){\r\n LocationData?.stateList?.data.result.map( param => {\r\n result.push(param);\r\n return true;\r\n });\r\n // return result;\r\n }\r\n setStateList(result);\r\n }\r\n }, [LocationData.stateList]);\r\n\r\n\r\n\r\n useEffect(()=>{\r\n if(LocationData.districtList){\r\n let result=[];\r\n let defaultOption = { value: '', label: 'Select All', id: 'select',name:\"Select All\" };\r\n result.push(defaultOption)\r\n if(LocationData?.districtList?.data){\r\n LocationData?.districtList?.data.result.map( param => {\r\n result.push(param);\r\n return true;\r\n });\r\n } \r\n setDistrictList(result);\r\n }\r\n },[LocationData.districtList]);\r\n\r\n\r\n const handleIndicators = useCallback(e => {\r\n if (e.length < 4) {\r\n setIndicators(e);\r\n }\r\n }, []);\r\n\r\n const handleBulletinType=(e)=>{\r\n setBulletinType(e.name)\r\n }\r\n\r\n const handleSelectedCountry = (e)=>{\r\n setCountry(e.name)\r\n }\r\n\r\n const handleSelectedState = (e) =>{\r\n setState(e.name)\r\n }\r\n const handleSelectedDistrict =(e)=>{\r\n setDistrict(e.name)\r\n }\r\n\r\n\r\n useEffect(()=>{\r\n if( state){\r\n let stateObject = LocationData?.stateList?.data?.result.filter((item)=>{\r\n return item.name==state\r\n })\r\n setSelectedLocation((prev) => {\r\n return {\r\n ...prev,\r\n state: stateObject,\r\n };\r\n });\r\n dispatch(\r\n getDistrictByStateRequest({\r\n requestObj: {\r\n location_type: LOCATION.District,\r\n parent_id: stateObject[0]?.id,\r\n },\r\n isCompareLocation: false,\r\n }),\r\n );\r\n }\r\n },[state])\r\n\r\n useEffect (()=>{\r\n if(district){\r\n let districtObject = LocationData?.districtList?.data?.result.filter((item)=>{\r\n return item.name === district\r\n })\r\n setSelectedLocation((prev)=>{\r\n return{\r\n ...prev,\r\n district :districtObject,\r\n }\r\n })\r\n }\r\n},[district])\r\n\r\n const getCurrentYearMonth = () => {\r\n let dateObj = new Date();\r\n let month =\r\n (dateObj.getMonth() + 1) % 10 !== dateObj.getMonth() + 1\r\n ? dateObj.getMonth() + 1\r\n : `0${dateObj.getMonth() + 1}`;\r\n return dateObj.getUTCFullYear() + '-' + month;\r\n };\r\n\r\n\r\n return (\r\n Year
*/}\r\n{t('ONLINE_BULLETIN.CREATE_BULLETIN.HEADER')}
\r\n\r\n {isOpenBulletin && (\r\n \r\n history.goBack()}\r\n />\r\n \r\n
\r\n
\r\n\r\n \r\n {t('BULLET_IN.ALL_PUBLISHED_BULLETIN')}\r\n
\r\n \r\n\r\n
\r\n );\r\n};\r\n\r\nexport default reduxForm({\r\n form: 'create-bulletin-pdf',\r\n enableReinitialize: true,\r\n})(CreateBulletinPdf);\r\n","import React, { memo, useState, useEffect } from 'react';\r\nimport { Row, Col, Modal, ModalBody } from 'reactstrap';\r\nimport { GrFormClose } from 'react-icons/gr';\r\nimport { t } from 'react-multi-lang';\r\nimport { Field, reduxForm } from 'redux-form';\r\nimport {\r\n renderImageField\r\n} from '../../../Components/common/renderInputField';\r\n\r\nconst PublishModel = props => {\r\n const [selectedImage, setSelectedImage] = useState(null);\r\n const [imageUrl, setImageUrl] = useState(null);\r\n const [validSize, setValidSize] = useState(false);\r\n\r\n const handlePublish = () => {\r\n props.publishBulletin();\r\n props?.isToggle();\r\n };\r\n\r\n const handleImage = (e) => {\r\n setSelectedImage(e.target.files[0])\r\n var reader = new FileReader();\r\nreader.readAsDataURL(e.target.files[0]);\r\nreader.onload = function (e) {\r\n var image = new Image();\r\n image.src = e.target.result;\r\n image.onload = () => {\r\n console.log(image.height,\"height\");\r\n console.log(image.width,\"width\");\r\n if (image.height <= image.width && image.width > 450) {\r\n setValidSize(true);\r\n }else{\r\n setValidSize(false);\r\n }\r\n \r\n };\r\n};\r\n props.handlePreviewImage(e);\r\n};\r\n\r\nuseEffect(() => {\r\n if (selectedImage) {\r\n setImageUrl(URL.createObjectURL(selectedImage));\r\n }\r\n}, [selectedImage]);\r\n\r\n return (\r\n <>\r\n \r\n \r\n
\r\n\r\n */}\r\n \r\n categoryFilter[1] && handleSelectedCategory(categoryFilter[1])}\r\n >\r\n {categoryFilter[1]?.name}\r\n \r\n\r\n categoryFilter[0] && handleSelectedCategory(categoryFilter[0])}\r\n >\r\n {categoryFilter[0]?.name}\r\n \r\n \r\n \r\n {t('NEWS_FEED.SUBSCRIBED')}\r\n \r\n )}\r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n \r\n handleEmailInput(e)}\r\n />\r\n \r\n \r\n {t('NEWS_FEED.SUBMIT')}\r\n \r\n \r\n
\r\n
\r\n ) : (\r\n \r\n ))\r\n ) : (\r\n \r\n
{Bulletin.isGetAllBulletinRequesting &&
\r\n {_.isEmpty(dataList) && !Bulletin.isGetAllBulletinRequesting && (\r\n \r\n {t('BULLET_IN.NO_RECORDS_FOUND')}\r\n
\r\n )}\r\n{t('BULLET_IN.LOADING')}
\r\n \r\n )\r\n }\r\n className=\"flex flex-wrap\"\r\n >\r\n\r\n \r\n {dataList?.length ? (\r\n dataList?.map((item, index) => {\r\n return (\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n {\r\n pdfPreviewHandler(e, item);\r\n }}\r\n >\r\n
\r\n \r\n );\r\n })\r\n ) : (\r\n <>\r\n )}\r\n \r\n \r\n {item?.topic?.length > 25\r\n ? item?.topic?.substring(0, 25) + '...'\r\n : item?.topic}\r\n \r\n \r\n {item?.category_name}\r\n \r\n\r\n \r\n {t('BULLET_IN.CLICK_TO_DOWNLOAD')}\r\n \r\n
{' '}\r\n \r\n \r\n {!item?.is_publish ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n )}\r\n \r\n \r\n
\r\n \r\n );\r\n};\r\nexport default HomePageBulletin;\r\n","import React, { useState, useEffect, useRef } from 'react';\r\nimport { Label, Input, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';\r\nimport Button from 'reactstrap-button-loader';\r\nimport { t } from 'react-multi-lang';\r\nimport RightArrow from '../../assets/Images/back-button.svg';\r\nimport { useLocation, useHistory } from 'react-router-dom';\r\nimport Select from 'react-select';\r\nimport { renderImageField, renderFileField } from '../../Components/common/renderInputField';\r\nimport {\r\n addBulletinRequest,\r\n getAllTemplateListRequest,\r\n updateBulletinRequest,\r\n approveRejectBulletinRequest,\r\n} from '../../redux/bulletin/bulletinActions';\r\nimport { Field, reduxForm } from 'redux-form';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { isSuperAdmin, isStaffUser } from '../../Components/common/utils';\r\nimport { BULLETIN_CODES } from '../../Components/constants';\r\nimport _ from 'lodash';\r\nimport { showSuccess, showError } from '../../Components/Notifications';\r\n\r\nconst CreateBulletinPdf = () => {\r\n const [formData, setFormData] = useState({\r\n topic: '',\r\n content_file: '',\r\n bulletin_file: '',\r\n category_id: '',\r\n id: '',\r\n });\r\n const [templateListOptions, setTemplateListOptions] = useState([]);\r\n const [uploadedImageName, setUploadedImageName] = useState('');\r\n const [uploadedFileName, setUploadedFileName] = useState('');\r\n const [userPermisions, setUserPermisions] = useState([]);\r\n const [Buttonclicked, setButtonclicked] = useState(false);\r\n const [approveButtonLoader, setApproveButtonLoader] = useState(false);\r\n const [isImageUploaded, setIsImageUploaded] = useState(false);\r\n const [rejectionText, setRejectionText] = useState('');\r\n const [openModal, setOpenModal] = useState(false);\r\n const [textAreaCount, ChangeTextAreaCount] = useState(0);\r\n const [changeImageUpdate, setChangeImageUpdate] = useState(false);\r\n\r\n const dispatch = useDispatch();\r\n let form = new FormData();\r\n const { Bulletin } = useSelector(state => ({\r\n Bulletin: state.Bulletin,\r\n }));\r\n\r\n const history = useHistory();\r\n const location = useLocation();\r\n\r\n const nextProps = useSelector(state => ({\r\n userDetailData: state.userList.userDetailData || null,\r\n userPermissionsData: state.userList.userPermissionsData || null,\r\n }));\r\n\r\n useEffect(() => {\r\n if (nextProps.userPermissionsData && nextProps.userDetailData) {\r\n const {\r\n data: {},\r\n } = nextProps.userPermissionsData;\r\n const {\r\n data: {\r\n result: { user_permissions },\r\n },\r\n } = nextProps?.userDetailData;\r\n let a = [];\r\n if (user_permissions) {\r\n BULLETIN_CODES.map(i => {\r\n user_permissions?.map(j => {\r\n if (i === j.codename) {\r\n a?.push(i);\r\n }\r\n });\r\n });\r\n }\r\n setUserPermisions(a);\r\n }\r\n }, [nextProps.userPermissionsData, nextProps.userDetailData]);\r\n\r\n const isFirstRun = useRef(true);\r\n useEffect(() => {\r\n if (!isFirstRun.current) {\r\n return;\r\n }\r\n if (!_.isEmpty(location?.state?.[2]) && templateListOptions) {\r\n const selectedCategory = _.find(templateListOptions, {\r\n label: location?.state[2]?.category_name,\r\n });\r\n if (selectedCategory) {\r\n isFirstRun.current = false;\r\n setFormData({\r\n ...formData,\r\n category_id: selectedCategory,\r\n topic: location?.state[2]?.topic,\r\n id: location?.state[2]?.id,\r\n });\r\n setChangeImageUpdate(true);\r\n }\r\n }\r\n }, [templateListOptions]);\r\n useEffect(() => {\r\n if (isStaffUser() || isSuperAdmin()) {\r\n dispatch(getAllTemplateListRequest());\r\n } else {\r\n history.push('/home');\r\n }\r\n window.scroll(0, 0);\r\n }, []);\r\n\r\n useEffect(() => {\r\n if (Bulletin?.getAllTemplateListData) {\r\n let options = renderTemplateListOptions(Bulletin?.getAllTemplateListData)\r\n ? renderTemplateListOptions(Bulletin?.getAllTemplateListData)\r\n : null;\r\n if (options?.length && options) {\r\n setTemplateListOptions(options);\r\n }\r\n }\r\n }, [Bulletin]);\r\n\r\n useEffect(() => {\r\n if (Bulletin?.addBulletinData?.data && Buttonclicked) {\r\n showSuccess(Bulletin?.addBulletinData?.data?.data?.result);\r\n history.goBack();\r\n }\r\n }, [Bulletin.addBulletinData]);\r\n\r\n useEffect(() => {\r\n if (Bulletin?.updateBulletinData?.data?.data?.result && Buttonclicked) {\r\n showSuccess(Bulletin?.updateBulletinData?.data?.data?.result);\r\n history.goBack();\r\n }\r\n }, [Bulletin.updateBulletinData]);\r\n\r\n useEffect(() => {\r\n if (Bulletin?.approveRejectData && Buttonclicked) {\r\n showSuccess(Bulletin?.approveRejectData?.data?.data?.result);\r\n history.goBack();\r\n }\r\n }, [Bulletin.approveRejectData]);\r\n\r\n useEffect(() => {\r\n let message =\r\n Bulletin?.addBulletinDataError?.data?.response?.data?.message ||\r\n Bulletin?.updateBulletinDataError?.data?.response?.data?.message;\r\n if (message && message[0] && Buttonclicked) {\r\n showError(message[0]);\r\n setButtonclicked(false);\r\n }\r\n }, [Bulletin]);\r\n\r\n const renderTemplateListOptions = data => {\r\n if (data) {\r\n let list = data?.data?.data?.result;\r\n let params = [...list];\r\n let options = [];\r\n if (params?.length) {\r\n params.map(param => {\r\n let data = {\r\n value: param?.id,\r\n label: `${param?.name}`,\r\n id: param?.id,\r\n };\r\n options.push(data);\r\n return true;\r\n });\r\n return options;\r\n }\r\n }\r\n };\r\n\r\n const handleCategoryChange = e => {\r\n setFormData({ ...formData, category_id: e });\r\n };\r\n const handleImage = e => {\r\n handleImageUpdateToggle();\r\n setFormData({ ...formData, content_file: e?.target?.files[0] });\r\n\r\n setIsImageUploaded(true);\r\n if (e?.target?.files[0]?.name) {\r\n setUploadedImageName(e?.target?.files[0]?.name);\r\n }\r\n };\r\n\r\n const handleImageUpdateToggle = () => {\r\n setChangeImageUpdate(false);\r\n };\r\n\r\n const toBase64 = file => new Promise((resolve, reject) => {\r\n const reader = new FileReader();\r\n reader.readAsDataURL(file);\r\n reader.onload = () => resolve(reader.result);\r\n reader.onerror = error => reject(error);\r\n});\r\n\r\n const handleContent = async e => {\r\n const base64 = await toBase64(e?.target?.files[0])\r\n const slicedBase64 = base64.slice(28, )\r\n setFormData({ ...formData, bulletin_file:slicedBase64 });\r\n\r\n if (e?.target?.files[0]?.name) {\r\n setUploadedFileName(e?.target?.files[0]?.name);\r\n }\r\n };\r\n const handleTitle = e => {\r\n setFormData({ ...formData, topic: e?.target?.value });\r\n };\r\n\r\n const handleSubmit = () => {\r\n setButtonclicked(true);\r\n form.append('topic', formData?.topic);\r\n form.append('content_file', formData?.content_file);\r\n form.append('bulletin_content', formData?.bulletin_file);\r\n form.append('category_id', formData?.category_id?.value);\r\n form.append('template_id', '');\r\n form.append('html_content', '');\r\n form.append('json_content', '');\r\n dispatch(addBulletinRequest(form));\r\n };\r\n\r\n const handleUpdate = () => {\r\n setButtonclicked(true);\r\n form.append('topic', formData?.topic);\r\n form.append('content_file', formData?.content_file);\r\n form.append('bulletin_content', formData?.bulletin_file);\r\n form.append('category_id', formData?.category_id?.value);\r\n form.append('template_id', '');\r\n form.append('html_content', '');\r\n form.append('json_content', '');\r\n form.append('id', formData?.id);\r\n dispatch(updateBulletinRequest(form));\r\n };\r\n\r\n const handleApprove = () => {\r\n setApproveButtonLoader(true);\r\n form.append('id', location?.state[2]?.id);\r\n form.append('bulletin_status', '1');\r\n dispatch(approveRejectBulletinRequest(form));\r\n setButtonclicked(true);\r\n };\r\n\r\n const handleModalSubmitReject = () => {\r\n form.append('id', location?.state[2]?.id);\r\n form.append('reject_response', rejectionText);\r\n form.append('bulletin_status', '2');\r\n dispatch(approveRejectBulletinRequest(form));\r\n setButtonclicked(true);\r\n };\r\n\r\n const handleReject = () => {\r\n setOpenModal(true);\r\n };\r\n\r\n const handleRejectionText = e => {\r\n setRejectionText(e?.target?.value);\r\n ChangeTextAreaCount(e?.target?.value?.length);\r\n };\r\n\r\n const handleModal = () => {\r\n setOpenModal(!openModal);\r\n };\r\n\r\n const handlePreview = () => {\r\n window.open(location.state?.[2].bulletin_file);\r\n };\r\n return (\r\n \r\n \r\n history.goBack()}\r\n />\r\n \r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n {location.state?.[3] === 'true' && (\r\n \r\n {t('BULLET_IN.PREVIEW')}\r\n \r\n )\r\n // \r\n }\r\n {(isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[3])) &&\r\n location.state?.[3] === 'true' &&\r\n location.state?.[2]?.bulletin_status !== 2 && (\r\n \r\n {t('BULLET_IN.REJECT')}\r\n \r\n )}\r\n {(isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[3])) &&\r\n location.state?.[3] === 'true' &&\r\n location.state?.[2]?.bulletin_status !== 1 && (\r\n \r\n {t('BULLET_IN.APPROVE')}\r\n \r\n )}\r\n
\r\n\r\n {/* */}\r\n \r\n \r\n {t('BULLET_IN.REJECTION_REASON')}\r\n \r\n \r\n {\r\n handleRejectionText(e);\r\n }}\r\n />\r\n \r\n \r\n {\r\n handleModalSubmitReject();\r\n }}\r\n loading={Bulletin?.isApproveRejectRequesting}\r\n >\r\n {t('BULLET_IN.SUBMIT')}\r\n \r\n \r\n \r\n {/*
*/}\r\n \r\n
\r\n {textAreaCount}/500
\r\n\r\n
\r\n \r\n
\r\n {t('BULLET_IN.ADD_BULLETIN')}
\r\n\r\n \r\n
\r\n \r\n {\r\n handleCategoryChange(e);\r\n }}\r\n placeholder={t('NEWS_FEED.SELECT_CATEGORY')}\r\n />\r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n handleTitle(e);\r\n }}\r\n value={formData?.topic}\r\n placeholder={t('NEWS_FEED.SELECT_TITLE')}\r\n />\r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n {\r\n handleImage(e);\r\n }}\r\n isMulti={false}\r\n placeholder={t('NEWS_FEED.UPLOAD_IMAGE')}\r\n >\r\n
\r\n \r\n {!uploadedImageName && location?.state\r\n ? location?.state[2]?.content_file?.split('/').reverse()[0]?.length > 27\r\n ? location?.state[2]?.content_file\r\n ?.split('/')\r\n .reverse()[0]\r\n .substring(0, 23) + '...'\r\n : location?.state[2]?.content_file?.split('/').reverse()[0]\r\n : uploadedImageName?.length > 27\r\n ? uploadedImageName?.substring(0, 23) + '...'\r\n : uploadedImageName}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\r\n handleContent(e);\r\n }}\r\n isMulti={false}\r\n placeholder={t('NEWS_FEED.UPLOAD_CONTENT')}\r\n >\r\n
\r\n \r\n {!uploadedFileName && location?.state\r\n ? location?.state[2]?.bulletin_file?.split('/').reverse()[0]?.length > 27\r\n ? location?.state[2]?.bulletin_file\r\n ?.split('/')\r\n .reverse()[0]\r\n .substring(0, 23) + '...'\r\n : location?.state[2]?.bulletin_file?.split('/').reverse()[0]\r\n : uploadedFileName?.length > 27\r\n ? uploadedFileName?.substring(0, 23) + '...'\r\n : uploadedFileName}\r\n
\r\n \r\n {!location?.state?.[3] ? ( //If data doesn't exist\r\n isSuperAdmin() || userPermisions?.includes(BULLETIN_CODES[0]) ? ( //if has add permission\r\n \r\n {t('BULLET_IN.SUBMIT')}\r\n \r\n ) : (\r\n ''\r\n )\r\n ) : (location.state?.[2]?.bulletin_status === 0 && isSuperAdmin()) ||\r\n userPermisions?.includes(BULLETIN_CODES[1]) ? ( //if data exist\r\n \r\n ) : (\r\n ''\r\n )}\r\n
\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n Upload Preview Image
\r\n)}\r\n
\r\n \r\n
\r\n \r\n {imageUrl && selectedImage && (\r\n 
\r\n )}\r\n
\r\n \r\n \r\n \r\n {t('USER_GUIDE.PUBLISH')}\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n\r\nexport default memo(Header);\r\n","export default __webpack_public_path__ + \"static/media/online-bulletin-img-1.85ed04e2.png\";","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAE8SURBVHgBrZS9SgNBEMfHqLE6wUZJsLjSzoBovWBrMG9gl9cwD2GTWKjPoKVyWHoWBkGM1QpaeAoG0iRFYDJ7l9ts5vYun3+Yu2Nn9sfszc4AWISIguyKTOJIL8O1CkwSBblkHk6WVLFpkBJZG6eXii3ZMpkFYsJcEyRxfnkxpMI9rZsy/vj1xI7/91t8vTjAfq/DXSJHrEQVtvZO4NdvQPDc0Gvt1h18P9TIV4bVDYdvOVujxz5f3T6qhu/Aj0B5p6ghu8fnYJFYUXlBisysMiChcpCh9c2i8V3ICgV1tE8ylzvMf5J3CvqYO4dVG6epQI8cZELM42TAmnFfjentUuDXfS1R/uCpHpa/+/fBXachDll/We6JlgUidV64rBYZwhZvWpaZnALiYdoYYUDVf9cYDbNYEqPBJmx7BlK6sgq5XtPuAAAAAElFTkSuQmCC\"","import React, { memo, useState,useEffect } from 'react';\r\nimport { FaEdit } from 'react-icons/fa';\r\nimport { t } from 'react-multi-lang';\r\nimport { Input, Row, Col } from 'reactstrap';\r\nimport { FiCheck } from 'react-icons/fi';\r\nimport { GrFormClose } from 'react-icons/gr';\r\nimport { getBulletinDateFormat,getBulletinMonthFormat } from '../../../Components/helpers';\r\nimport MEE_IMAGE from '../../../assets/Images/online-bulletin-img-1.png';\r\nimport CGIAR from '../../../assets/Images/online-bulletin-img-2.png';\r\nimport IWMI from '../../../assets/Images/online-bulletin-img-3.png';\r\nimport PlusIcon from '../../../assets/Images/ic_round-plus.png';\r\nimport CrossIcon from '../../../assets/Images/maki_cross.png';\r\n import myConstClass from '../../../Constants';\r\n import { MONTHLY_BULLETIN } from '../../../Components/constants';\r\n import Textarea from 'rc-textarea';\r\n import Header from \"../../../assets/Images/headerBoard.png\";\r\n\r\n\r\n const logoList = [\r\n {\r\n id: 0,\r\n image:MEE_IMAGE,\r\n url:myConstClass.ZAMBIA_URL,\r\n name:\"cgair_wle\",\r\n\r\n\r\n },\r\n {\r\n id: 1,\r\n image:CGIAR,\r\n url:myConstClass.IWMI_URL,\r\n name:\"sadms\",\r\n },\r\n {\r\n id: 2,\r\n image:IWMI,\r\n url:myConstClass.SADMS_URL,\r\n name:\"iwmi\",\r\n },\r\n]\r\nfunction Branding({ queryPrams, title,setTitle}) {\r\n const [isTitleEdit, setIsTitleEdit] = useState(false);\r\n const [isPreparedBy, setIsPreparedBy] = useState(false);\r\n const [file, setFile] = useState([]);\r\n const [shouldHide,setShouldHide] = useState(false);\r\n const [newLogoList,setNewLogoList]= useState(logoList);\r\n\r\n\r\n\r\n const defaultTitle =\r\n queryPrams?.bulletinType === MONTHLY_BULLETIN ? `${\r\n queryPrams.district ? queryPrams.district : queryPrams.state ? queryPrams.state : queryPrams.country\r\n } :\r\n ${getBulletinMonthFormat(queryPrams.endDate,\r\n )}`:\r\n `${\r\n queryPrams.district ? queryPrams.district : queryPrams.state ? queryPrams.state : queryPrams.country\r\n } : ${getBulletinDateFormat(queryPrams.startDate)} - ${getBulletinDateFormat(\r\n queryPrams.endDate,\r\n )}` ;\r\n \r\n function removeImage(id){\r\n setNewLogoList(newLogoList.filter(item=>item.id !== id))\r\n }\r\n \r\n\r\n function uploadSingleFile(e) {\r\n setFile([...file, URL.createObjectURL(e.target.files[0])]);\r\n if (file.length ===1){\r\n setShouldHide(true);\r\n }\r\n }\r\n\r\n const removeFile = (e) => {\r\n const s = file.filter((item, index) => index !== e);\r\n setFile(s);\r\n setShouldHide(false);\r\n };\r\n\r\n\r\n const defaultPreparedBy = `${t('ONLINE_BULLETIN.PREPARED_BY')} : `;\r\n\r\n useEffect(()=>{\r\n setTitle(defaultTitle); \r\n},[defaultTitle])\r\n \r\n const [preparedBy, setPreparedBy] = useState(defaultPreparedBy);\r\n\r\n\r\n\r\n return (\r\n \r\n history.goBack()} />\r\n
\r\n\r\n {t('ONLINE_BULLETIN.CREATE_BULLETIN.HEADER')}
\r\n\r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n );\r\n}\r\n\r\nexport default memo(Branding);\r\n","export default \"data:image/png;base64,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\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAAA4CAYAAAAGsC2fAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABHBSURBVHgB7VsJfFRFmq/jvdfdCVEEGdFBjZILBHR0PNEFFA9ukhhH9KfruI47urMz4y0kgSYJ4K0rM+KyrjMOrqIhCZe4HCrqiteoKBDSSWR0PfDgPpI+XlXtv16nX7o7HW2Oje5v+8+P9Kt6dX5f1XdVPUIyyCCDDDLIIIMMMsgggwwODJQcKpSig0rL+1PBT5AGHdBUV1WXqljB5VMvINIYGk1JQhVtCjTUvJyqbGFp5fVKEa8zQCW/DTTMqo29Gzzef4Lw2MXRZqhSir/VvNj/Tqp2Bk+qPNvm5Ay3T+59KVBbGUjZ58Q7cwg3f0kUpYRTRSJibWDp7I9ID8Egh4jCksqFirFJyiAecGXv4LF3vNG44v6vkstxZTytKDkhmmKawnqSpyaX08SThPw77VgilNDn8OMyQnjtaWDiP7rNULEBT8NSjU0aah4j9GexPpUIzcPDzanKUsscShT7FzfD4LPxt8cYwchBoKDUXxR7ppR9hr+ejmROxOcbnlw+v2zaaYrEmODWHFZQVv7T5LLKUBPi01KRlW7C72dgwvjECiR/4JXlxye3UzT57lziMsHtcyTpBkrKBOmAjaFID+KAGHFy2V1HDiqtXMGIfb/bgLRfii/Diby0SyeKl6ZqD+LssuQ8EH5EXFL5lNEQS+RvCuuVn8w8Lw/RicntKGp1WRDYZYWpmJ8akvQk0mcEVqMlrQVYJmPisxtPs1ZCfuyJpfF+9DHX3J4dXwZra1yqJimRo+LTeb+oGEgp/XlcibfXL/bvcgcr2IRU7TBOy7q0zdR1qYoywceTHyHSZkTBxrBe6V0J4fdLLJ7XY0nI9JOO2utzRVde2dR++PlZ6lbppZrB7mAiVPfhdV8r8kZCaUovTNmMIkM6+nGQO9LvxUBGpC6qRqfMV+zQDZdDQNqMgHi5qduXVNbGJxVTk9x6EZ4sIsKd9cjRJ78fOd0tS8lFCe1QsTD2fMZ4fxZ+8khq9DWk6bbj6WefB4qbqQpSoi4dXOa3yPfioNTnQSPd3rDQycXdvbS9e7QcD8WVdsUXxMY1iaXVs/Epy6DRdsvKOOq5OwfyfP8w1vxBLL3PtM/Bz4DOZsjOhFaJmuwmJLk8qc8NnWOjOREhkt7/8EiLEcOuuT2LqDiRkYTW/5i7BxN0JwuuDc0bM+OIkSNHwjymZ8XyQaxviRSz4+tCp1ypfwvsoiFInOTmK/JObW2tcAtSlSQWxa3op62zIXXRgLJbfB39nx9XsE0RNi++JmfkbJKEQ7bjDxFpMcIO9vp++SnUmriUh/rk+C+PPg9yWrmrGDL+v5oa5jSDaBvj8oblldw5gDJybnxzYFqCuKOExSl2FbKJuQZMXB/XTn629OWfNLb8RCSHxlV92/L4tIjb7taWpIuV1RU/Vqvp+8DlsoQkJSVU8YQJK6qecX4ZXRCfT5VXi6eEFW8R45XY8+DSylPACddpU4Sua62f+bki8t3EQbBRlo9ekdTnyg3PTN2JHbbO7Y+SXKfNHxEOGyNsKlu0Zx1LI/YwEorxgrgiIRIk7znvKF+bMAgqf00TddB/b6jzN8US8C20wnd3JZy6hmif6vn4dmAmD2eEun4MdpUQiq5y+iBkacJ4k0xnm3RBO+lBHDZGtNbO+RZLzRVPEBV9Ez1b1RxYVvOJfso56ssP4pUtyp4Vb+UgfJWg0BEauSQ+LU31mv79eNGsNyGevnHLEXIx/sebrRta66odha+sSLzo1KIuYed0gSIB0oM4rDaaFOKl73j9FnFoRch78+dH8LOMdDsosSL2rP0DDLLTW6fk6+bnqmMxIEge5QYOwdDeJF7vKuqKo6aF93yCLfVxZzPkgqLiqX27GcKO/Xz/C6QHcVgZYRgSXraKdNNVIuEVTRl5Bava2neYbjTVhB8C7vXqfO0w0I0DSaJWkO4gyZvxSaHUgsQh8FFd+9cg1Z/XPvx/UzRpNJ7i3QKLpDXFq3a77ehVCR0bYIyechKwxFd9stYfdNOMJMSjlK0SViqipi9pK4p0aUgpU4rVCWUVW5+Q7hIUdEZWFaivfoT0MA6v+6jDHYwt7ZJPyautL/42gViNtf4dsH7+2qWsTFSqECFjY8/gWrvRbCTsgMBC/1aUaiZd8cHGpbO/js8IKfYqidtNgOvYYWHsxpurm+qr/OQHwEEyovsQMRdsbXKeVDKlvIVV9VpChj7mYdQVS/nFFYMQjo4Pcb/S2OgPJzWjpFJdDqMkpWuT8z5xAojqVbciVcfnlcxw/Jym2uoNTfXVz5AfCOk6lJg81UTj2uXFv3e7K7jH2P1qL9FrGSwdrTg1y6QRNBelLCyMesiPs6BwnQWBHfJh46KqRkKrndcmZ7mQ605AkWrBoshfUjXDBK0nhrpQEeqauFKox1KVRYFFGNs2dNaqJP1Q7g3uJRlkkEEGGWSQQQaHBzjOzJ38+96kh1FYWvlCYem0YeRgcOONZmFxRadjhgDWCePuPqojQeNvfqS6BdLTSO9gaN0+n5cfsSQxVzmmYsHk8rOKSioeTXylUp1f0O7fd6YLSyr/bfDYO/o7FRipOXa71Ui6B42vG03HRWk5da/wDL16am+fz3T8maKy6UOMMA3kl9x9ct6Yf/bg+dnOenFjKZ7+SNJYv3teh4C0Ghl2ye3Z4V6+1XB4hoPoz8Bc/wa+1xClIrdSal0HE18fjS4gEeNPxLAf0tE3NLylqa56amHJ9CfhMAhQVYfAz4Q/sBt+yDDtQTMqahXhD2HyXBLawglfiXPqJ5BeZyv1uEHob1jQuF15VS7OxW/RYW2b0DWIqD5ZUFpZhz52MaUKuC0vD5k8F2etv8O4jpTKntfSb/vKoh3HPNe0qLokNo/Cyyte2uULTjxyn/cqxuhNkpJHqJJgNLuJCl6tmHhcDxz+yBL86POO+xFjedm2xBwrRK+FtzlIKWlSKW4Gl2+UipqUqrxAfc215BCRvmdNo84S/LkiyeR9lLLHKLHOhStWjxfvB+pqZjFTFqPcOpxvVoFofxetp0Yx4qsJ1FU/jrw8W7GnCVO/Qs/Ds8LWbkEi5Ywb1zOiLtzMN72B9puUaUxrrZ/1FghynBJh7RNWoOcKxgLXcUXv6hj4aYG6qhvgea8WhnGex5ZfypC4gynxCKMsdmaeGAGQdGXffZ7RlNFxCBZW4FyjAAXOQQevt7NwiNj8eibkdHj8o5vqqhBcpJsD9VU3U5Ed1KF4LI45KPsZFg3OTlhfwmT4cDChYz4HBH0ztH23N7RLwnd1tm2kI5c4oYzj4f/mmwqHPJQ6R514sXdzfcWn0erYP5zsAUPCuu42n30Mo8ZcrGJN3KyyjgpKRGi0NOUkekPKMoL2tsba2nCMtthZexy/nUbPdMKMDWceY7piRllsWjI5EMPVFmzNM3V7zXU1KzDq05hi41DuA0uoE6gp5gpOfql0BKFjwPqPwcJHKcp6GYRfikF9iYW0nlABfpLXyGHCAceaQPrO6XF9v5TsQ+6JA8v8eXizFlT0BIlsgOjJ76jhFndmFdKy23TiJF5JEeKmbwshEXZg3ncjp+SggzYpyekDxpf/VMeeaNDSAZCWkJdPLLq8/Dw08oXTquogMwJNRDJEtNUlOIJdjcjT38CfvuS9MzA52r9g/G1Hu2Mn6k3UL8HYtndkbMNf61SjaSM1jYuw0hFwZG+AKH207sB7T15J+Tm2DO2ECLOEtF90qjGPc5HCSH1j56CQFiM+Cv81pKSc71SQcu6AxvywYPZGxGrWQV6vR/BsoaHs0sBOYw1E1usWYXdCLyzqINSDbmeKPix5aCdpa9sLpjwXYdnLsLItEPpcpcR0g4uTEL6dBt1wabbFC/BunjDa9kdo9jTI/95KsjGmJaY4xFBsrv4VVLzMqR1gUs3E2M6XzHwH++TDfidv9eD4/8/U482N9d9cO+sLrOhHlUUecMZDyQIsrD/p2yKWIReAiUMhvrBUVB03+/ZlnD6EXXAVFZ4cMGIKZ+xXWk+11PrXIzy5PCSDX5EMMvj/BfhQ2kQn/8tIT0do56iksiJ2TzV3sr93UXHl7eRHjKJJdw2NXnDrRH5p+ZT0rlsSGnMk8z+0Cxnj051nnI90V0E7vAOLpw0hB4m0/YhQjm+bkPTa1oaq2sKSinsgv6+EX5E7cFL58YZBx0tpfNbS4F8+ZHL1wDAN94JCOMsQ8t3GxbPXDyopP1EqNkYw8bfWutkrCQg0qM/wKYJSLwaQZUbkwjYP/4kZUeczm6zZvLymJb+kHOYvz4Hu6M0Nug5HsKOlbbzRusTfCGL2h4IfpxWz/upoUIn/dKbaYehaZ0ckX2XSNh9jnrU4vygXHr64+Vm/Vsrw1CsaODOuETJ8MmVcKZsMFyq4unXx/R9jYY2ArhpkM76G2fIkRtU8KPVpViRrdcTcf6Yg8hvO+Hz4M39sC4ql2Zb1880NM9cU/WJmPg0Ti9DIWCj7CdBP9zY11CzHwh0Oo2EYU94VnVZj90jvpt+RveC30A8MJm8dOPHuPPBvKJyh/fqdafBqOGtfciqmFE2qHBo2wqMYU4/BL/hKMr44ym74HIx+AcU3Z8jkioGFfc6fDmtpAJXMhok6Iqj40aaAc8XlFmmS5/XOY4TN4FQVQkFeBoI8hPQOzsUfdHNS2gs4I3ugbf8hv3jaxTClJ9vU+g1IqzzcrjVYjo3DJqGo3Lljv889omWYhQi1Qe/SsTAibmMcpGXeZ4uund0XBscDhiIbDCluAxPaYNq2YR47wjzkQ8VbTWWF9edJWBw7InQHTl3VDOKfSWVEjMY0xsCY1XUwHxKEEzvK8XsUaYHuX5AOjdNihLF7n9Ifs2H/vGKY5v0wC5+IVQxF7LuIIH1gTfQhpszReTA6X26qm6VvW+iVCINX3gybry/MwXAIZcBUU98bQp33QRSbW1HnTxJ+CUbECgKkD3acr//213Xo5F10/rrzbR68lqFXzUG8iBbYkpwNJvYzGCvQ5hgsnBXBnQYsH3rU5rrKFpQJ2217lm9belf8pbcOJwSQ9D8FmI4nYdpUz80AlUcIoR4IDOP6vtSuzfU1a8zssNCudiN2IhrYqh29rcvnt+loQJS5kukJY06bsOC+0HXw7kJYY7DC6TjQ6dh0aHwAfgR4LbIeRIWvhvDNS2XHpCzLWMSZQpiAbiFRamI8tPPysLbeKV+Ew2x9STkY7ZS/gDI3gAhTGLHuwDwiWL2rPZ5IDRyu65qfmbFd1+vXr5+eIdwD94oOfL0Qdr/a4vGGZ2Ft/FOEiee1660dTMPXR8XfB+wyBUVjjFCOQ7pX9yLlhoLQbtHGJ0DsBLDT/txRu1O/0NhRbny8DP83bdK7q/OjHCk7mmcSjF7GOa/GwL/7IlsH0mYE6B5papi2fXNd9U3a7mbaNXO+acORsfO5FZwoxSYgH5EA6RAO27c9eqMfJ8qCXKRvYTDBL0GI5PjomBVs/VBxG9+HMAkdFQlav8PsK/wzZ+oJB6P96vbcG5Ht+vYHCLrebrdmgIH3GmHZH/TFmtYLo0X3Fr2Kw9RHPOvIPxaUVJ7p0kmpMPdkaaqGNfOjE6PBvI/ajuM+9Rc85yLnU+c2CsYMnfJYqN06ljDWId5USEd0C4orT8VW2Fogiqr0pwTYxGFTiFasgly8v08EQ0+BeZOgx37PlPxtGuRN06Fb9cB+RrxT4vMsZYzRAw6zrLEW4YsQc7kSXt/jyg7VQSE6X2eG7H36YrGKtNERkkRQpmps2BZPIRTya8R6bjOVgvIjEz08Kxt1JjA7/LSV1X6tH+3a7WyyZvie0DdP4Z0jZz2SO1+TBuqrb+GWnCs9/MamJfdu4NR4WEUia1tfnIvtYjt3aO39u66A3pmT8+nX7l0mwzBuvOIU0mZlHfGve39irGpe7t/GefDq1vr7PsemK2O2vcSTHXT6gP64DPUfbFnsX0+yvH+v8zg3buDC/sNxO/mmYC9+lSXVkzqPcv7ExiWzPoOCmmxLNbflhXu2IL/MlPKp8A7zpnRo/EN8rkQHlVTOx+rxQRzt0boAUdrrSXKALoOeQd6YRz1OPCeDDDLIIIMMMsgggwzSxv8Ae9mFK1kf6vQAAAAASUVORK5CYII=\"","export default \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABeSURBVHgB7dRLCoAwDATQ8XOQigf0LB5Q7EUkWnAhwVKmULqZB9kEhhAIAUS+jn06UzGZGZwA0ojGNKBo+Gu+lxLAiet2Lb6Z2cDAq8k4z2aWisnoivoPIH+RRYh4N2cXEpm7JmWjAAAAAElFTkSuQmCC\"","export default \"data:image/png;base64,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\"","import React, { memo} from 'react';\r\n\r\nimport Textarea from 'rc-textarea';\r\n\r\nfunction Summary({ condition, name}) {\r\n return (\r\n - \r\n
- \r\n {file.length > 0 &&\r\n file.reverse().map((item, index) => {\r\n return (\r\n <>\r\n
\r\n
removeFile(index)}/>\r\n )})}\r\n
\r\n {newLogoList.map(item => (\r\n - \r\n
\r\n
\r\n ))}\r\n
\r\n {!shouldHide?(\r\n
\r\n \r\n 
\r\n \r\n
\r\n ):\"\"}\r\n \r\n \r\n {isTitleEdit ? (\r\n
\r\n \r\n \r\n {queryPrams.bulletinType}
\r\n\r\n {isTitleEdit ? (\r\n \r\n setTitle(e.target.value)}\r\n defaultValue={defaultTitle}\r\n />\r\n setIsTitleEdit(false)}\r\n className=\"cursor-pointer green-icon mx-2 mt-1\"\r\n />\r\n {\r\n setTitle(defaultTitle);\r\n setIsTitleEdit(false);\r\n }}\r\n />\r\n \r\n ) : (\r\n \r\n {title}\r\n setIsTitleEdit(true)}\r\n />\r\n \r\n )}\r\n\r\n \r\n {isPreparedBy ? (\r\n \r\n setPreparedBy(e.target.value)}\r\n defaultValue={defaultPreparedBy}\r\n />\r\n setIsPreparedBy(false)}\r\n className=\"cursor-pointer green-icon mx-2 mt-1\"\r\n />\r\n {\r\n setPreparedBy(defaultPreparedBy);\r\n setIsPreparedBy(false);\r\n }}\r\n />\r\n \r\n ) : (\r\n \r\n \r\n {preparedBy}\r\n setIsPreparedBy(true)}\r\n />\r\n
\r\n \r\n )}\r\n
\r\n
\r\n setPreparedBy(e.target.value)}\r\n defaultValue={defaultPreparedBy}\r\n />\r\n setIsPreparedBy(false)}\r\n className=\"cursor-pointer green-icon mx-2 mt-1\"\r\n />\r\n {\r\n setPreparedBy(defaultPreparedBy);\r\n setIsPreparedBy(false);\r\n }}\r\n />\r\n
\r\n ) : (\r\n \r\n \r\n {preparedBy}\r\n
\r\n {t('ONLINE_BULLETIN.PREPARED')} {getBulletinDateFormat(new Date())}{' '}\r\n
\r\n \r\n\r\n \r\n
\r\n e.preventDefault()}\r\n className=\"mb-3 mt-2 mx-3 text-area-border-radius text-area-width\"\r\n placeholder={` Write down something...`}\r\n />\r\n
\r\n \r\n \r\n \r\n
\r\n Summary of {condition} Condition :
\r\n < div className=\"hr-lines\">\r\n
\r\n\r\n )\r\n \r\n }\r\n\r\nexport default memo(IndicatorsInfo);\r\n","import { memo, useEffect } from 'react';\r\nimport L from 'leaflet';\r\nimport _ from 'lodash';\r\nimport { LEGEND_UNIT_CONVERTER } from '../../../../Components/common/utils';\r\nimport moment from 'moment';\r\n\r\nfunction Legend({ map, add, layer, position, startDate, endDate }) {\r\n let a = moment(startDate).format('DD-MM-YYYY');\r\n const id = layer?.id + position;\r\n const handleUnitConverter = () => {\r\n let legenedEle = document.getElementById(`legend-unit-${id}`);\r\n let minEle = document.getElementById('minValue');\r\n let maxEle = document.getElementById('maxValue');\r\n let unitSelected = '';\r\n let minVal = '';\r\n let maxVal = '';\r\n if (legenedEle) {\r\n unitSelected = legenedEle.textContent;\r\n }\r\n if (minEle) {\r\n minVal = minEle.textContent;\r\n }\r\n if (maxEle) {\r\n maxVal = maxEle.textContent;\r\n }\r\n let converUnit = LEGEND_UNIT_CONVERTER.find(item => item.unit === unitSelected);\r\n if (!_.isEmpty(converUnit)) {\r\n let min = converUnit.convert(minVal);\r\n let max = converUnit.convert(maxVal);\r\n if (minEle) {\r\n minEle.innerHTML = min;\r\n }\r\n if (maxEle) {\r\n maxEle.innerHTML = max;\r\n }\r\n let selectedUnit = LEGEND_UNIT_CONVERTER.find(item => item.unit === converUnit.converter);\r\n if (!_.isEmpty(selectedUnit)) {\r\n if (legenedEle) {\r\n legenedEle.innerHTML = selectedUnit.unit;\r\n }\r\n }\r\n } else {\r\n return;\r\n }\r\n };\r\n const setUnitTitle = () => {\r\n let unitsEle = document.getElementById('units-col-div');\r\n if (unitsEle) {\r\n let legenedEle = document.getElementById(`legend-unit-${id}`);\r\n let unitSelected;\r\n if (legenedEle) {\r\n unitSelected = legenedEle.textContent;\r\n }\r\n let converUnit = LEGEND_UNIT_CONVERTER.find(item => item.unit === unitSelected);\r\n if (!_.isEmpty(converUnit)) {\r\n unitsEle.setAttribute('name', converUnit?.converter);\r\n let nameEle = unitsEle.getAttribute('name');\r\n if (!_.isEmpty(nameEle) && nameEle === unitSelected) {\r\n unitsEle.removeAttribute('title');\r\n } else {\r\n let title = `Change units to \"${converUnit?.converter}\"`;\r\n unitsEle.setAttribute('title', title);\r\n }\r\n }\r\n }\r\n };\r\n useEffect(() => {\r\n if (map) {\r\n const legend = L?.control({ position: position });\r\n\r\n const percentage = (Math.abs(0) + Math.abs(100)) / layer?.palette?.length;\r\n let backgroundColor = `linear-gradient(90deg,)`;\r\n if (layer?.palette?.length === 1) {\r\n backgroundColor = layer?.palette[0];\r\n } else {\r\n for (let i = 0; i < layer?.palette?.length; i++) {\r\n let colorCode =\r\n `${layer?.palette[i]} ${Math.round(percentage + i * percentage)}%` +\r\n `${i === layer?.palette?.length - 1 ? '' : ','}`;\r\n const index = backgroundColor.lastIndexOf(',');\r\n const newString =\r\n backgroundColor.slice(0, index + 1) + colorCode + backgroundColor.slice(index + 1);\r\n backgroundColor = newString;\r\n }\r\n }\r\n\r\n if (add) {\r\n legend.onAdd = () => {\r\n let parentDiv = '';\r\n parentDiv = L.DomUtil.create('div');\r\n parentDiv.id = id || 'legend_div';\r\n if (position === 'bottomleft') {\r\n parentDiv.className = 'left-legend-style';\r\n }\r\n let datesContainer = L.DomUtil.create('div');\r\n let spanContainer = L.DomUtil.create('div');\r\n datesContainer.className =\r\n position === 'bottomleft' ? 'datesContainLeftDiv' : 'datesContainRightDiv';\r\n spanContainer.className = 'dates-span-container';\r\n if (layer?.selectedDates?.startDate && layer.selectedDates?.endDate) {\r\n spanContainer.innerHTML =\r\n '' + layer?.selectedDates?.startDate + ' to ' + layer?.selectedDates?.endDate + ' ';\r\n datesContainer.appendChild(spanContainer);\r\n parentDiv.appendChild(datesContainer);\r\n }\r\n\r\n let containerDiv = L.DomUtil.create('div');\r\n containerDiv.className = 'legend-container-div';\r\n let dataSourceDiv = L.DomUtil.create('div');\r\n dataSourceDiv.className = 'units-legend-style';\r\n let rowDiv = L.DomUtil.create('div');\r\n let unitsDiv = L.DomUtil.create('div');\r\n\r\n let dataSourceText = L.DomUtil.create('p');\r\n dataSourceText.className = 'legend-units dataSource-style';\r\n dataSourceText.innerHTML = layer.dataSource;\r\n if (layer.dataSource === '') {\r\n dataSourceText.className = 'no-text';\r\n } else {\r\n dataSourceText.innerHTML = layer.dataSource;\r\n }\r\n dataSourceDiv.appendChild(dataSourceText);\r\n /* changes for empty datasource by Ramya.S*/\r\n\r\n let columnOne = L.DomUtil.create('div');\r\n columnOne.id = 'units-col-div';\r\n columnOne.className = 'units-legend-style';\r\n let coloneText = L.DomUtil.create('span');\r\n coloneText.className = 'legend-units cursor-ponter';\r\n coloneText.innerHTML = layer?.parameter\r\n ? layer?.parameter + (layer?.measure ? ' (' : '')\r\n : '';\r\n let coltwoText = L.DomUtil.create('span');\r\n coltwoText.className = 'legend-units cursor-ponter';\r\n coltwoText.id = `legend-unit-${id}`;\r\n let paramUnits = layer?.measure || '';\r\n let measure = paramUnits.includes('^') ? paramUnits.split('^') : paramUnits;\r\n if (Array.isArray(measure)) {\r\n coltwoText.innerHTML = measure[0];\r\n let superScriptText = L.DomUtil.create('sup');\r\n superScriptText.innerHTML = measure[1];\r\n coltwoText.appendChild(superScriptText);\r\n } else {\r\n coltwoText.innerHTML = measure;\r\n }\r\n let colThreeText = L.DomUtil.create('span');\r\n colThreeText.innerHTML = layer?.measure ? ')' : '';\r\n columnOne.appendChild(coloneText);\r\n columnOne.appendChild(coltwoText);\r\n columnOne.appendChild(colThreeText);\r\n columnOne.onclick = handleUnitConverter;\r\n columnOne.onmouseover = setUnitTitle;\r\n unitsDiv.appendChild(columnOne);\r\n\r\n rowDiv.className = 'rowLegend legend-range';\r\n let columnTwo = L.DomUtil.create('div');\r\n columnTwo.className = 'columnLegend legend-middle';\r\n let colTwoText = L.DomUtil.create('p');\r\n colTwoText.id = 'minValue';\r\n colTwoText.innerHTML = layer?.min;\r\n colTwoText.className = 'legend-text';\r\n columnTwo.appendChild(colTwoText);\r\n rowDiv.appendChild(columnTwo);\r\n\r\n let columnThree = L.DomUtil.create('div');\r\n columnThree.className = `legend-graphic columnLegend legend-right ${layer?.image}`;\r\n columnThree.style.background = layer?.palette && backgroundColor;\r\n rowDiv.appendChild(columnThree);\r\n\r\n let columnFour = L.DomUtil.create('div');\r\n columnFour.className = 'columnLegend';\r\n let colFourText = L.DomUtil.create('p');\r\n colFourText.id = 'maxValue';\r\n colFourText.innerHTML = layer?.max;\r\n colFourText.className = 'legend-text';\r\n columnFour.appendChild(colFourText);\r\n rowDiv.appendChild(columnFour);\r\n\r\n containerDiv.appendChild(dataSourceDiv);\r\n containerDiv.appendChild(rowDiv);\r\n containerDiv.appendChild(unitsDiv);\r\n\r\n parentDiv.appendChild(containerDiv);\r\n return parentDiv;\r\n };\r\n if (layer && !_.isEmpty(legend) && !_.isEmpty(map)) {\r\n if (!_.isEmpty(map?._layers)) {\r\n legend?.addTo(map);\r\n }\r\n }\r\n } else {\r\n if (layer) {\r\n const image = document.getElementById(id || 'legend_div');\r\n legend.onRemove = () => {\r\n if (image) {\r\n L.DomUtil.remove(image);\r\n }\r\n };\r\n legend.onRemove();\r\n }\r\n }\r\n }\r\n }, [add, map, layer]); //here add map\r\n return null;\r\n}\r\n\r\nexport default memo(Legend);\r\n","import { useEffect, memo } from 'react';\r\nimport L from 'leaflet';\r\nimport _ from 'lodash';\r\nimport { DRY_SPELL, LAND_USE_LAND_COVER } from '../../../../Components/constants/index';\r\n\r\nfunction Legend({ map, add, layer, position }) {\r\n const id = layer?.id + position;\r\n useEffect(() => {\r\n if (map) {\r\n const legend = L?.control({ position: position });\r\n if (add) {\r\n legend.onAdd = () => {\r\n let legendDiv = L.DomUtil.create('div');\r\n legendDiv.id = id || 'legend_div';\r\n let containerDiv = L.DomUtil.create('div');\r\n if (position === 'bottomleft') {\r\n containerDiv.className =\r\n 'legend-container-div discrete-legend info-discrete left-discrete-legend-style discrete-margin-right-bottom-left ';\r\n } else {\r\n containerDiv.className = 'legend-container-div discrete-legend info-discrete ';\r\n }\r\n let labels = [];\r\n let grades = layer?.palette;\r\n let names = '';\r\n\r\n for (let i = 0; i < grades?.length; i++) {\r\n if (!Array.isArray(grades[i])) {\r\n names = grades[i].name;\r\n labels.push(' ' + names);\r\n }\r\n }\r\n if (layer?.parameter === DRY_SPELL.DRYSPELL || layer?.parameter === DRY_SPELL.DRY_SPELL) {\r\n containerDiv.innerHTML =\r\n '' + layer?.parameter + ' ' + '(Days)' + 'Indicators Basic Info:
\r\n \r\n\r\n {indicatorRows[rowKey]?.indicatorsList.map((eachIndicator,index)=>{\r\n let defaultText = INDICATORS_INFO[eachIndicator.name]\r\n let indicator = `${rowKey}.${eachIndicator.name}`\r\n return(<>\r\n { indicator === selectedIndicator && isTextEdit ? ( \r\n
\r\n \r\n handleTextEdit(e.target.value, eachIndicator.name)}\r\n //defaultValue={defaultText}\r\n />\r\n setIsTextEdit(false)}\r\n className=\"cursor-pointer green-icon mx-2 mt-1\"\r\n />\r\n {\r\n setIsText(prev => ({\r\n ...prev,\r\n [eachIndicator.name] : defaultText\r\n }));\r\n setSelectedIndicator(\"\");\r\n }}\r\n />\r\n
\r\n ):(\r\n \r\n
\r\n )}\r\n )\r\n })}\r\n {eachIndicator.name} : {isText[eachIndicator.name]}\r\n
' + labels.join('
');\r\n } else {\r\n if (layer.units) {\r\n containerDiv.innerHTML =\r\n '' +\r\n (layer?.fromMapPreferences ? layer?.dataSource : layer.parameter) +\r\n ' ' +\r\n '(' +\r\n layer.units +\r\n ')' +\r\n '
' +\r\n labels.join('
');\r\n } else {\r\n if (layer.dataSource === DRY_SPELL.FINAL_DROUGHT_MAP) {\r\n containerDiv.innerHTML =\r\n '' + layer.dataSource + '
' + labels.join('
');\r\n } else {\r\n /**\r\n * added by sai krishna thalla\r\n * reason: lulc legends names are not displaying their respective label names\r\n * date: 19-sep-2022\r\n */\r\n containerDiv.innerHTML =\r\n '' +\r\n (layer?.fromMapPreferences\r\n ? layer?.dataSource == LAND_USE_LAND_COVER\r\n ? layer.id\r\n : layer?.dataSource\r\n : layer.parameter) +\r\n '
' +\r\n labels.join('
');\r\n }\r\n }\r\n }\r\n //\r\n let containerOfContainerDiv = L.DomUtil.create('div');\r\n containerOfContainerDiv.className = 'container-of-container-div';\r\n let datesContainer = L.DomUtil.create('div');\r\n datesContainer.className = 'discrete-legend-container-of-container-div';\r\n if (layer?.selectedDates?.startDate && layer?.selectedDates?.endDate) {\r\n datesContainer.innerHTML =\r\n ' ' +\r\n layer.selectedDates.startDate +\r\n ' to ' +\r\n layer.selectedDates.endDate +\r\n ' ';\r\n containerOfContainerDiv.appendChild(datesContainer);\r\n containerOfContainerDiv.appendChild(containerDiv);\r\n legendDiv.append(containerOfContainerDiv);\r\n } else {\r\n legendDiv.append(containerDiv);\r\n }\r\n return legendDiv;\r\n };\r\n if (layer && !_.isEmpty(legend) && !_.isEmpty(map)) {\r\n if (!_.isEmpty(map?._layers)) {\r\n legend?.addTo(map);\r\n }\r\n }\r\n } else {\r\n if (layer) {\r\n const image = document.getElementById(id || 'legend_div');\r\n legend.onRemove = () => {\r\n if (image) {\r\n L.DomUtil.remove(image);\r\n }\r\n };\r\n legend.onRemove();\r\n }\r\n }\r\n }\r\n }, [add, map, layer]); //here add map\r\n return null;\r\n}\r\n\r\nexport default memo(Legend);\r\n","import React, { useState, useEffect, memo } from 'react';\r\nimport myConstClass from '../../../Constants';\r\nimport {\r\n MapContainer,\r\n TileLayer,\r\n useMap,\r\n useMapEvents,\r\n LayerGroup,\r\n LayersControl,\r\n ScaleControl,\r\n ZoomControl,\r\n} from 'react-leaflet';\r\nimport _ from 'lodash';\r\nimport 'leaflet-side-by-side';\r\nimport 'leaflet.control.opacity/dist/L.Control.Opacity.css';\r\nimport 'leaflet.control.opacity';\r\nimport { Row, Col,Button } from 'reactstrap';\r\nimport Summary from './Summary';\r\nimport IndicatorInfo from './IndicatorInfo';\r\nimport CustomLegend from './CustomLayerControl/CustomLegend';\r\nimport DiscreteLegend from './CustomLayerControl/DiscreteLegend';\r\nimport { getBulletinDateFormat } from '../../../Components/helpers';\r\nimport { COORDINATES_DATA } from '../../../Components/constants/urlConstants';\r\nimport ResetIcon from \"../../../assets/Images/reset.png\";\r\n\r\nconst countryLoc = {\r\n cordinates: [-14.207133, 27.385223],\r\n locationCordinates: [-14.207133, 27.385223],\r\n markerCordinates: [-14.207133, 27.385223],\r\n zoom: 4.8,\r\n};\r\nconst BulletinPreview = props => {\r\n const { selectedLocation, layerRef, setMapReference, mapInstances, indicatorRows, indicatorsList, mapURLResponse} = props;\r\n const [selectedIndicator, setSelectedIndicator] = useState();\r\n const [cordinateAndZoom, setCordinateAndZoom] = useState([]);\r\n const [isReset, setIsReset]=useState(false);\r\n const [selectedIndex,setSelectedIndex]=useState();\r\n const [currentLoc,setCurrentLoc] = useState({});\r\n\r\n \r\n let defaultLoc = [];\r\n useEffect(()=>{\r\n for( let i=0;i< (Object.keys(indicatorRows)?.length*3);i++){\r\n defaultLoc.push(countryLoc)\r\n if(i+1 === (Object.keys(indicatorRows)?.length*3)){\r\n setCordinateAndZoom(defaultLoc);\r\n\r\n }\r\n}\r\n },[indicatorRows])\r\n const { Overlay } = LayersControl;\r\n\r\n function ChangeView({ center, zoom , index }) {\r\n const mapEvents = useMapEvents({\r\n zoomend: () => {\r\n const currentCoordinateAndZoom = cordinateAndZoom\r\n currentCoordinateAndZoom[index].zoom = mapEvents.getZoom();\r\n currentCoordinateAndZoom[index].cordinates = mapEvents.getCenter();\r\n setCordinateAndZoom(currentCoordinateAndZoom);\r\n // setCordinateAndZoom(prev => {\r\n // return {\r\n // ...prev,\r\n // zoom: mapEvents.getZoom(),\r\n // cordinates: mapEvents.getCenter(),\r\n // };\r\n // });\r\n },\r\n dragend: () => {\r\n const currentCoordinateAndZoom = cordinateAndZoom\r\n currentCoordinateAndZoom[index].zoom = mapEvents.getZoom();\r\n currentCoordinateAndZoom[index].cordinates = mapEvents.getCenter();\r\n setCordinateAndZoom(currentCoordinateAndZoom);\r\n // setCordinateAndZoom(prev => {\r\n // return {\r\n // ...prev,\r\n // zoom: mapEvents.getZoom(),\r\n // cordinates: mapEvents.getCenter(),\r\n // };\r\n // });\r\n },\r\n });\r\n const map = useMap();\r\n setInterval(function() {\r\n if (!_.isEmpty(map) && !_.isEmpty(map?._layers)) map.invalidateSize();\r\n }, 500);\r\n if (zoom && center) map.setView(center, zoom);\r\n return null;\r\n }\r\n\r\n const handleZoomLevel = (e,index) => {\r\n e?.stopPropagation();\r\n setSelectedIndex(index)\r\n Reset(index)\r\n };\r\n \r\n const Reset = (index) => {\r\n const currentCoordinateAndZoom = [...cordinateAndZoom];\r\n currentCoordinateAndZoom[index].zoom =currentLoc.zoom;\r\n currentCoordinateAndZoom[index].cordinates =currentLoc.cordinates;\r\n setCordinateAndZoom(currentCoordinateAndZoom);\r\n }\r\n \r\n\r\n useEffect(() => {\r\n // using static data for better zoom and position\r\n let stateData = {};\r\n if(selectedLocation?.district?.name) {\r\n stateData = COORDINATES_DATA.find(e => e.districtName === selectedLocation?.district.name);\r\n }else if(selectedLocation?.state?.name){\r\n stateData = COORDINATES_DATA.find(e => e.stateName === selectedLocation?.state.name);\r\n }\r\n if(Object.keys(stateData)?.length){\r\n setCurrentLoc(Object.assign({},stateData));\r\n let defaultLoc1 = []\r\n for( let i=0;i< (Object.keys(indicatorRows)?.length*3);i++){\r\n defaultLoc1.push(stateData)\r\n if(i+1 === (Object.keys(indicatorRows)?.length*3)){\r\n setCordinateAndZoom(defaultLoc1);\r\n\r\n }\r\n }\r\n }\r\n },[selectedLocation,indicatorRows]);\r\n \r\n\r\n let layerIndex = -1;\r\n \r\n const renderMapContainer = (keyName, index) => {\r\n return (\r\n
\r\n setMapReference(e, keyName)}\r\n >\r\n \r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n \r\n {mapInstances[`legendObj${keyName}`]?.descret_legend ? (\r\n \r\n \r\n
\r\n );\r\n };\r\n\r\n return (\r\n <>\r\n {Object.keys(indicatorRows)?.length\r\n ? Object.keys(indicatorRows).map((eachRow, key) => {\r\n return (\r\n \r\n
\r\n {\" \"}INDICATOR SUMMARY- {key+1}/{Object.keys(indicatorRows)?.length}
\r\n- \r\n
- Indicator Name :{eachIndicator.name} \r\n
- Region :\r\n {indicatorRows[eachRow].district ? indicatorRows[eachRow].district :indicatorRows[eachRow].state ? indicatorRows[eachRow].state : indicatorRows[eachRow].country}(\r\n {getBulletinDateFormat(indicatorRows[eachRow].startDate)} -{' '}\r\n {getBulletinDateFormat(indicatorRows[eachRow].endDate)})\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n
\r\n {t('ONLINE_BULLETIN.BULLETIN_FOOTER.TITLE')}!
\r\n{t('ONLINE_BULLETIN.BULLETIN_FOOTER.DISCLAIMER')} :
\r\n \r\n{t('ONLINE_BULLETIN.BULLETIN_FOOTER.STATIC')}
\r\n \r\n\r\n \r\n \r\n {/*
\r\n \r\n
\r\n
\r\n \r\n );\r\n}\r\n\r\nexport default BulletinFooter;\r\n","import React, { useEffect, useRef, useState, createRef } from 'react';\r\nimport { createJSON, getNestedObjectData } from '../../Components/helpers';\r\nimport _ from 'lodash';\r\nimport {\r\n getCountryRequest,\r\n getIndicesRequest,\r\n getStateByCountryRequest,\r\n getDistrictByStateRequest,\r\n getAllTemplateListRequest,\r\n} from '../../redux/actions';\r\nimport { useDispatch, useSelector } from 'react-redux';\r\nimport { DEFAULT_COUNTRY, LOCATION, MAP_PREFERENCES_lABELS } from '../../Components/constants';\r\nimport {\r\n API_BASE_URL,\r\n AXIOS_INSTANCE,\r\n AXIOS_INSTANCE_MASTER_SERVER,\r\n MASTER_SERVER_BASE_URL,\r\n} from '../../redux/api/apiEndPoint';\r\nimport OnlineBulletinModal from './OnlineBulletinModal';\r\nimport Loader from '../../Components/common/loader';\r\nimport { showError } from '../../Components/Notifications';\r\nimport Header from './Header';\r\nimport Branding from './Content/BulletinBranding';\r\nimport BulletinPreview from './Content/BulletinPreview';\r\nimport BulletinFooter from './Footer';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { isLogedIn } from '../../Components/common/utils';\r\n\r\nfunction OnlineBulletin() {\r\n const history = useHistory();\r\n const elementToPrint = 'contentToPrint';\r\n const dispatch = useDispatch();\r\n const [selectedLocation, setSelectedLocation] = useState({\r\n country: '',\r\n district: '',\r\n state: '',\r\n });\r\n const [loadingLayers, setLoadingLayers] = useState(false);\r\n const [mapURLResponse, setMapURLResponse] = useState({});\r\n const [indicatorsList, setIndicatorsList] = useState([]);\r\n const [mapInstances, setMapInstances] = useState({});\r\n const [selectedCountryId, setSelectedCountryId] = useState(null);\r\n const [selectedStateId, setSelectedStateId] = useState(null);\r\n const [indicatorRows, setIndicatorRows] = useState({});\r\n const [eachRowAPIPayload, setEachRowAPIPayload] = useState({});\r\n const [mapRefs, setMapRefs] = useState({});\r\n const layerRef = useRef([]);\r\n const [title, setTitle] = useState();\r\n let queryPrams =\r\n (window.location.search && createJSON(window.location.search.substring(1))) || {};\r\n /**\r\n * value and toggle for create bulletin model\r\n */\r\n const [isOpenBulletin, setIsOpenBulletin] = useState(false);\r\n const toggleModal = () => {\r\n setIsOpenBulletin(!isOpenBulletin);\r\n };\r\n\r\n /**\r\n * on mounting\r\n */\r\n useEffect(() => {\r\n if (!isLogedIn()) {\r\n let path = window.location.pathname;\r\n history.push(`/login?prevPath=${path.substring(1, path.length)}`);\r\n }\r\n setSelectedLocation({ country: '', district: '', state: '' });\r\n dispatch(getCountryRequest({ location_type: LOCATION.Country, parent_id: '' }));\r\n dispatch(getAllTemplateListRequest({}));\r\n //unmounting\r\n return () => {\r\n setMapInstances({});\r\n setMapRefs({});\r\n };\r\n }, []);\r\n\r\n //retrieve country ,state ,district and boundaries from store\r\n const { LocationData, DroughtIndicesData, getAllTemplateListData } = useSelector(state => ({\r\n LocationData: state.Location,\r\n getAllTemplateListData: state.Bulletin.getAllTemplateListData,\r\n DroughtIndicesData: state.AccessKey.getIndicesData,\r\n }));\r\n\r\n useEffect(() => {\r\n if (LocationData.countryList?.result) {\r\n const { result } = LocationData.countryList;\r\n setSelectedLocation(prev => ({ ...prev, country: result[0] }));\r\n }\r\n }, [LocationData]);\r\n\r\n useEffect(() => {\r\n if (\r\n queryPrams.country &&\r\n queryPrams?.indicators?.split(',')?.length &&\r\n _.get(LocationData, 'stateList.data.result') &&\r\n _.get(LocationData, 'districtList.data.result')\r\n ) {\r\n let selectedState = '';\r\n selectedState = _.get(LocationData, 'stateList.data.result')?.find(\r\n e => e.name === queryPrams.state,\r\n );\r\n\r\n let selectedDistrict = '';\r\n selectedDistrict = _.get(LocationData, 'districtList.data.result')?.find(\r\n e => e.name === queryPrams.district,\r\n );\r\n\r\n setSelectedLocation(prev => {\r\n return {\r\n ...prev,\r\n state: queryPrams.state ? selectedState : prev.state,\r\n district: queryPrams.district ? selectedDistrict : prev.district,\r\n };\r\n });\r\n }\r\n }, [\r\n queryPrams.country,\r\n queryPrams.indicators,\r\n LocationData.stateList,\r\n LocationData.districtList,\r\n ]);\r\n\r\n /**\r\n * to call multiple map api's based on indicators on mounting with queryparams\r\n */\r\n useEffect(() => {\r\n if (\r\n Object.keys(queryPrams)?.length &&\r\n queryPrams.country &&\r\n // queryPrams.state &&\r\n queryPrams.startDate &&\r\n queryPrams.endDate &&\r\n indicatorsList?.length &&\r\n queryPrams?.indicators?.split(',')?.length\r\n ) {\r\n layerRef.current = [];\r\n const MAP_API_URLS = [];\r\n queryPrams.indicatorsList = [];\r\n queryPrams.indicators?.split(',').forEach(item => {\r\n indicatorsList.forEach(indicator => {\r\n if (item === indicator.name) {\r\n queryPrams.indicatorsList.push(indicator);\r\n }\r\n });\r\n });\r\n queryPrams.indicatorsList.forEach(item => {\r\n const ref = createRef();\r\n layerRef.current.push(ref);\r\n const config = {\r\n headers: {\r\n Authorization: `Api-Key ${process.env.REACT_APP_API_TOKEN}`,\r\n },\r\n };\r\n const Master_server_config = {\r\n headers: {\r\n Authorization: `${process.env.REACT_APP_APIKEY_MASTER_SERVER}`,\r\n },\r\n };\r\n const requestObj = {\r\n state_name: queryPrams.state,\r\n district_name: queryPrams.district,\r\n precipitation_threshold: '2.5',\r\n temporal_aggregation: 'mean',\r\n country_name: DEFAULT_COUNTRY.name,\r\n start_date: queryPrams.startDate,\r\n end_date: queryPrams.endDate,\r\n indicatorName: item.name,\r\n };\r\n item.master_server ? MAP_API_URLS.push(\r\n AXIOS_INSTANCE_MASTER_SERVER.post(`${MASTER_SERVER_BASE_URL}/${item.api_url}/map`, requestObj, Master_server_config),\r\n )\r\n :MAP_API_URLS.push(\r\n AXIOS_INSTANCE.post(`${API_BASE_URL}/${item.api_slug}/map`, requestObj, config),\r\n );\r\n });\r\n setLoadingLayers(true);\r\n\r\n let promises = [];\r\n MAP_API_URLS.forEach(item => {\r\n promises.push(Promise.resolve(item).catch(err => err.response));\r\n });\r\n Promise.all(promises)\r\n .then(response => {\r\n let res = JSON.parse(JSON.stringify(response));\r\n setMapURLResponse({ [`row0`]: res });\r\n setLoadingLayers(false);\r\n })\r\n .catch(err => {\r\n setLoadingLayers(false);\r\n const errorMessage = _.get(err, 'response.data.message');\r\n if (errorMessage?.length) {\r\n showError(errorMessage[0]);\r\n }\r\n });\r\n // saving first row as base row\r\n setIndicatorRows(prev => ({\r\n ...prev,\r\n [`row0`]: { ...queryPrams },\r\n }));\r\n }\r\n }, [\r\n // queryPrams.state,\r\n queryPrams.district,\r\n indicatorsList,\r\n queryPrams.indicators,\r\n queryPrams.startDate,\r\n queryPrams.endDate,\r\n // queryPrams.country\r\n ]);\r\n\r\n /**\r\n * to call multiple map api's at once based on indicators list everytime when row added\r\n */\r\n const isAPICalling = useRef(true);\r\n useEffect(() => {\r\n if (isAPICalling.current) {\r\n isAPICalling.current = false;\r\n return;\r\n }\r\n const MAP_API_URLS = [];\r\n if (Object.keys(eachRowAPIPayload)?.length) {\r\n const row = eachRowAPIPayload;\r\n\r\n row.indicatorsList.forEach(item => {\r\n const ref = createRef();\r\n layerRef.current.push(ref);\r\n const config = {\r\n headers: {\r\n Authorization: `Api-Key ${process.env.REACT_APP_API_TOKEN}`,\r\n },\r\n };\r\n const Master_server_config = {\r\n headers: {\r\n Authorization: `${process.env.REACT_APP_APIKEY_MASTER_SERVER}`,\r\n },\r\n };\r\n const requestObj = {\r\n // state_name: row.state,\r\n precipitation_threshold: '2.5',\r\n temporal_aggregation: 'mean',\r\n country_name: DEFAULT_COUNTRY.name,\r\n start_date: row.startDate,\r\n end_date: row.endDate,\r\n indicatorName: item.name,\r\n };\r\n if (row.district) {\r\n requestObj.district_name = row.district;\r\n }\r\n if (row.state) {\r\n requestObj.state_name = row.state;\r\n }\r\n item.master_server ? MAP_API_URLS.push(\r\n AXIOS_INSTANCE_MASTER_SERVER.post(`${MASTER_SERVER_BASE_URL}/${item.api_url}/map`, requestObj, Master_server_config),\r\n )\r\n :MAP_API_URLS.push(\r\n AXIOS_INSTANCE.post(`${API_BASE_URL}/${item.api_slug}/map`, requestObj, config),\r\n );\r\n });\r\n\r\n if (MAP_API_URLS?.length) {\r\n setLoadingLayers(true);\r\n let promises = [];\r\n const uniqURLS = _.uniq(MAP_API_URLS);\r\n uniqURLS.forEach((item, key) => {\r\n promises.push(Promise.resolve(item).catch(err => err.response));\r\n });\r\n\r\n Promise.all(promises)\r\n .then(response => {\r\n const res = JSON.parse(JSON.stringify(response));\r\n // setMapURLResponse(res);\r\n setMapURLResponse(prev => ({\r\n ...prev,\r\n [`row${Object.keys(indicatorRows).length - 1}`]: [...res],\r\n }));\r\n\r\n setLoadingLayers(false);\r\n })\r\n .catch(err => {\r\n setLoadingLayers(false);\r\n const errorMessage = _.get(err, 'response.data.message');\r\n if (typeof errorMessage !== 'string' && errorMessage?.length) {\r\n showError(errorMessage[0]);\r\n } else {\r\n showError(errorMessage);\r\n }\r\n });\r\n }\r\n }\r\n }, [eachRowAPIPayload]);\r\n\r\n /**\r\n * runs when province changes\r\n // */\r\n // useEffect(() => {\r\n // if (eachRowAPIPayload.state && _.get(LocationData, 'stateList.data.result')) {\r\n // let selectedState = '';\r\n // selectedState = _.get(LocationData, 'stateList.data.result').find(\r\n // e => e.name === eachRowAPIPayload.state,\r\n // );\r\n // setSelectedLocation(prev => {\r\n // return {\r\n // ...prev,\r\n // state: selectedState,\r\n // };\r\n // });\r\n // }\r\n // }, [eachRowAPIPayload.state, LocationData.stateList]);\r\n\r\n /**\r\n * to get province and indices based on country id\r\n */\r\n const isCountryAPI = useRef(true);\r\n useEffect(() => {\r\n if (isCountryAPI.current) {\r\n isCountryAPI.current = false;\r\n return;\r\n }\r\n if (selectedLocation?.country?.id) {\r\n if (selectedLocation.country.id !== selectedCountryId) {\r\n setSelectedCountryId(selectedLocation.country.id);\r\n if (!DroughtIndicesData) {\r\n dispatch(\r\n getIndicesRequest({\r\n requestObj: {\r\n type: MAP_PREFERENCES_lABELS.COUNTRY,\r\n type_id: selectedLocation.country.id,\r\n },\r\n module: 'drought-monitor',\r\n }),\r\n );\r\n }\r\n dispatch(\r\n getStateByCountryRequest({\r\n requestObj: {\r\n location_type: LOCATION.State,\r\n parent_id: selectedLocation.country.id,\r\n },\r\n isCompareLocation: false,\r\n }),\r\n );\r\n }\r\n if (selectedLocation?.state?.id) {\r\n if (selectedLocation.state.id !== selectedStateId) {\r\n setSelectedStateId(selectedLocation.state.id);\r\n dispatch(\r\n getDistrictByStateRequest({\r\n requestObj: {\r\n location_type: LOCATION.District,\r\n parent_id: selectedLocation.state.id,\r\n },\r\n isCompareLocation: false,\r\n }),\r\n );\r\n }\r\n }\r\n }\r\n }, [DroughtIndicesData, selectedLocation.country, selectedLocation.state]);\r\n\r\n /**TODO indicators will change based on client requirement */\r\n const selectedIndicators = [\r\n 'NDVI',\r\n 'Crop Cover',\r\n 'VCI',\r\n 'Extreme Rainfall',\r\n 'Accumulated Rainfall',\r\n ];\r\n useEffect(() => {\r\n if (_.get(DroughtIndicesData, 'data.result')?.length) {\r\n let filteredIndicatorsList = [];\r\n selectedIndicators.forEach(item => {\r\n filteredIndicatorsList.push(\r\n getNestedObjectData(_.get(DroughtIndicesData, 'data.result'), item),\r\n );\r\n });\r\n if (filteredIndicatorsList?.length) {\r\n let mapReferences = {};\r\n filteredIndicatorsList.map(item => {\r\n /**\r\n * to create empty refs initially based on indicators\r\n */\r\n mapReferences[item.name] = createRef(null);\r\n mapReferences[`row0${item.name}`] = createRef(null);\r\n });\r\n setMapRefs(mapReferences);\r\n }\r\n setIndicatorsList(filteredIndicatorsList);\r\n }\r\n }, [DroughtIndicesData]);\r\n\r\n /**\r\n *function to store dynamic map instances based on indicators\r\n */\r\n const setMapReference = (mapInstance, keyName) => {\r\n if (mapRefs[keyName]) {\r\n mapRefs[keyName].current = mapInstance;\r\n }\r\n setMapInstances(prev => ({ ...prev, [`mapInstance${keyName}`]: mapInstance }));\r\n };\r\n\r\n /**\r\n *function to add layers in the map\r\n */\r\n const addLayers = (selectedParamRef, keyName) => {\r\n if (mapRefs[keyName]?.current && selectedParamRef.current) {\r\n const leafletMapRef = mapRefs[keyName].current;\r\n const firstLayer = selectedParamRef.current;\r\n [firstLayer].forEach(layer => {\r\n leafletMapRef.addLayer(layer);\r\n });\r\n }\r\n };\r\n /**\r\n *calls whenever mapURLresponses changes\r\n */\r\n const isSkipRow = useRef(true);\r\n useEffect(() => {\r\n if (isSkipRow.current) {\r\n isSkipRow.current = false;\r\n return;\r\n }\r\n let layerIndex = 0;\r\n if (Object.keys(mapURLResponse).length === Object.keys(indicatorRows).length) {\r\n Object.keys(indicatorRows).forEach((eachResponse, index) => {\r\n const row = indicatorRows[eachResponse];\r\n mapURLResponse[eachResponse].forEach((item, key) => {\r\n const indicators = row.indicatorsList;\r\n if (indicators[key]) {\r\n const keyName = `${eachResponse}${indicators[key].name}`;\r\n if (item?.status === 200) {\r\n const map_data = item.data.result.map_data;\r\n let legendObj = {\r\n ...map_data,\r\n id: indicators[key].name,\r\n add: true,\r\n parameter: indicators[key].name,\r\n measure: map_data?.units || '',\r\n dataSource: indicatorsList.find(e => e.name === indicators[key].name)\r\n ?.parentIndiceName,\r\n fromMapPreferences: false,\r\n };\r\n const currentParamRef = layerRef.current[layerIndex];\r\n if (!mapInstances[`legendObj${keyName}`]) {\r\n setMapInstances(prev => ({ ...prev, [`legendObj${keyName}`]: legendObj }));\r\n }\r\n if (!_.isEmpty(currentParamRef) && !_.isEmpty(currentParamRef?.current)) {\r\n currentParamRef.current?.eachLayer(layer => {\r\n if (map_data) {\r\n layer.setUrl(map_data.map_url);\r\n }\r\n });\r\n }\r\n if (!_.isEmpty(currentParamRef) && currentParamRef?.current !== null) {\r\n addLayers(currentParamRef, keyName);\r\n }\r\n } else {\r\n const errorMessage = _.get(item, 'data.message');\r\n if (typeof errorMessage !== 'string' && errorMessage?.length) {\r\n showError(`For ${indicators[key]?.name} ${errorMessage[0]} `);\r\n } else {\r\n showError(`For ${indicators[key]?.name} ${errorMessage}`);\r\n }\r\n }\r\n layerIndex += 1;\r\n }\r\n });\r\n });\r\n }\r\n }, [mapURLResponse]);\r\n\r\n // const country = _.get(LocationData, 'countryList.result')?.find(\r\n // e => e.name === queryPrams.country,\r\n // )\r\n\r\n const bulletinType = _.get(getAllTemplateListData, 'data.data.result')?.find(\r\n e => e.name === queryPrams.bulletinType,\r\n );\r\n\r\n const province = _.get(LocationData, 'stateList.data.result')?.find(\r\n e => e.name === queryPrams.state,\r\n );\r\n\r\n const district = _.get(LocationData, 'districtList.data.result')?.find(\r\n e => e.name === queryPrams.district,\r\n );\r\n\r\n const initialValues = {\r\n // country : {...country, label:country?.name},\r\n bulletinType: { ...bulletinType, label: bulletinType?.name },\r\n province: { ...province, label: province?.name },\r\n district: { ...district, label: district?.name },\r\n };\r\n\r\n return (\r\n <>\r\n {t('ONLINE_BULLETIN.BULLETIN_FOOTER.FURTHUR_INFO')}
\r\n {contactPersons.map(item => {\r\n return (\r\n\r\n
\r\n );\r\n })}\r\n \r\n \r\n \r\n
- \r\n
- \r\n
{' '}\r\n
\r\n\r\n - \r\n
{' '}\r\n
\r\n - \r\n
{' '}\r\n
\r\n
{copyright}
\r\n \r\n\r\n
\r\n \r\n \r\n \r\n
\r\n
\r\n \r\n );\r\n}\r\nexport default OnlineBulletin;\r\n","import Alerts from '../Components/Alert';\r\nimport Charts from '../Components/Charts';\r\nimport MapPreferences from '../pages/WeatherForecast/MapPreferences';\r\nimport HomePage from '../pages/landing-page/home-page';\r\nimport PublicApi from '../pages/public-api-page/public-api';\r\nimport Dashboard from '../pages/dashboard';\r\nimport DroughtMonitor from '../pages/drought-monitor';\r\n// import { ReactComponent as ContingencyPlanIcon } from '../assets/Images/contigencyPlan.svg';\r\nimport { ReactComponent as WeatherForecast } from '../assets/Images/WeatherForecast.svg';\r\nimport { ReactComponent as Home } from '../assets/Images/home.svg';\r\nimport { ReactComponent as PublicAPI } from '../assets/Images/publicAPI.svg';\r\nimport { ReactComponent as DroughtMonitorIcon } from '../assets/Images/DroughtMonitor.svg';\r\nimport Register from '../pages/account/Register';\r\nimport Login from '../pages/account/Login';\r\nimport Publicapikey from '../pages/public-api-page/api-key';\r\nimport ManageStaticData from '../pages/manage-static-data';\r\nimport TermsConditions from '../pages/landing-page/terms-conditions';\r\nimport ResetPassword from '../pages/account/ResetPassword';\r\nimport SettingsDashboard from '../Components/SettingsDashboard';\r\nimport ManageUserList from '../pages/user-list/index';\r\nimport ManageCrops from '../pages/Managecrops';\r\nimport ManageNewsFeed from '../pages/ManageNews/index';\r\n// import ContingencyPlan from '../pages/ContingencyPlan/index';\r\nimport NewsFeed from '../pages/NewsFeed/index';\r\nimport NewsFeedDetailsPage from '../pages/NewsFeed/NewsFeedDetailsPage';\r\nimport BulletIn from '../pages/Bulletin/index';\r\nimport BackOffcieBulletin from '../pages/Bulletin/BackOfficeBulletin';\r\nimport UserGuide from '../pages/UserGuide/index';\r\nimport { ReactComponent as UserGuideIcon } from '../assets/Images/user-guide.svg';\r\nimport ManageUserGuide from '../pages/ManageUserGuide/index';\r\nimport CreateUserGuidePage from '../pages/ManageUserGuide/CreateUserGuidePage';\r\nimport UserGuideDetailPage from '../pages/UserGuide/UserGuideDetailPage';\r\nimport UserSearchContentPage from '../pages/UserGuide/UserSearchContentPage';\r\nimport ManageUserGuideForm from '../pages/ManageUserGuide/ManageForm';\r\nimport UserSearchDetailPage from '../pages/UserGuide/UserSearchDetailPage';\r\n// import CreateTemplate from '../pages/Bulletin/CreateTemplate';\r\n// import CreateBulletin from '../pages/Bulletin/CreateBulletin';\r\n// import ApproveEditor from '../pages/Bulletin/ApproveEditor';\r\nimport AboutUs from '../pages/landing-page/aboutUs';\r\nimport HomePageBulletin from '../pages/Bulletin/HomePageBulletin';\r\nimport CreateBulletinPdf from '../pages/Bulletin/CreateBulletinPdf';\r\nimport CreateOnlineBulletin from '../pages/create-online-bulletin';\r\n\r\nconst Routes = [\r\n {\r\n path: '/home',\r\n name: 'Home',\r\n icon: \r\n
\r\n \r\n
\r\n \r\n {isOpenBulletin && (\r\n
\r\n \r\n
\r\n \r\n
\r\n
\r\n \r\n
\r\n {Object.keys(indicatorRows)?.length ? (\r\n <>\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n\t\t \r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n\r\nexport default DataPopUp;","import React, { useEffect, useState } from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport { t } from 'react-multi-lang';\r\nimport { useHistory } from 'react-router-dom';\r\nimport { useSelector } from 'react-redux';\r\nimport { default as MultiDropdown } from 'react-multilevel-dropdown';\r\n\r\nimport {\r\n Navbar,\r\n NavbarToggler,\r\n NavbarBrand,\r\n Nav,\r\n NavLink,\r\n NavItem,\r\n NavbarText,\r\n UncontrolledDropdown,\r\n Dropdown,\r\n DropdownToggle,\r\n DropdownMenu,\r\n DropdownItem,\r\n} from 'reactstrap';\r\nimport ZADMS from '../../assets/Images/zadms-logo.png';\r\nimport IWMI from '../../assets/Images/ZAMBIA.png'; // \"C:\\Users\\THALLA\\OneDrive\\Desktop\\work\\IDMT\\web-app\\src\\assets\\Images\\iwmi.png\"\r\nimport RightArrowIcon from '../../assets/Images/right_arrow_icon.svg';\r\nimport { menuBarMoreOptions, STATIC_RESOURCE_GET_CATEGORY_LIST } from '../constants/index';\r\nimport ProfileImage from '../../assets/Images/profile-placeholder.png';\r\nimport Routes from '../../routes/routes';\r\nimport { isSuperAdmin, handleLogoutRedirect, isStaffUser } from '../../Components/common/utils';\r\nimport Cookies from 'js-cookie';\r\nimport Closeicon from '../../assets/Images/close.png';\r\nimport DataPopUp from \"../../Components/common/DataModal\";\r\n\r\nconst Header = props => {\r\n const nextProps = useSelector(state => ({\r\n userDetailData: state.userList.userDetailData || null,\r\n }));\r\n\r\n useEffect(() => {\r\n if (nextProps.userDetailData) {\r\n const {\r\n data: { result },\r\n } = nextProps.userDetailData;\r\n }\r\n }, [nextProps.userDetailData]);\r\n\r\n const routeOptions = [\r\n {\r\n id: 1,\r\n headerName: 'Zambia Drought Management System',\r\n routeName: 'home',\r\n },\r\n {\r\n id: 2,\r\n headerName: 'Weather Forecast',\r\n routeName: 'weather-forecast',\r\n },\r\n {\r\n id: 3,\r\n headerName: 'Public API',\r\n routeName: 'public-api',\r\n },\r\n {\r\n id: 4,\r\n headerName: 'Drought Management Tool',\r\n routeName: 'drought-monitor',\r\n },\r\n // {\r\n // id: 5,\r\n // headerName: 'Contingency Plan',\r\n // routeName: 'contingency-plan',\r\n // },\r\n {\r\n id: 6,\r\n headerName: 'Online Bulletin',\r\n routeName: 'bulletin',\r\n },\r\n {\r\n id: 7,\r\n headerName: 'About Us',\r\n routeName: 'about-us',\r\n },\r\n ];\r\n\r\n const history = useHistory();\r\n const [dropdownOpen, setDropdownOpen] = useState(false);\r\n const [headerSubtitle, setHeaderSubtitle] = useState('');\r\n const [selectedDataSourceId, setSelectedDataSourceId] = useState();\r\n const [subHeadingList, setSubHeadingList] = useState();\r\n const [isDefaultSelectedSourceId, setIsDefaultSelectedSourceId] = useState(false);\r\n const toggle = () => setDropdownOpen(prevState => !prevState);\r\n const [sidebarOpen, setSidebarOpen] = useState(false);\r\n const [dataModal, setDataModal]= useState(false);\r\n\r\n \r\n const handleToggle = () => {\r\n setSidebarOpen(!sidebarOpen);\r\n };\r\n \r\n const togglePopUp = () => setDataModal(!dataModal);\r\n\r\n let url = window.location.href;\r\n useEffect(() => {\r\n let title;\r\n if (url) {\r\n routeOptions.map((item) => {\r\n if (url.includes(item.routeName) && !url.includes('login')) {\r\n title = item.headerName;\r\n }\r\n });\r\n } else {\r\n title = t('NAVBAR.HEADER.TITLE');\r\n }\r\n setHeaderSubtitle(title);\r\n }, [url]);\r\n\r\n useEffect(() => {\r\n if (Routes) {\r\n let a = [];\r\n Routes.map(i => {\r\n if (i.visible) {\r\n a.push(i);\r\n }\r\n });\r\n setSubHeadingList(a);\r\n }\r\n }, [Routes]);\r\n\r\n const handleLogout = () => {\r\n handleLogoutRedirect();\r\n history.push('login');\r\n };\r\n\r\n const checkPages = () => {\r\n return (\r\n window.location.href.indexOf('home') === -1 &&\r\n window.location.href.indexOf('register') === -1 &&\r\n window.location.href.indexOf('login') === -1 &&\r\n window.location.href.indexOf('forgot-password') === -1 &&\r\n window.location.href.indexOf('reset-password') === -1 &&\r\n window.location.href.indexOf('change-password') === -1 &&\r\n window.location.href.indexOf('ManageCrops') === -1\r\n );\r\n };\r\n\r\n useEffect(() => {\r\n if (selectedDataSourceId) {\r\n history.push(\r\n `/weather-forecast?dataSourceId=${selectedDataSourceId}&isDefaultSelectedSourceId=${isDefaultSelectedSourceId}`,\r\n );\r\n }\r\n }, [selectedDataSourceId]);\r\n\r\n const handleSubCategory = (value, type, e) => {\r\n if (value === selectedDataSourceId) {\r\n history.push(\r\n `/weather-forecast?dataSourceId=${selectedDataSourceId}&isDefaultSelectedSourceId=${isDefaultSelectedSourceId}`,\r\n );\r\n setIsDefaultSelectedSourceId(true);\r\n } else {\r\n setIsDefaultSelectedSourceId(true);\r\n setSelectedDataSourceId(value);\r\n }\r\n };\r\n\r\n const handleChangePassword = () => {\r\n history.push('/change-password');\r\n };\r\n\r\n const handleMenuClick = (data, e) => {\r\n if (data.name === 'Public API') {\r\n if (isSuperAdmin()) {\r\n history.push('/public-api');\r\n } else {\r\n history.push(data.path);\r\n }\r\n } else {\r\n history.push(data.path);\r\n }\r\n };\r\n\r\n const handleHeaderButtons = () => {\r\n if (\r\n window.location.href.includes('login') ||\r\n window.location.href.includes('forgot-password') ||\r\n window.location.href.includes('reset-password')\r\n ) {\r\n return (\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n Disclaimer
\r\n{t('DISCLAIMER.TEXT1')}
\r\n{t('DISCLAIMER.TEXT2')}
\r\n{t('DISCLAIMER.TEXT3')}
\r\n{t('DISCLAIMER.TEXT4')}\r\n {t('DISCLAIMER.LINK2')}\r\n ). \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n history.push('/home')}>\r\n 
\r\n \r\n {headerSubtitle ? headerSubtitle : t('NAVBAR.HEADER.TITLE')}\r\n \r\n \r\n {/* \r\n
\r\n \r\n {checkPages() && (\r\n \r\n \r\n \r\n )}\r\n
\r\n {/* sidebar */}\r\n {sidebarOpen && (\r\n \r\n {checkPages() && (\r\n \r\n 
\r\n \r\n \r\n )}\r\n
\r\n )}\r\n