Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactoring of class components to functional components #7629

Open
wants to merge 22 commits into
base: develop
Choose a base branch
from
Open

Refactoring of class components to functional components #7629

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f4ffa68
converted class component RequiresUpdate to functional component
noah-brunate Sep 18, 2024
3a4f046
Merge branch 'develop' into ocrvs-993
Zangetsu101 Sep 19, 2024
484c8d9
Converted RegRatesLineChartComponent to a funcitonal component
noah-brunate Sep 20, 2024
fd50938
Converted component InProgressComponent to a funcitonal component
noah-brunate Sep 20, 2024
d92605d
converted ReadyToPrintComponent to funcitonal
noah-brunate Sep 23, 2024
70ed764
converted SentForReviewComponent to functional
noah-brunate Sep 23, 2024
b2d70e5
Converted SearchResultView to functional component
noah-brunate Sep 23, 2024
7870a37
converted UserAuditHistoryComponent to functional
noah-brunate Sep 23, 2024
bf3b123
Merge branch 'develop' into ocrvs-993
noah-brunate Sep 23, 2024
0576117
Some modifications in two components
noah-brunate Sep 26, 2024
b957664
lint error rectifications
noah-brunate Sep 26, 2024
7602e84
Merge branch 'develop' into ocrvs-993
rikukissa Sep 27, 2024
25f7849
Merge branch 'develop' into ocrvs-993
noah-brunate Oct 1, 2024
b0b452d
updated the CHANGELOG.md file
noah-brunate Oct 2, 2024
4f2dfa3
Merge branch 'develop' into ocrvs-993
Zangetsu101 Oct 2, 2024
eddd6e8
Merge branch 'develop' into ocrvs-993
noah-brunate Oct 4, 2024
95964ee
updated CHANGELOG file
noah-brunate Oct 8, 2024
94d0165
Merge branch 'develop' into ocrvs-993
noah-brunate Oct 8, 2024
1430411
rectifed testing error
noah-brunate Oct 14, 2024
ad6309b
ressolved test errors
noah-brunate Oct 17, 2024
215b002
Merge branch 'develop' into ocrvs-993
noah-brunate Oct 17, 2024
d8cfe7e
Merge branch 'develop' into ocrvs-993
noah-brunate Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 120 additions & 121 deletions packages/client/src/components/charts/RegRatesLineChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@
import styled, { withTheme } from 'styled-components'
import { CompletenessRateTime } from '@client/views/SysAdmin/Performance/utils'
import { messages } from '@client/i18n/messages/views/performance'
import type { LegendProps } from 'recharts'
// import type { LegendProps } from 'recharts'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We can directly remove this if it's not needed anymore

import { useState, useEffect } from 'react';

interface IProps extends WrappedComponentProps {
theme: ITheme
Expand All @@ -27,25 +28,6 @@
completenessRateTime?: CompletenessRateTime
}

interface IActiveState {
value: number
stroke: string
}
interface IState {
legendMarginTop: number
legendMarginLeft: number
chartTop: number
chartRight: number
chartBottom: number
chartLeft: number
maximizeXAxisInterval?: boolean
legendLayout: LegendProps['layout']
activeLabel: string
activeRegisteredInTargetDays: IActiveState
activeTotalRegistered: IActiveState
activeTotalEstimate: IActiveState
}

Comment on lines -30 to -48
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably better to keep it and use in useState<IState>(...) at line no 146

const CustomLegendContainer = styled.div<{
marginLeft: number
marginTop: number
Expand Down Expand Up @@ -131,24 +113,49 @@
)
}

class RegRatesLineChartComponent extends React.Component<IProps, IState> {
constructor(props: IProps) {
super(props)
this.state = {
...this.getStatePropertiesForChart(),
...this.getLatestData()
}
}
function RegRatesLineChartComponent (props: IProps) {

getStatePropertiesForChart = () => {
if (window.innerWidth > this.props.theme.grid.breakpoints.md) {
return this.getStatePropertiesForLargeWindowChart()
const getStatePropertiesForChart = () => {
if (window.innerWidth > props.theme.grid.breakpoints.md) {
return getStatePropertiesForLargeWindowChart();
} else {
return this.getStatePropertiesForSmallWindowChart()
return getStatePropertiesForSmallWindowChart();
}
}
};

const getLatestData = () => {
const { data, theme } = props;
const latestData = data && data[data.length - 1];
return {
activeLabel: (latestData && latestData.label) || '',
activeRegisteredInTargetDays: {
value: (latestData && latestData.registeredInTargetDays) || 0,
stroke: theme.colors.teal
},
activeTotalRegistered: {
value: (latestData && latestData.totalRegistered) || 0,
stroke: theme.colors.tealLight
},
activeTotalEstimate: {
value: (latestData && latestData.totalEstimate) || 0,
stroke: theme.colors.grey300
}
};
};

const [state, setState] = useState({
...getStatePropertiesForChart(),
...getLatestData()
});

getStatePropertiesForSmallWindowChart = () => {
useEffect(() => {
window.addEventListener('resize', recordWindowWidth);
return () => {
window.removeEventListener('resize', recordWindowWidth);
};

Check failure on line 155 in packages/client/src/components/charts/RegRatesLineChart.tsx

View workflow job for this annotation

GitHub Actions / test (packages/client) 

React Hook useEffect has a missing dependency: 'recordWindowWidth'. Either include it or remove the dependency array
}, []);
Zangetsu101 marked this conversation as resolved.
Show resolved Hide resolved

const getStatePropertiesForSmallWindowChart = () => {
return {
legendMarginTop: -16,
legendMarginLeft: 0,
Expand All @@ -158,9 +165,10 @@
chartLeft: 40,
maximizeXAxisInterval: true,
legendLayout: 'horizontal' as const
}
}
getStatePropertiesForLargeWindowChart = () => {
};
};

const getStatePropertiesForLargeWindowChart = () => {
return {
legendMarginTop: -16,
legendMarginLeft: 54,
Expand All @@ -170,54 +178,28 @@
chartLeft: 10,
maximizeXAxisInterval: false,
legendLayout: 'vertical' as const
}
}
componentDidMount() {
window.addEventListener('resize', this.recordWindowWidth)
}

componentWillUnmount() {
window.removeEventListener('resize', this.recordWindowWidth)
}
};
};

recordWindowWidth = () => {
this.setState({
...this.state,
...this.getStatePropertiesForChart()
})
}
const recordWindowWidth = () => {
setState({
...state,
...getStatePropertiesForChart()
});
};

getLatestData() {
const { data, theme } = this.props
const latestData = data && data[data.length - 1]
return {
activeLabel: (latestData && latestData.label) || '',
activeRegisteredInTargetDays: {
value: (latestData && latestData.registeredInTargetDays) || 0,
stroke: theme.colors.teal
},
activeTotalRegistered: {
value: (latestData && latestData.totalRegistered) || 0,
stroke: theme.colors.tealLight
},
activeTotalEstimate: {
value: (latestData && latestData.totalEstimate) || 0,
stroke: theme.colors.grey300
}
}
}
customizedLegend = () => {
const customizedLegend = () => {
const {
activeLabel,
activeRegisteredInTargetDays,
activeTotalRegistered,
activeTotalEstimate
} = this.state.activeLabel ? this.state : this.getLatestData()
const { intl, eventType, completenessRateTime } = this.props
} = state.activeLabel ? state : getLatestData();
const { intl, eventType, completenessRateTime } = props;
return (
<CustomLegendContainer
marginLeft={this.state.legendMarginLeft}
marginTop={this.state.legendMarginTop}
marginLeft={state.legendMarginLeft}
marginTop={state.legendMarginTop}
>
<LegendHeader>{activeLabel}</LegendHeader>
<LegendDetails>
Expand Down Expand Up @@ -284,22 +266,24 @@
)
}

customizedTooltip = (dataPoint: any) => {
const wrapperPayload = dataPoint.payload[0]
const customizedTooltip = (dataPoint: any) => {
const wrapperPayload = dataPoint.payload[0];

return (
<TooltipContent>
{wrapperPayload &&
wrapperPayload.payload &&
wrapperPayload.payload.registrationPercentage}
</TooltipContent>
)
}
mouseMoveHandler = (data: any) => {
const { theme } = this.props
);
};

const mouseMoveHandler = (data: any) => {
const { theme } = props;

if (data && data.activePayload) {
this.setState({
setState((prevState) => ({
...prevState,
activeLabel: data.activeLabel || '',
activeRegisteredInTargetDays: {
value: data.activePayload[2].value || 0,
Expand All @@ -313,26 +297,39 @@
value: data.activePayload[0].value || 0,
stroke: theme.colors.grey200
}
})
}));
}
}
mouseLeaveHandler = () => {
this.setState(this.getLatestData())
}
getLoadingIndicatorForMobileView() {
};

const mouseLeaveHandler = () => {
setState({
...state,
...getLatestData(),
legendMarginTop: 0,
legendMarginLeft: 0,
chartTop: 0,
chartRight: 0,
chartBottom: 0,
chartLeft: 0,
maximizeXAxisInterval: false,
legendLayout: 'horizontal'
});
};

const getLoadingIndicatorForMobileView = () => {
return (
<LoadingIndicator id="reg-rates-line-chart-loader" flexDirection="column">
<LegendLoadingIndicator>
<CustomLegendContainer
marginLeft={this.state.legendMarginLeft}
marginTop={this.state.legendMarginTop}
marginLeft={state.legendMarginLeft}
marginTop={state.legendMarginTop}
>
<LegendHeader>
<LoaderBox width={40} />
</LegendHeader>
<LegendDetails>
<div>
<LegendDot color={this.props.theme.colors.grey300} />
<LegendDot color={props.theme.colors.grey300} />
</div>
<LegendData>
<LoaderBox width={60} />
Expand All @@ -342,7 +339,7 @@
</LegendDetails>
<LegendDetails>
<div>
<LegendDot color={this.props.theme.colors.grey300} />
<LegendDot color={props.theme.colors.grey300} />
</div>
<LegendData>
<LegendDataLabel>
Expand All @@ -356,7 +353,7 @@
</LegendDetails>
<LegendDetails>
<div>
<LegendDot color={this.props.theme.colors.grey300} />
<LegendDot color={props.theme.colors.grey300} />
</div>
<LegendData>
<LegendDataLabel>
Expand All @@ -373,22 +370,23 @@
<MobileChartLoadingIndicator />
</LoadingIndicator>
)
}
getLoadingIndicatorForDesktopView() {
};

const getLoadingIndicatorForDesktopView = () => {
return (
<LoadingIndicator id="reg-rates-line-chart-loader" flexDirection="row">
<DesktopChartLoadingIndicator />
<LegendLoadingIndicator>
<CustomLegendContainer
marginLeft={this.state.legendMarginLeft}
marginTop={this.state.legendMarginTop}
marginLeft={state.legendMarginLeft}
marginTop={state.legendMarginTop}
>
<LegendHeader>
<LoaderBox width={60} />
</LegendHeader>
<LegendDetails>
<div>
<LegendDot color={this.props.theme.colors.grey300} />
<LegendDot color={props.theme.colors.grey300} />
</div>
<LegendData>
<LoaderBox width={80} />
Expand All @@ -398,7 +396,7 @@
</LegendDetails>
<LegendDetails>
<div>
<LegendDot color={this.props.theme.colors.grey300} />
<LegendDot color={props.theme.colors.grey300} />
</div>
<LegendData>
<LegendDataLabel>
Expand All @@ -412,7 +410,7 @@
</LegendDetails>
<LegendDetails>
<div>
<LegendDot color={this.props.theme.colors.grey300} />
<LegendDot color={props.theme.colors.grey300} />
</div>
<LegendData>
<LegendDataLabel>
Expand All @@ -428,23 +426,25 @@
</LegendLoadingIndicator>
</LoadingIndicator>
)
}
getLoadingIndicator = () => {
if (window.innerWidth > this.props.theme.grid.breakpoints.md) {
return this.getLoadingIndicatorForDesktopView()
};

const getLoadingIndicator = () => {
if (window.innerWidth > props.theme.grid.breakpoints.md) {
return getLoadingIndicatorForDesktopView();
} else {
return this.getLoadingIndicatorForMobileView()
return getLoadingIndicatorForMobileView();
}
}
getChart(data: ILineDataPoint[]) {
};

const getChart = (data: ILineDataPoint[]) => {
const {
chartTop,
chartRight,
chartBottom,
chartLeft,
maximizeXAxisInterval,
legendLayout
} = this.state
} = state;
return (
<LineChart
data={data}
Expand All @@ -453,26 +453,25 @@
'totalRegistered',
'registeredInTargetDays'
]}
mouseMoveHandler={this.mouseMoveHandler}
mouseLeaveHandler={this.mouseLeaveHandler}
tooltipContent={this.customizedTooltip}
legendContent={this.customizedLegend}
mouseMoveHandler={mouseMoveHandler}
mouseLeaveHandler={mouseLeaveHandler}
tooltipContent={customizedTooltip}
legendContent={customizedLegend}
chartTop={chartTop}
chartRight={chartRight}
chartBottom={chartBottom}
chartLeft={chartLeft}
maximizeXAxisInterval={maximizeXAxisInterval}
legendLayout={legendLayout}
/>
)
}
render() {
const { data } = this.props
);
};

if (data) return this.getChart(data)
else return this.getLoadingIndicator()
}
}
const { data } = props;

if (data) return getChart(data);
else return getLoadingIndicator();
};

export const RegRatesLineChart = withTheme(
injectIntl(RegRatesLineChartComponent)
Expand Down
Loading
Loading