diff --git a/src/components/Ecogesture/EcogestureCard.tsx b/src/components/Ecogesture/EcogestureCard.tsx
index 8058d8017bffa7720e08c0458bf5d26592a20d58..fc0a85d1d58570d08777b20b9f8099d15236342c 100644
--- a/src/components/Ecogesture/EcogestureCard.tsx
+++ b/src/components/Ecogesture/EcogestureCard.tsx
@@ -17,12 +17,16 @@ const EcogestureCard: React.FC<EcogestureCardProps> = ({
const handleCardclick = () => {
handleClick && ecogesture && handleClick(ecogesture)
}
- const [ecogestureIcon, setEcogestureIcon] = useState()
+ const [ecogestureIcon, setEcogestureIcon] = useState<string>()
useEffect(() => {
if (ecogesture) {
importIconbyId(ecogesture.id, 'ecogesture').then(icon => {
- icon && setEcogestureIcon(icon)
+ if (icon) {
+ setEcogestureIcon(icon)
+ } else {
+ setEcogestureIcon('')
+ }
})
}
}, [ecogesture])
diff --git a/src/components/Ecogesture/EcogestureList.tsx b/src/components/Ecogesture/EcogestureList.tsx
index 5963c276e797ad224ea8d1a5541d057974cad430..d35027d1d87bb1070a26b86f7b5665c9d984bc61 100644
--- a/src/components/Ecogesture/EcogestureList.tsx
+++ b/src/components/Ecogesture/EcogestureList.tsx
@@ -29,6 +29,7 @@ const EcogesturesList: React.FC = () => {
setSelectedEcogesture,
] = useState<Ecogesture | null>(null)
const [ecogestures, setEcogestures] = useState<Ecogesture[] | null>(null)
+ const [isLoaded, setisLoaded] = useState(false)
const [openEcogestureModal, setOpenEcogestureModal] = useState(false)
const [openNegaWattModal, setOpenNegaWattModal] = useState(false)
const [filterbyFluid, setfilterbyFluid] = useState<FluidType | null>(null)
@@ -66,10 +67,12 @@ const EcogesturesList: React.FC = () => {
toggleDropDown()
}
const toggleSort = () => {
+ setisLoaded(false)
setascendingSort(prev => !prev)
if (openDropDown == true) {
toggleDropDown()
}
+ setTimeout(() => setisLoaded(true), 100)
}
const handleKeypress = (
e: React.KeyboardEvent<HTMLDivElement>,
@@ -101,6 +104,7 @@ const EcogesturesList: React.FC = () => {
}
}
loadEcogestures()
+ setisLoaded(true)
return () => {
subscribed = false
}
@@ -108,220 +112,221 @@ const EcogesturesList: React.FC = () => {
return (
<div className="ecogesture-root">
- {!ecogestures ? (
- <div className="content-view-loading">
- <StyledChallengeSpinner size="5em" />
- </div>
- ) : (
- <>
- {openNegaWattModal && (
- <NegaWattModal handleCloseClick={handleNegaWattCloseClick} />
- )}
- <div className="negawatt-button-content">
- <div className="filters text-16-normal">
+ <>
+ {openNegaWattModal && (
+ <NegaWattModal handleCloseClick={handleNegaWattCloseClick} />
+ )}
+ <div className="negawatt-button-content">
+ <div className="filters text-16-normal">
+ <div
+ className="filter-button"
+ onClick={() => toggleDropDown()}
+ tabIndex={0}
+ onBlur={e => {
+ if (e.relatedTarget === null) toggleDropDown()
+ }}
+ >
+ <MuiButton
+ classes={{
+ root: 'btn-secondary-negative',
+ label: 'text-14-normal',
+ }}
+ >
+ <StyledIcon icon={SortIcon} size={24} />
+ <span
+ className={
+ openDropDown ? 'ecogestures opened' : 'ecogestures'
+ }
+ >
+ {filterbyFluid === null
+ ? t('ECOGESTURE.FILTER_TITLE')
+ : t('FLUID.' + FluidType[filterbyFluid] + '.LABEL')}
+ </span>
+ </MuiButton>
+ </div>
+ <div
+ className={openDropDown ? 'dropdown opened' : 'dropdown'}
+ tabIndex={0}
+ >
<div
- className="filter-button"
- onClick={() => toggleDropDown()}
+ className={
+ filterbyFluid === null ? 'filter filter-active' : 'filter'
+ }
+ onClick={() => {
+ toggleFilter(null)
+ }}
tabIndex={0}
- onBlur={e => {
- if (e.relatedTarget === null) toggleDropDown()
+ onKeyPress={e => {
+ handleKeypress(e, null)
}}
>
- <MuiButton
- classes={{
- root: 'btn-secondary-negative',
- label: 'text-14-normal',
- }}
- >
- <StyledIcon icon={SortIcon} size={24} />
- <span
- className={
- openDropDown ? 'ecogestures opened' : 'ecogestures'
- }
- >
- {filterbyFluid === null
- ? t('ECOGESTURE.FILTER_TITLE')
- : t('FLUID.' + FluidType[filterbyFluid] + '.LABEL')}
- </span>
- </MuiButton>
+ {t('ECOGESTURE.FILTER_TITLE')}
+ <StyledIcon
+ className={
+ filterbyFluid === null ? 'active checkicon' : 'checkicon'
+ }
+ icon={CheckIcon}
+ size={18}
+ />
</div>
+
<div
- className={openDropDown ? 'dropdown opened' : 'dropdown'}
+ onClick={() => {
+ toggleFilter(FluidType.ELECTRICITY)
+ }}
+ className={
+ filterbyFluid === FluidType.ELECTRICITY
+ ? 'filter filter-active'
+ : 'filter'
+ }
tabIndex={0}
+ onKeyPress={e => {
+ handleKeypress(e, FluidType.ELECTRICITY)
+ }}
>
- <div
+ <StyledIcon
className={
- filterbyFluid === null ? 'filter filter-active' : 'filter'
+ filterbyFluid === FluidType.ELECTRICITY
+ ? 'icon'
+ : 'active icon'
}
- onClick={() => {
- toggleFilter(null)
- }}
- tabIndex={0}
- onKeyPress={e => {
- handleKeypress(e, null)
- }}
- >
- {t('ECOGESTURE.FILTER_TITLE')}
- <StyledIcon
- className={
- filterbyFluid === null ? 'active checkicon' : 'checkicon'
- }
- icon={CheckIcon}
- size={18}
- />
- </div>
-
- <div
- onClick={() => {
- toggleFilter(FluidType.ELECTRICITY)
- }}
+ icon={ElecIcon}
+ size={30}
+ />
+ <span>{t(`FLUID.ELECTRICITY.LABEL`)}</span>
+ <StyledIcon
className={
filterbyFluid === FluidType.ELECTRICITY
- ? 'filter filter-active'
- : 'filter'
+ ? 'active checkicon'
+ : 'checkicon'
}
- tabIndex={0}
- onKeyPress={e => {
- handleKeypress(e, FluidType.ELECTRICITY)
- }}
- >
- <StyledIcon
- className={
- filterbyFluid === FluidType.ELECTRICITY
- ? 'icon'
- : 'active icon'
- }
- icon={ElecIcon}
- size={30}
- />
- <span>{t(`FLUID.ELECTRICITY.LABEL`)}</span>
- <StyledIcon
- className={
- filterbyFluid === FluidType.ELECTRICITY
- ? 'active checkicon'
- : 'checkicon'
- }
- icon={CheckIcon}
- size={18}
- />
- </div>
- <div
- onClick={() => {
- toggleFilter(FluidType.WATER)
- }}
+ icon={CheckIcon}
+ size={18}
+ />
+ </div>
+ <div
+ onClick={() => {
+ toggleFilter(FluidType.WATER)
+ }}
+ className={
+ filterbyFluid === FluidType.WATER
+ ? 'filter filter-active'
+ : 'filter'
+ }
+ tabIndex={0}
+ onKeyPress={e => {
+ handleKeypress(e, FluidType.WATER)
+ }}
+ >
+ <StyledIcon
className={
- filterbyFluid === FluidType.WATER
- ? 'filter filter-active'
- : 'filter'
+ filterbyFluid === FluidType.WATER ? 'icon' : 'active icon'
}
- tabIndex={0}
- onKeyPress={e => {
- handleKeypress(e, FluidType.WATER)
- }}
- >
- <StyledIcon
- className={
- filterbyFluid === FluidType.WATER ? 'icon' : 'active icon'
- }
- icon={WaterIcon}
- size={30}
- />
- <span> {t(`FLUID.WATER.LABEL`)}</span>
- <StyledIcon
- className={
- filterbyFluid === FluidType.WATER
- ? 'active checkicon'
- : 'checkicon'
- }
- icon={CheckIcon}
- size={18}
- />
- </div>
- <div
- onClick={() => {
- toggleFilter(FluidType.GAS)
- }}
+ icon={WaterIcon}
+ size={30}
+ />
+ <span> {t(`FLUID.WATER.LABEL`)}</span>
+ <StyledIcon
className={
- filterbyFluid === FluidType.GAS
- ? 'filter filter-active'
- : 'filter'
+ filterbyFluid === FluidType.WATER
+ ? 'active checkicon'
+ : 'checkicon'
}
- tabIndex={0}
- onKeyPress={e => {
- handleKeypress(e, FluidType.GAS)
- }}
- >
- <StyledIcon
- className={
- filterbyFluid === FluidType.GAS ? 'icon' : 'active icon'
- }
- icon={GasIcon}
- size={30}
- />
- <span> {t(`FLUID.GAS.LABEL`)}</span>
- <StyledIcon
- className={
- filterbyFluid === FluidType.GAS
- ? 'active checkicon'
- : 'checkicon'
- }
- icon={CheckIcon}
- size={18}
- />
- </div>
+ icon={CheckIcon}
+ size={18}
+ />
</div>
-
<div
- className="order-container"
onClick={() => {
- toggleSort()
+ toggleFilter(FluidType.GAS)
+ }}
+ className={
+ filterbyFluid === FluidType.GAS
+ ? 'filter filter-active'
+ : 'filter'
+ }
+ tabIndex={0}
+ onKeyPress={e => {
+ handleKeypress(e, FluidType.GAS)
}}
>
- <div className="order-button">
- <StyledIcon icon={OrderIcon} size={28} />
- </div>
+ <StyledIcon
+ className={
+ filterbyFluid === FluidType.GAS ? 'icon' : 'active icon'
+ }
+ icon={GasIcon}
+ size={30}
+ />
+ <span> {t(`FLUID.GAS.LABEL`)}</span>
+ <StyledIcon
+ className={
+ filterbyFluid === FluidType.GAS
+ ? 'active checkicon'
+ : 'checkicon'
+ }
+ icon={CheckIcon}
+ size={18}
+ />
</div>
- <div className="ng-question" onClick={handleNegaWattClick}>
- {t('ECOGESTURE.QUESTION_NEGAWATT')}
+ </div>
+
+ <div
+ className="order-container"
+ onClick={() => {
+ toggleSort()
+ }}
+ >
+ <div className="order-button">
+ <StyledIcon icon={OrderIcon} size={28} />
</div>
</div>
+ <div className="ng-question" onClick={handleNegaWattClick}>
+ {t('ECOGESTURE.QUESTION_NEGAWATT')}
+ </div>
</div>
- <div className="ecogesture-content">
- {ecogestures && filterbyFluid !== null
- ? ecogestures
- .filter(ecogesture =>
- ecogesture.fluidTypes.includes(filterbyFluid)
- )
- .sort(
- ascendingSort
- ? (a, b) => a.nwh - b.nwh
- : (a, b) => b.nwh - a.nwh
- )
- .map((ecogesture, index) => (
- <div key={index} className="ecogesture-list-item">
- <EcogestureCard
- ecogesture={ecogesture}
- handleClick={handleClick}
- />
- </div>
- ))
- : ecogestures
- .sort(
- ascendingSort
- ? (a, b) => a.nwh - b.nwh
- : (a, b) => b.nwh - a.nwh
- )
- .map((ecogesture, index) => (
- <div key={index} className="ecogesture-list-item">
- <EcogestureCard
- ecogesture={ecogesture}
- handleClick={handleClick}
- />
- </div>
- ))}
- </div>
- </>
- )}
+ </div>
+ <div className="ecogesture-content">
+ {!ecogestures || !isLoaded ? (
+ <div className="content-view-loading">
+ <StyledChallengeSpinner size="5em" />
+ </div>
+ ) : ecogestures && filterbyFluid !== null ? (
+ ecogestures
+ .filter(ecogesture =>
+ ecogesture.fluidTypes.includes(filterbyFluid)
+ )
+ .sort(
+ ascendingSort
+ ? (a, b) => a.nwh - b.nwh
+ : (a, b) => b.nwh - a.nwh
+ )
+ .map((ecogesture, index) => (
+ <div key={index} className="ecogesture-list-item">
+ <EcogestureCard
+ ecogesture={ecogesture}
+ handleClick={handleClick}
+ />
+ </div>
+ ))
+ ) : (
+ ecogestures &&
+ ecogestures
+ .sort(
+ ascendingSort
+ ? (a, b) => a.nwh - b.nwh
+ : (a, b) => b.nwh - a.nwh
+ )
+ .map((ecogesture, index) => (
+ <div key={index} className="ecogesture-list-item">
+ <EcogestureCard
+ ecogesture={ecogesture}
+ handleClick={handleClick}
+ />
+ </div>
+ ))
+ )}
+ </div>
+ </>
{openEcogestureModal && selectedEcogesture && (
<EcogestureModal
ecogesture={selectedEcogesture}
diff --git a/src/components/Ecogesture/EcogestureModal.tsx b/src/components/Ecogesture/EcogestureModal.tsx
index fab80a1ab011b13511a63083c27f118bac0f8949..f00bb1380b8e1dfbc8bbb74b1dabe8b79d5ff0ed 100644
--- a/src/components/Ecogesture/EcogestureModal.tsx
+++ b/src/components/Ecogesture/EcogestureModal.tsx
@@ -6,7 +6,6 @@ import { Ecogesture } from 'models'
import Modal from 'components/CommonKit/Modal/Modal'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
-import defaultIcon from 'assets/icons/visu/ecogesture/default.svg'
import { importIconbyId } from 'utils/utils'
import './ecogestureModal.scss'
import useExploration from 'components/Hooks/useExploration'
@@ -28,7 +27,7 @@ const EcogestureModal: React.FC<EcogestureModalProps> = ({
handleCloseClick,
}: EcogestureModalProps) => {
const { t } = useI18n()
- const [ecogestureIcon, setEcogestureIcon] = useState(defaultIcon)
+ const [ecogestureIcon, setEcogestureIcon] = useState('')
const [isMoreDetail, setIsMoreDetail] = useState(false)
const { currentChallenge } = useSelector(
(state: AppStore) => state.ecolyo.challenge
diff --git a/src/components/Ecogesture/ecogestureCard.scss b/src/components/Ecogesture/ecogestureCard.scss
index 34fa1a3ac46622f013bd1e1b5fc92e35bc5a3079..ac631114e04b0e06075b29909ff3757ceeca24a2 100644
--- a/src/components/Ecogesture/ecogestureCard.scss
+++ b/src/components/Ecogesture/ecogestureCard.scss
@@ -22,7 +22,6 @@
background: $blue-radial-gradient;
font-size: 12px;
}
-
.ec-content {
display: flex;
flex-direction: column;