Creates SchoolContact component

It is intended two remove duplicate code between the `RegistrationList` and the `SchoolList` components, as requested by prefeiturasp#11. [Here](http://filadacreche.sme.prefeitura.sp.gov.br/#/resultados/28/-46.793739000000016/-23.6862114/R.%20Feiti%C3%A7o%20da%20Vila,%20399%20-%20Chacara%20Santa%20Maria,%20S%C3%A3o%20Paulo%20-%20SP,%2005879-000,%20Brasil) is an example of SchoolList being used. If you click "Cadastrar na fila" at the bottom part of the page, you will reach a page where RegistrationList is used. Neither of those should break after this change, they should look exactly the same as before.
victorsenam · Aug 25, 2018 · d733308 · d733308
1 parent ed66791
commit d733308
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 37 deletions.
diff --git a/src/components/SchoolContact.js b/src/components/SchoolContact.js
@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import STRINGS from 'configs/Strings';
+import GLOBALS from 'configs/MainConfigs';
+
+import fontawesome from '@fortawesome/fontawesome'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
+import faPhone from '@fortawesome/fontawesome-free-solid/faPhone'
+import faMapMarkerAlt from '@fortawesome/fontawesome-free-solid/faMapMarkerAlt'
+
+fontawesome.library.add(faPhone, faMapMarkerAlt)
+
+const SchoolContact = ({school}) => (
+  <React.Fragment>
+    {school.telefones && <div className="icon-div">
+      <a href={"tel:" + school.telefones[0]}>
+        <p className="text-center"><FontAwesomeIcon icon="phone" size="lg" className="icons icons-lg" /><br />{STRINGS.actions.call}</p>
+      </a>
+    </div>}
+    <div className="icons-div">
+      <a href={"https://www.google.com/maps/search/?api=1&query=" + school.endereco_completo + " " + GLOBALS.city_state} target="_blank">
+        <p className="text-center"><FontAwesomeIcon icon="map-marker-alt" size="lg" className="icons icons-lg" /><br />{STRINGS.actions.see_on_map}</p>
+      </a>
+    </div>
+  </React.Fragment>
+);
+
+SchoolContact.propTypes = {
+  school: PropTypes.object
+};
+
+export { SchoolContact };
diff --git a/src/containers/Register/RegistrationList.js b/src/containers/Register/RegistrationList.js
@@ -1,14 +1,8 @@
 import React from 'react';
-import STRINGS from 'configs/Strings';
-import GLOBALS from 'configs/MainConfigs';
 import convertKilometerToMeter from 'utils/convertKilometerToMeter';
 import toTitleCase from 'utils/toTitleCase';
-import fontawesome from '@fortawesome/fontawesome'
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
-import faPhone from '@fortawesome/fontawesome-free-solid/faPhone'
-import faMapMarkerAlt from '@fortawesome/fontawesome-free-solid/faMapMarkerAlt'
-
-fontawesome.library.add(faPhone, faMapMarkerAlt)
+import { SchoolContact } from "components/SchoolContact";
+import STRINGS from 'configs/Strings';
 
 // FIXME: this will probably require another request to the api with all schools in radius, not just those that have slots
 export class RegistrationList extends React.Component {
@@ -25,16 +19,7 @@ export class RegistrationList extends React.Component {
             {school.telefones && <p>{STRINGS.messages.phone}: {school.telefones[0]}</p>}
           </div>
           <div className="col-xs-4">
-            {school.telefones && <div className="icon-div">
-              <a href={"tel:" + school.telefones[0]}>
-                <p className="text-center"><FontAwesomeIcon icon="phone" size="lg" className="icons icons-lg" /><br />{STRINGS.actions.call}</p>
-              </a>
-            </div>}
-            <div className="icons-div">
-              <a href={"https://www.google.com/maps/search/?api=1&query=" + school.endereco_completo + " " + GLOBALS.city_state} target="_blank">
-                <p className="text-center"><FontAwesomeIcon icon="map-marker-alt" size="lg" className="icons icons-lg" /><br />{STRINGS.actions.see_on_map}</p>
-              </a>
-            </div>
+            <SchoolContact school={school} />
           </div>
         </div>
       );

diff --git a/src/containers/Results/SchoolList.js b/src/containers/Results/SchoolList.js
@@ -1,17 +1,10 @@
 import React from 'react'
 import { DefaultButton } from "components/DefaultButton";
 import { BrowserRouter as Link } from 'react-router-dom';
-import STRINGS from 'configs/Strings';
-import GLOBALS from 'configs/MainConfigs';
 import convertKilometerToMeter from 'utils/convertKilometerToMeter';
 import toTitleCase from 'utils/toTitleCase';
-
-import fontawesome from '@fortawesome/fontawesome'
-import FontAwesomeIcon from '@fortawesome/react-fontawesome'
-import faPhone from '@fortawesome/fontawesome-free-solid/faPhone'
-import faMapMarkerAlt from '@fortawesome/fontawesome-free-solid/faMapMarkerAlt'
-
-fontawesome.library.add(faPhone, faMapMarkerAlt)
+import { SchoolContact } from "components/SchoolContact";
+import STRINGS from 'configs/Strings';
 
 export class SchoolList extends React.Component {
   constructor(props) {
@@ -34,16 +27,7 @@ export class SchoolList extends React.Component {
             <p>{convertKilometerToMeter(school.distance)} {STRINGS.messages.meters}</p>
           </div>
           <div className="col-xs-4">
-            {school.telefones && <div className="icon-div">
-              <a href={"tel:" + school.telefones[0]}>
-                <p className="text-center"><FontAwesomeIcon icon="phone" size="lg" className="icons icons-lg" /><br />{STRINGS.actions.call}</p>
-              </a>
-            </div>}
-            <div className="icons-div">
-              <a href={"https://www.google.com/maps/search/?api=1&query=" + school.endereco_completo + " " + GLOBALS.city_state} target="_blank">
-                <p className="text-center"><FontAwesomeIcon icon="map-marker-alt" size="lg" className="icons icons-lg" /><br />{STRINGS.actions.see_on_map}</p>
-              </a>
-            </div>
+            <SchoolContact school={school} />
           </div>
         </div>
       );