components refactoring (#93)

* components refactoring * remove useless rerender in CampaignPortal * rework interviewer condition * review (rename state and rework functions) * bump version
InseeFr · Jan 5, 2024 · e46e441 · e46e441
1 parent ae314b3
commit e46e441
Show file tree

Hide file tree

Showing 19 changed files with 151 additions and 732 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sonor",
-  "version": "0.5.24",
+  "version": "0.5.25",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",

diff --git a/src/components/App/App.test.jsx b/src/components/App/App.test.jsx
@@ -72,8 +72,9 @@ const updatePreferences = jest.fn((newPrefs, cb) => {
 
 DataFormatter.mockImplementation(() => ({
   getPreferences: (c) => (c(preferences)),
+  getAllCampaigns: (c) => (c(mainScreenData)),
   getQuestionnaireId: (id, c) => (c({ questionnaireId: 'QXT55' })),
-  getDataForMainScreen: (a, c) => {
+  getFormattedCampaignsForMainScreen: (a, c) => {
     if (c) { c(mainScreenData); }
     return Promise.resolve(mainScreenData);
   },

diff --git a/src/components/CampaignPortal/CampaignPortal.jsx b/src/components/CampaignPortal/CampaignPortal.jsx
@@ -15,7 +15,7 @@ import D from '../../i18n';
 import './CampaignPortal.css';
 
 function CampaignPortal({
-  location, dataRetreiver,
+  location, dataRetreiver, campaigns
 }) {
   const initialData = {};
   initialData.interviewers = [];
@@ -39,17 +39,14 @@ function CampaignPortal({
 
   useEffect(() => {
     if (!survey && location.survey) {
-      dataRetreiver.getDataForMainScreen(null, (campaignsData) => {
+      dataRetreiver.getFormattedCampaignsForMainScreen(null, (campaignsData) => {
         const newSurvey = campaignsData.find((s) => s.id === location.survey.id);
-        newSurvey.allSurveys = campaignsData;
-        setSurvey(newSurvey);
-        setSurveyInfo(campaignsData.find((s) => s.id === location.survey.id));
+        setSurvey({...newSurvey, allSurveys : campaignsData});
+        setSurveyInfo(newSurvey);
         setRedirect(null);
-      });
+      }, campaigns);
     }
-  }, [redirect, dataRetreiver, location, survey]);
 
-  useEffect(() => {
     if (survey) {
       setIsLoading(true);
       dataRetreiver.getDataForCampaignPortal(!survey || survey.id, (res) => {
@@ -58,7 +55,7 @@ function CampaignPortal({
         setIsLoading(false);
       });
     }
-  }, [redirect, dataRetreiver, location, survey]);
+  }, [survey]);
 
   function handleSort(property, asc) {
     const [sortedData, newSort] = Utils.handleSort(property, data, sort, 'campaignPortal', asc);

diff --git a/src/components/Close/CloseSUTable.jsx b/src/components/Close/CloseSUTable.jsx
@@ -27,7 +27,7 @@ function makeTableForExport(data) {
   return header.concat(data.map((line) => ([
     line.campaign,
     line.id,
-    `${line.interviewer.interviewerLastName} ${line.interviewer.interviewerFirstName}`,
+    `${line.interviewer?.interviewerLastName ?? ""} ${line.interviewer?.interviewerFirstName ?? ""}`,
     line.ssech,
     line.location ? line.location.substring(0, 2) : null,
     line.city,

diff --git a/src/components/CollectionTable/CollectionTable.jsx b/src/components/CollectionTable/CollectionTable.jsx
@@ -54,7 +54,7 @@ class CollectionTable extends React.Component {
 
   async refreshData() {
     this.setState({ loading: true });
-    const { dataRetreiver, location } = this.props;
+    const { dataRetreiver, location, campaigns } = this.props;
     const { survey, interviewer } = location;
     const { date } = this.state;
     const dateToUse = date || new Date().toISOString().slice(0, 10);
@@ -64,7 +64,7 @@ class CollectionTable extends React.Component {
     if (interviewer) {
       surveyToUse = interviewer;
     } else if (modeToUse !== C.BY_INTERVIEWER_ONE_SURVEY && modeToUse !== C.BY_SITE) {
-      surveyToUse = await dataRetreiver.getDataForMainScreen();
+      surveyToUse = await dataRetreiver.getFormattedCampaignsForMainScreen(null, null, campaigns);
     } else {
       surveyToUse = survey;
     }

diff --git a/src/components/CollectionTable/CollectionTable.test.jsx b/src/components/CollectionTable/CollectionTable.test.jsx
@@ -58,7 +58,7 @@ const TestingRouter = ({ ComponentWithRedirection }) => (
   </Router>
 );
 
-const mockGetDataForMainScreen = jest.fn(() => (Promise.resolve(mainScreenData)));
+const mockGetFormattedCampaignsForMainScreen = jest.fn(() => (mainScreenData));
 
 const mockGetDataForCollectionTable = jest.fn(
   (survey, date, pagination, mode, cb) => {
@@ -82,7 +82,7 @@ const mockGetDataForCollectionTable = jest.fn(
 
 const mockDataFormatter = DataFormatter.mockImplementation(() => ({
   getDataForCollectionTable: mockGetDataForCollectionTable,
-  getDataForMainScreen: mockGetDataForMainScreen,
+  getFormattedCampaignsForMainScreen: mockGetFormattedCampaignsForMainScreen
 }));
 
 const mockDataRetreiver = new DataFormatter();
@@ -314,7 +314,7 @@ it('Reloading the page with no survey set (F5) by survey (Site > Progress)', asy
   await waitForElement(() => screen.getByTestId('pagination-nav'));
 
   // Should call getDataForMainScreen and display the page anyway
-  expect(mockGetDataForMainScreen).toHaveBeenCalled();
+  expect(mockGetFormattedCampaignsForMainScreen).toHaveBeenCalled();
   expect(component).toMatchSnapshot();
 });
 

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -17,7 +17,7 @@ import { version } from '../../../package.json';
 import './Header.css';
 
 function Header({
-  user, showPreferences, dataRetreiver,
+  user, showPreferences, dataRetreiver, campaigns, preferences
 }) {
   const [showFollowDropdown, setShowFollowDropdown] = useState(false);
   const [showReviewDropdown, setShowReviewDropdown] = useState(false);
@@ -160,6 +160,8 @@ function Header({
         title={modalTitle}
         linkTo={modalLink}
         interviewerMode={modalInterviewerMode}
+        campaigns={campaigns}
+        preferences={preferences}
       />
     </header>
   );

diff --git a/src/components/Header/Header.test.jsx b/src/components/Header/Header.test.jsx
@@ -53,7 +53,7 @@ DataFormatter.mockImplementation(() => ({
   getPreferences: (c) => (c(preferences)),
   getInterviewers: (c) => (c(interviewers)),
   getQuestionnaireId: (id, c) => (c({ questionnaireId: 'QXT55' })),
-  getDataForMainScreen: (a, c) => {
+  getFormattedCampaignsForMainScreen: (a, c, mainScreenData) => {
     if (c) { c(mainScreenData); }
     return Promise.resolve(mainScreenData);
   },
@@ -97,7 +97,7 @@ jest.mock('react-router-dom', () => ({
 
 const TestingRouter = () => (
   <Router history={history}>
-    <Header user={userData} showPreferences={() => { mockShowPreferences(); }} dataRetreiver={dataRetreiver} />
+    <Header user={userData} showPreferences={() => { mockShowPreferences(); }} dataRetreiver={dataRetreiver} campaigns={mainScreenData} preferences={preferences}/>
     <Switch>
       <Route
         path="*"

diff --git a/src/components/MainScreen/MainScreen.jsx b/src/components/MainScreen/MainScreen.jsx
@@ -33,16 +33,16 @@ class MainScreen extends React.Component {
   }
 
   fetchData() {
-    const { preferences, dataRetreiver } = this.props;
+    const { preferences, dataRetreiver, campaigns } = this.props;
     this.setState({ isLoading: true });
-    dataRetreiver.getDataForMainScreen(null, (data) => {
+    dataRetreiver.getFormattedCampaignsForMainScreen(null, (data) => {
       this.setState({
         isLoading: false,
         data: data.filter(
           (survey) => (preferences[survey.id] && preferences[survey.id].preference),
         ),
       }, () => { this.handleSort('label', true); });
-    });
+    }, campaigns );
   }
 
   handlePageChange(pagination) {

diff --git a/src/components/MainScreen/MainScreen.test.jsx b/src/components/MainScreen/MainScreen.test.jsx
@@ -51,7 +51,7 @@ const TestingRouter = ({ ComponentWithRedirection }) => (
 );
 
 DataFormatter.mockImplementation(() => ({
-  getDataForMainScreen: (a, c) => (c(data)),
+  getFormattedCampaignsForMainScreen: (a, c) => (c(data)),
 }));
 
 const mockDataRetreiver = new DataFormatter();

diff --git a/src/components/ModalSelection/ModalSelection.jsx b/src/components/ModalSelection/ModalSelection.jsx
@@ -6,28 +6,44 @@ import SurveySelector from '../SurveySelector/SurveySelector';
 import InterviewerSelector from '../InterviewerSelector/InterviewerSelector';
 
 function ModalSelection({
-  linkTo, title, show, setShow, dataRetreiver, interviewerMode,
+  linkTo, title, show, setShow, dataRetreiver, interviewerMode, campaigns = [], preferences
 }) {
   const [redirect, setRedirect] = useState(null);
   const [surveys, setSurveys] = useState(null);
   const [interviewers, setInterviewers] = useState(null);
+  const [campaignsWithUpdatedPreferences, setCampaignsWithUpdatedPreferences] = useState(campaigns);
+
+  const updateCampaignsWithPreferences = () => {
+    return campaigns.map((campaign) => {
+      const associatedPreference = Object.entries(preferences).find((preference) => preference[0] === campaign.id)
+
+      if(associatedPreference){
+        campaign.preference =  associatedPreference[1].preference 
+      }
+
+      return campaign;
+    }) 
+  }
 
   const updateSurveys = useCallback(() => {
-    dataRetreiver.getDataForMainScreen(null, (data) => {
+    dataRetreiver.getFormattedCampaignsForMainScreen(null, (data) => {
       setSurveys({
         allSurveys: data.filter(
           (survey) => survey.preference,
         ),
       });
-    });
-  }, [dataRetreiver]);
+    }, campaignsWithUpdatedPreferences);
+  }, [dataRetreiver, campaignsWithUpdatedPreferences]);
 
+ useEffect(() => {
+   setCampaignsWithUpdatedPreferences(updateCampaignsWithPreferences())
+  }, [preferences]);
+
   const updateInterviewers = useCallback(() => {
     dataRetreiver.getInterviewers((data) => {
       setInterviewers({ allInterviewers: data });
     });
-  }, [dataRetreiver]);
-
+  }, [dataRetreiver, campaignsWithUpdatedPreferences]);
   useEffect(() => {
     if (interviewerMode) {
       updateInterviewers();

diff --git a/src/components/MonitoringTable/MonitoringTable.jsx b/src/components/MonitoringTable/MonitoringTable.jsx
@@ -53,7 +53,7 @@ class MonitoringTable extends React.Component {
 
   async refreshData() {
     this.setState({ loading: true });
-    const { dataRetreiver, location } = this.props;
+    const { dataRetreiver, location, campaigns } = this.props;
     const { survey, interviewer } = location;
     const { date } = this.state;
     const dateToUse = date || new Date().toISOString().slice(0, 10);
@@ -63,7 +63,7 @@ class MonitoringTable extends React.Component {
     if (interviewer) {
       surveyToUse = interviewer;
     } else if (modeToUse !== C.BY_INTERVIEWER_ONE_SURVEY && modeToUse !== C.BY_SITE) {
-      surveyToUse = await dataRetreiver.getDataForMainScreen();
+      surveyToUse = await dataRetreiver.getFormattedCampaignsForMainScreen(null,null, campaigns);
     } else {
       surveyToUse = survey;
     }
@@ -99,7 +99,7 @@ class MonitoringTable extends React.Component {
               this.handleSort(firstColumnSortAttribute, true);
             });
           }
-        },
+        }, campaigns
       );
     } else {
       this.setState({ redirect: '/' });

diff --git a/src/components/MonitoringTable/MonitoringTable.test.jsx b/src/components/MonitoringTable/MonitoringTable.test.jsx
@@ -86,7 +86,7 @@ const mockGetDataForMonitoringTable = jest.fn(
 
 const mockDataFormatter = DataFormatter.mockImplementation(() => ({
   getDataForMonitoringTable: mockGetDataForMonitoringTable,
-  getDataForMainScreen: mockGetDataForMainScreen,
+  getFormattedCampaignsForMainScreen: mockGetDataForMainScreen,
 }));
 
 const mockDataRetreiver = new DataFormatter();
@@ -203,7 +203,7 @@ it('Select another date', async () => {
 
   const component = render(
     <Router history={history}>
-      <MonitoringTable location={{ survey, pathname }} dataRetreiver={mockDataRetreiver} />
+      <MonitoringTable location={{ survey, pathname }} dataRetreiver={mockDataRetreiver} campaigns={mainScreenData} />
     </Router>,
   );
 
@@ -216,6 +216,7 @@ it('Select another date', async () => {
     expect.anything(),
     expect.anything(),
     expect.anything(),
+    mainScreenData
   );
 
   // And the page should render correctly
@@ -228,13 +229,13 @@ it('Component did update', () => {
 
   const { container } = render(
     <Router history={history}>
-      <MonitoringTable location={{ survey, pathname }} dataRetreiver={mockDataRetreiver} />
+      <MonitoringTable location={{ survey, pathname }} dataRetreiver={mockDataRetreiver} campaigns={mainScreenData} />
     </Router>,
   );
 
   render(
     <Router history={history}>
-      <MonitoringTable location={{ survey, pathname: '/follow/sites/simpsons2020x00' }} dataRetreiver={mockDataRetreiver} />
+      <MonitoringTable location={{ survey, pathname: '/follow/sites/simpsons2020x00' }} dataRetreiver={mockDataRetreiver} campaigns={mainScreenData}/>
     </Router>,
     { container },
   );
@@ -246,6 +247,7 @@ it('Component did update', () => {
     expect.anything(),
     C.BY_SITE,
     expect.anything(),
+    mainScreenData
   );
 })
 

diff --git a/src/components/Review/Review.jsx b/src/components/Review/Review.jsx
@@ -13,7 +13,7 @@ import Utils from "../../utils/Utils";
 import D from "../../i18n";
 import "./Review.css";
 
-function Review({ location, dataRetreiver, match }) {
+function Review({ location, dataRetreiver, match, campaigns }) {
   const { survey } = location;
   const { id } = match.params;
   const [data, setData] = useState([]);
@@ -29,7 +29,7 @@ function Review({ location, dataRetreiver, match }) {
       setData(res);
       setRedirect(null);
       setIsLoading(false);
-    });
+    }, campaigns);
   }, [dataRetreiver, survey]);
 
   useEffect(() => {

diff --git a/src/components/View/View.jsx b/src/components/View/View.jsx
@@ -27,20 +27,29 @@ class View extends React.Component {
       preferences: {},
       redirect: null,
       loadingPreferences: true,
+      campaigns: []
     };
     this.dataRetreiver = new DataFormatter(props.keycloak);
   }
 
   componentDidMount() {
     this.componentIsMounted = true;
-    this.loadPreferences();
+    this.getAllCampaignsData();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if( !this.state.campaigns.every((element) => prevState.campaigns.includes(element)) 
+        || !prevState.campaigns.every((element) => this.state.campaigns.includes(element)) 
+      ){
+      this.loadPreferences();
+    }
   }
 
   loadPreferences() {
     this.setState({ loadingPreferences: true });
     this.dataRetreiver.getPreferences((preferences) => {
       this.setState({ preferences, loadingPreferences: false, redirect: <Redirect to="/" /> });
-    });
+    }, this.state.campaigns);
   }
 
   updatePreferences(newPreferences) {
@@ -62,9 +71,15 @@ class View extends React.Component {
     this.setState({ showPreferences: false });
   }
 
+  getAllCampaignsData() {
+    this.dataRetreiver.getAllCampaigns((data) => {
+      this.setState({campaigns: data ?? []});
+    })
+  }
+
   render() {
     const {
-      showPreferences, preferences, redirect, loadingPreferences,
+      showPreferences, preferences, redirect, loadingPreferences, campaigns
     } = this.state;
     const { userData } = this.props;
     return (
@@ -78,19 +93,21 @@ class View extends React.Component {
               showPreferences={() => {
                 this.showPreferences();
               }}
+              campaigns={campaigns}
+              preferences={preferences}
             />
             <Switch>
-              <Route path="/review/:id?" component={(routeProps) => <Review dataRetreiver={this.dataRetreiver} {...routeProps} />} />
+              <Route path="/review/:id?" component={(routeProps) => <Review dataRetreiver={this.dataRetreiver} {...routeProps} campaigns={campaigns} />} />
               <Route path="/followUp" component={(routeProps) => <Remind dataRetreiver={this.dataRetreiver} {...routeProps} />} />
-              <Route path="/follow" component={(routeProps) => <MonitoringTable dataRetreiver={this.dataRetreiver} {...routeProps} />} />
-              <Route path="/collection" component={(routeProps) => <CollectionTable dataRetreiver={this.dataRetreiver} {...routeProps} />} />
+              <Route path="/follow" component={(routeProps) => <MonitoringTable dataRetreiver={this.dataRetreiver} {...routeProps} campaigns={campaigns} />} />
+              <Route path="/collection" component={(routeProps) => <CollectionTable dataRetreiver={this.dataRetreiver} {...routeProps} campaigns={campaigns} />} />
               <Route path="/provisionalstatus" component={(routeProps) => <ProvisionalStatusTable dataRetreiver={this.dataRetreiver} {...routeProps} />} />
               <Route path="/terminated/:id" component={(routeProps) => <Terminated dataRetreiver={this.dataRetreiver} {...routeProps} />} />
               <Route path="/listSU/:id" component={(routeProps) => <ListSU dataRetreiver={this.dataRetreiver} {...routeProps} />} />
-              <Route path="/portal/:id" component={(routeProps) => <CampaignPortal dataRetreiver={this.dataRetreiver} {...routeProps} />} />
+              <Route path="/portal/:id" component={(routeProps) => <CampaignPortal dataRetreiver={this.dataRetreiver} {...routeProps} campaigns={campaigns}/>} />
               <Route path="/notifications" component={(routeProps) => <Notifications dataRetreiver={this.dataRetreiver} {...routeProps} user={userData} />} />
               <Route path="/close" component={(routeProps) => <Close dataRetreiver={this.dataRetreiver} {...routeProps} />} />
-              <Route path="/" component={() => <MainScreen preferences={preferences} loadingPreferences={loadingPreferences} dataRetreiver={this.dataRetreiver} />} />
+              <Route path="/" component={() => <MainScreen preferences={preferences} loadingPreferences={loadingPreferences} dataRetreiver={this.dataRetreiver} campaigns={campaigns} />} />
             </Switch>
           </div>
         </Router>