From 442613cb5db487f783e669773da7a73c24a11572 Mon Sep 17 00:00:00 2001 From: Justice Otuya Date: Wed, 4 Oct 2023 22:49:42 +0100 Subject: [PATCH 1/7] refactor: article graph to use functional component --- .../components/articles/article_graphs.jsx | 266 ++++++++---------- 1 file changed, 122 insertions(+), 144 deletions(-) diff --git a/app/assets/javascripts/components/articles/article_graphs.jsx b/app/assets/javascripts/components/articles/article_graphs.jsx index da018294f6..31fd013680 100644 --- a/app/assets/javascripts/components/articles/article_graphs.jsx +++ b/app/assets/javascripts/components/articles/article_graphs.jsx @@ -1,170 +1,148 @@ -import React from 'react'; -import createReactClass from 'create-react-class'; -import PropTypes from 'prop-types'; +import React, { useEffect, useMemo, useRef, useState } from 'react'; import Wp10Graph from './wp10_graph.jsx'; import EditSizeGraph from './edit_size_graph.jsx'; import Loading from '../common/loading.jsx'; -import request from '../../utils/request'; +import request from '../../utils/request.js'; +const ArticleGraphs = ({ article }) => { + const { id: article_id } = article; -const ArticleGraphs = createReactClass({ - displayName: 'ArticleGraphs', + const [showGraph, setShowGraph] = useState(false); + const [selectedRadio, setSelectedRadio] = useState('wp10_score'); + const [articleData, setArticleData] = useState(null); - propTypes: { - article: PropTypes.object - }, + const elementRef = useRef(null); - getInitialState() { - return { - showGraph: false, - selectedRadio: 'wp10_score', - articleData: null - }; - }, - - componentDidMount() { - this.ref = React.createRef(); - }, - - componentDidUpdate(_, prevState) { - if (this.state.showGraph && !prevState.showGraph) { - // Add event listener when the component is visible - document.addEventListener('mousedown', this.handleClickOutside); + useEffect(() => { + if (showGraph) { + document.addEventListener('mousedown', handleClickOutside); + } else { + document.removeEventListener('mousedown', handleClickOutside); } - if (!this.state.showGraph && prevState.showGraph) { - // remove event listener when the component is hidden - document.removeEventListener('mousedown', this.handleClickOutside); - } - }, - getData() { - if (this.state.articleData) { return; } + return () => { + document.removeEventListener('mousedown', handleClickOutside); + }; + }, [showGraph]); - const articleId = this.props.article.id; - const articledataUrl = `/articles/article_data.json?article_id=${articleId}`; + function getData() { + if (articleData) { + return; + } + const articledataUrl = `/articles/article_data.json?article_id=${article_id}`; request(articledataUrl) .then(resp => resp.json()) .then((data) => { - this.setState({ articleData: data }); + setArticleData(data); }); - }, + } - handleClickOutside(event) { - const element = this.ref.current; + function handleClickOutside(event) { + const element = elementRef.current; if (element && !element.contains(event.target)) { - this.hideGraph(); + handleHideGraph(); + } + } + + function handleShowGraph() { + getData(); + setShowGraph(true); + } + + function handleHideGraph() { + setArticleData(null); + setShowGraph(false); + } + + function handleRadioChange(event) { + setSelectedRadio(event.currentTarget.value); + } + + function graphId() { + return `vega-graph-${article_id}`; + } + + const dataIncludesWp10 = articleData && articleData[0].wp10; + + const graph = useMemo(() => { + if (!articleData) { + return ; } - }, - - showGraph() { - this.getData(); - this.setState({ showGraph: true }); - }, - - handleRadioChange(event) { - this.setState({ - selectedRadio: event.currentTarget.value - }); - }, - - hideGraph() { - this.state.articleData = null; - this.setState({ showGraph: false }); - }, - - graphId() { - return `vega-graph-${this.props.article.id}`; - }, - - render() { - let style = 'hidden'; - if (this.state.showGraph) { - style = ''; + + if (dataIncludesWp10 && selectedRadio === 'wp10_score') { + return ( + + ); } - let graph; - let editSize; - let radioInput; - const graphWidth = 500; - const graphHeight = 300; - const className = `vega-graph ${style}`; - - if (this.state.articleData != null) { - // Only render the wp10 graph radio button if the data includes wp10 / article completeness scores - if (this.state.articleData[0].wp10) { - radioInput = ( -
-
- - -
-
- - -
-
- ); - if (this.state.selectedRadio === 'wp10_score') { - graph = ( - - ); - } else { - graph = ( - - ); - } - } else { - editSize = ( -

{I18n.t('articles.edit_size')}

- ); - graph = ( - - ); - } // Display the loading element if articleData is not available - } else { - graph = ; + return ( + + ); + }, [articleData, dataIncludesWp10, selectedRadio]); + + const radioInput = useMemo(() => { + if (!dataIncludesWp10 || !articleData) { + return null; } return ( - - {I18n.t('articles.article_development')} -
-
- {radioInput} - {editSize} -
- {graph} +
+
+ +
- +
+ + +
+
); - } -}); + }, [articleData, dataIncludesWp10, selectedRadio]); + + const editSize = useMemo(() => { + if (dataIncludesWp10 || !articleData) { + return null; + } + + return

{I18n.t('articles.edit_size')}

; + }, [articleData, dataIncludesWp10]); + + const className = `vega-graph ${showGraph ? '' : 'hidden'}`; + + return ( + + {I18n.t('articles.article_development')} +
+
+ {radioInput} + {editSize} +
+ {graph} +
+ + ); +}; export default ArticleGraphs; From 7a800bcf45c644d0a12743e9b596dd03707f11cb Mon Sep 17 00:00:00 2001 From: Justice Otuya Date: Wed, 18 Oct 2023 22:01:49 +0100 Subject: [PATCH 2/7] fix: remove unecessary usememo and add fixes --- .../components/articles/article_graphs.jsx | 31 ++++++++----------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/app/assets/javascripts/components/articles/article_graphs.jsx b/app/assets/javascripts/components/articles/article_graphs.jsx index 31fd013680..1802211bd7 100644 --- a/app/assets/javascripts/components/articles/article_graphs.jsx +++ b/app/assets/javascripts/components/articles/article_graphs.jsx @@ -14,16 +14,18 @@ const ArticleGraphs = ({ article }) => { const elementRef = useRef(null); useEffect(() => { - if (showGraph) { - document.addEventListener('mousedown', handleClickOutside); - } else { - document.removeEventListener('mousedown', handleClickOutside); - } + const handleClickOutside = (event) => { + const element = elementRef.current; + if (element && !element.contains(event.target)) { + handleHideGraph(); + } + }; + document.addEventListener('mousedown', handleClickOutside); return () => { document.removeEventListener('mousedown', handleClickOutside); }; - }, [showGraph]); + }, []); function getData() { if (articleData) { @@ -37,13 +39,6 @@ const ArticleGraphs = ({ article }) => { }); } - function handleClickOutside(event) { - const element = elementRef.current; - if (element && !element.contains(event.target)) { - handleHideGraph(); - } - } - function handleShowGraph() { getData(); setShowGraph(true); @@ -62,7 +57,7 @@ const ArticleGraphs = ({ article }) => { return `vega-graph-${article_id}`; } - const dataIncludesWp10 = articleData && articleData[0].wp10; + const dataIncludesWp10 = articleData?.[0]?.wp10; const graph = useMemo(() => { if (!articleData) { @@ -90,7 +85,7 @@ const ArticleGraphs = ({ article }) => { ); }, [articleData, dataIncludesWp10, selectedRadio]); - const radioInput = useMemo(() => { + const radioInput = () => { if (!dataIncludesWp10 || !articleData) { return null; } @@ -119,15 +114,15 @@ const ArticleGraphs = ({ article }) => {
); - }, [articleData, dataIncludesWp10, selectedRadio]); + }; - const editSize = useMemo(() => { + const editSize = () => { if (dataIncludesWp10 || !articleData) { return null; } return

{I18n.t('articles.edit_size')}

; - }, [articleData, dataIncludesWp10]); + }; const className = `vega-graph ${showGraph ? '' : 'hidden'}`; From c7bbd92959f3f3f3f13c1dc44a331f5287ba7cfc Mon Sep 17 00:00:00 2001 From: Justice Otuya Date: Thu, 19 Oct 2023 17:30:18 +0100 Subject: [PATCH 3/7] fix: remove unecessary usememo and add fixes --- .../components/articles/article_graphs.jsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/components/articles/article_graphs.jsx b/app/assets/javascripts/components/articles/article_graphs.jsx index 1802211bd7..a98b15d533 100644 --- a/app/assets/javascripts/components/articles/article_graphs.jsx +++ b/app/assets/javascripts/components/articles/article_graphs.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useMemo, useRef, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import Wp10Graph from './wp10_graph.jsx'; import EditSizeGraph from './edit_size_graph.jsx'; import Loading from '../common/loading.jsx'; @@ -20,10 +20,18 @@ const ArticleGraphs = ({ article }) => { handleHideGraph(); } }; + + const handlePressEscapeKey = (event) => { + if (event.key === 'Escape') { + handleHideGraph(); + } + }; document.addEventListener('mousedown', handleClickOutside); + document.addEventListener('keydown', handlePressEscapeKey); return () => { document.removeEventListener('mousedown', handleClickOutside); + document.removeEventListener('keydown', handlePressEscapeKey); }; }, []); @@ -59,7 +67,7 @@ const ArticleGraphs = ({ article }) => { const dataIncludesWp10 = articleData?.[0]?.wp10; - const graph = useMemo(() => { + const graph = () => { if (!articleData) { return ; } @@ -83,7 +91,7 @@ const ArticleGraphs = ({ article }) => { articleData={articleData} /> ); - }, [articleData, dataIncludesWp10, selectedRadio]); + }; const radioInput = () => { if (!dataIncludesWp10 || !articleData) { @@ -96,6 +104,7 @@ const ArticleGraphs = ({ article }) => { { { {I18n.t('articles.article_development')}
- {radioInput} - {editSize} + {radioInput()} + {editSize()}
- {graph} + {graph()}
); From 8281fc0c1186baa14f8b09cd4f9940a3889069f2 Mon Sep 17 00:00:00 2001 From: Justice Otuya Date: Thu, 19 Oct 2023 19:24:19 +0100 Subject: [PATCH 4/7] fix: change function to variable --- .../javascripts/components/articles/article_graphs.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/app/assets/javascripts/components/articles/article_graphs.jsx b/app/assets/javascripts/components/articles/article_graphs.jsx index a98b15d533..8d0aa14b9d 100644 --- a/app/assets/javascripts/components/articles/article_graphs.jsx +++ b/app/assets/javascripts/components/articles/article_graphs.jsx @@ -61,9 +61,7 @@ const ArticleGraphs = ({ article }) => { setSelectedRadio(event.currentTarget.value); } - function graphId() { - return `vega-graph-${article_id}`; - } + const graphId = `vega-graph-${article_id}`; const dataIncludesWp10 = articleData?.[0]?.wp10; @@ -75,7 +73,7 @@ const ArticleGraphs = ({ article }) => { if (dataIncludesWp10 && selectedRadio === 'wp10_score') { return ( { return ( Date: Thu, 19 Oct 2023 19:37:15 +0100 Subject: [PATCH 5/7] fix: change functions to variables --- .../components/articles/article_graphs.jsx | 63 +++++++++---------- 1 file changed, 30 insertions(+), 33 deletions(-) diff --git a/app/assets/javascripts/components/articles/article_graphs.jsx b/app/assets/javascripts/components/articles/article_graphs.jsx index 8d0aa14b9d..3121498803 100644 --- a/app/assets/javascripts/components/articles/article_graphs.jsx +++ b/app/assets/javascripts/components/articles/article_graphs.jsx @@ -65,23 +65,20 @@ const ArticleGraphs = ({ article }) => { const dataIncludesWp10 = articleData?.[0]?.wp10; - const graph = () => { - if (!articleData) { - return ; - } - - if (dataIncludesWp10 && selectedRadio === 'wp10_score') { - return ( - - ); - } - - return ( + let graph; + if (!articleData) { + graph = ; + } else if (dataIncludesWp10 && selectedRadio === 'wp10_score') { + graph = ( + + ); + } else { + graph = ( { articleData={articleData} /> ); - }; + } - const radioInput = () => { - if (!dataIncludesWp10 || !articleData) { - return null; - } + let radioInput; - return ( + if (!dataIncludesWp10 || !articleData) { + radioInput = null; + } else { + radioInput = (
{
); - }; + } - const editSize = () => { - if (dataIncludesWp10 || !articleData) { - return null; - } + let editSize; + if (dataIncludesWp10 || !articleData) { + editSize = null; + } else { + editSize =

{I18n.t('articles.edit_size')}

; + } - return

{I18n.t('articles.edit_size')}

; - }; const className = `vega-graph ${showGraph ? '' : 'hidden'}`; @@ -139,10 +136,10 @@ const ArticleGraphs = ({ article }) => { {I18n.t('articles.article_development')}
- {radioInput()} - {editSize()} + {radioInput} + {editSize}
- {graph()} + {graph}
); From 22c8aaabe11419d65292bba863160eea4186d0a9 Mon Sep 17 00:00:00 2001 From: Justice Otuya Date: Sat, 21 Oct 2023 15:59:29 +0000 Subject: [PATCH 6/7] fix: remove unecessary codes --- .../components/articles/article_graphs.jsx | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/components/articles/article_graphs.jsx b/app/assets/javascripts/components/articles/article_graphs.jsx index 3121498803..b4b234296e 100644 --- a/app/assets/javascripts/components/articles/article_graphs.jsx +++ b/app/assets/javascripts/components/articles/article_graphs.jsx @@ -88,12 +88,7 @@ const ArticleGraphs = ({ article }) => { ); } - let radioInput; - - if (!dataIncludesWp10 || !articleData) { - radioInput = null; - } else { - radioInput = ( + let radioInput = (
{
); - } - let editSize; - if (dataIncludesWp10 || !articleData) { - editSize = null; - } else { - editSize =

{I18n.t('articles.edit_size')}

; - } + let editSize =

{I18n.t('articles.edit_size')}

; const className = `vega-graph ${showGraph ? '' : 'hidden'}`; From 5bb3143509e94268cb90be5768ef4bb9cf91f789 Mon Sep 17 00:00:00 2001 From: Justice Otuya Date: Wed, 25 Oct 2023 12:49:32 +0100 Subject: [PATCH 7/7] fix: add check for articleData[0].wp10 --- .../javascripts/components/articles/article_graphs.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/components/articles/article_graphs.jsx b/app/assets/javascripts/components/articles/article_graphs.jsx index b4b234296e..eec739ad5c 100644 --- a/app/assets/javascripts/components/articles/article_graphs.jsx +++ b/app/assets/javascripts/components/articles/article_graphs.jsx @@ -88,7 +88,9 @@ const ArticleGraphs = ({ article }) => { ); } - let radioInput = ( + let radioInput; + if (articleData?.[0].wp10) { + radioInput = (
{
); + } else { + radioInput = null; + } - let editSize =

{I18n.t('articles.edit_size')}

; + const editSize =

{I18n.t('articles.edit_size')}

; const className = `vega-graph ${showGraph ? '' : 'hidden'}`;