Unificando listagens de escola

src/components/School.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import toTitleCase from 'utils/toTitleCase';
+import convertKilometerToMeter from 'utils/convertKilometerToMeter';
+import { SchoolContact } from 'components/SchoolContact';
+import STRINGS from 'configs/Strings';
+import findGroupName from 'utils/findGroupName';
+
+export const School = ({school, groupCode, key}) => { console.log(school, groupCode, key); return (
+  <div className="row school-list-item vertical-align" key={key}>
+    <div className="col-xs-12">
+      <h4 style={{margin:0}}>{school.nm_unidade_educacao}</h4>
+      {school.sg_tp_escola != null && <p>{school.sg_tp_escola}</p>}
+      {school.endereco_completo != null && <p>{toTitleCase(school.endereco_completo)}</p>}
+      {groupCode != null && <p>Crianças atualmente matriculadas no {findGroupName(groupCode)}: {school.signed_up}</p>}
+      {school.distance != null && <p>{convertKilometerToMeter(school.distance)} {STRINGS.messages.meters}</p>}
+      {school.telefones && <p>{STRINGS.messages.phone}: {school.telefones[0]}</p>}
+    </div>
+    <div className="col-xs-4">
+      <SchoolContact school={school} />
+    </div>
+  </div>
+)};

src/components/SchoolList.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { DefaultButton } from 'components/DefaultButton';
+import { School } from 'components/School';
+import STRINGS from 'configs/Strings';
+import { Link } from 'react-router-dom';
+
+const shortenedListSize = 5;
+
+export class SchoolList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      displayedListSize: props.shortenList
+        ? Math.min(shortenedListSize, props.schools.length)
+        : props.schools.length,
+    };
+    this.handleSeeMore = this.handleSeeMore.bind(this);
+  }
+
+  handleSeeMore() {
+    this.setState({
+      displayedListSize: this.props.schools.length,
+    });
+  }
+
+  isListShortened() {
+    return this.props.schools.length !== this.state.displayedListSize;
+  }
+
+  render() {
+    return (
+      <div className="school-list">
+        {this.props.schools.slice(0,this.state.displayedListSize).map(
+          (school,i) => <School
+            school={school}
+            groupCode={this.props.groupCode}
+            key={`school_${i}`}
+          />
+        )}
+        {this.isListShortened() ? <div className="row">
+          <Link to="#">
+            <DefaultButton
+              title={STRINGS.actions.see_more}
+              onClick={this.handleSeeMore}
+            />
+          </Link>
+        </div> : null}
+      </div>
+    );
+  }
+};

src/containers/Register/Register.js

@@ -4,7 +4,7 @@ import { BackButton } from "components/BackButton";
 import { Banner } from "components/Banner";
 import { SubBanner } from "components/SubBanner";
 import { ContinueButton } from "components/ContinueButton";
-import { RegistrationList } from "./RegistrationList";
+import { SchoolList } from "components/SchoolList";
 
 export class Register extends React.Component {
   constructor(props) {
@@ -19,6 +19,15 @@ export class Register extends React.Component {
   }
 
   render() {
+    const schools = this.props.location.state.schoolsNearby.map(school => {
+      return {
+        nm_unidade_educacao: school.nm_unidade_educacao,
+        sg_tp_escola: school.sg_tp_escola,
+        endereco_completo: school.endereco_completo,
+        distance: school.distance,
+        telefones: school.telefones,
+      };
+    });
     return (
       <div>
         <BackButton />
@@ -36,7 +45,7 @@ export class Register extends React.Component {
         <Banner
           title={STRINGS.registration_list.title}
         />
-        <RegistrationList schools={this.props.location.state.schoolsNearby} />
+        <SchoolList schools={schools} shortenList={false} />
         <Banner
           title={STRINGS.actions.can_do}
         />

src/containers/Results/Results.js

@@ -31,7 +31,6 @@ export class Results extends React.Component {
             waitListSize: result.results.wait,
           }
         });
-        console.log(this.state.queryResults);
       },
       (error) => {
         this.setState({

src/containers/Results/ResultsLoaded.js

@@ -3,13 +3,21 @@ import PropTypes from 'prop-types';
 import STRINGS from 'configs/Strings';
 import { Banner } from 'components/Banner';
 import findGroupName from 'utils/findGroupName';
-import { SchoolList } from 'containers/Results/SchoolList';
+import { SchoolList } from 'components/SchoolList';
 import { Link } from 'react-router-dom';
 import { DefaultButton } from 'components/DefaultButton';
 import { ContinueButton } from 'components/ContinueButton';
 import { Spacer } from 'components/Spacer';
 
 export const ResultsLoaded = (props) => {
+  const schools = props.schoolsNearby.map(school => {
+      return {
+        nm_unidade_educacao: school.nm_unidade_educacao,
+        endereco_completo: school.endereco_completo,
+        distance: school.distance,
+        signed_up: school[`vagas_cd_serie_${props.groupCode}`],
+      };
+  });
   return (
     <React.Fragment>
       <Banner
@@ -29,9 +37,9 @@ export const ResultsLoaded = (props) => {
         ]}
       />
       {props.schoolsNearby.length ? <SchoolList
-        schools={props.schoolsNearby}
-        groupName={findGroupName(props.groupCode)}
         groupCode={props.groupCode}
+        schools={schools}
+        shortenList={true}
       /> : <Spacer
         classSize="spacer-sm"
       /> }