feat(admin): added the address formatter

apps/admin/src/App.js

@@ -58,7 +58,7 @@ const App = () => (
                 }
                 icon={JobPosting.icon}
                 option={JobPosting.option}
-                show={Organization.show}
+                show={JobPosting.show}
             />,
         ]}
     </Admin>

apps/admin/src/job-posting/List.js

@@ -70,7 +70,7 @@ export const JobPostingList = ({ permissions, ...props }) => {
             bulkActionButtons={false}
             title="Liste des Offres d'Emploi"
         >
-            <Datagrid rowClik="show">
+            <Datagrid rowClick="show">
                 <TextField source="title" label="Titre de l'offre" />
                 <TextField source="employmentType" label="Type de contrat" />
                 <ReferenceField

apps/admin/src/job-posting/Show.js

@@ -1,6 +1,13 @@
 import React from 'react';
-import { Show, SimpleShowLayout, TextField, DateField } from 'react-admin';
+import {
+    Show,
+    SimpleShowLayout,
+    TextField,
+    DateField,
+    UrlField,
+} from 'react-admin';
 import { PropTypes } from 'prop-types';
+import DisplayAddress from '../toolbox/DispayAddress';
 
 const JobPostingTitle = ({ record }) => {
     return <span>{record ? `${record.title}` : ''}</span>;
@@ -15,23 +22,30 @@ export const JobPostingShow = (props) => {
     return (
         <Show title={<JobPostingTitle />} {...props}>
             <SimpleShowLayout>
-                <TextField source="title" label="Filtre par titre" />
+                <TextField source="title" label="titre" />
+                <UrlField source="url" label="URL de l'offre" />
                 <TextField source="employmentType" label="Type de contrat" />
-                <TextField source="skills" label="compétences demandées" />
-                <DateField source="jobStartDate" label="Commence avant" />
-                <DateField source="validThrough" label="Valide jusqu'au" />
                 <TextField
-                    source="hiringOrganizationName"
-                    label="Nom d'entreprise"
+                    source="hiringOrganization.name"
+                    label="Proposé par"
                 />
                 <TextField
-                    source="hiringOrganizationAddressLocality"
-                    label="Ville de l'entreprise"
+                    source="experienceRequirements"
+                    label="Expérience requise"
                 />
+                <TextField source="skills" label="compétences demandées" />
 
-                <TextField
-                    source="hiringOrganizationPostalCode"
-                    label="Code postal de l'entreprise"
+                <DateField
+                    source="jobStartDate"
+                    label="Date de prise de poste"
+                />
+                <DateField source="validThrough" label="Valide jusqu'au" />
+                <DisplayAddress
+                    label="adresse"
+                    streetAddress="hiringOrganization.address.streetAddress"
+                    postalCode="hiringOrganization.address.postalCode"
+                    addressLocality="hiringOrganization.address.addressLocality"
+                    addressCountry="hiringOrganization.address.addressCountry"
                 />
             </SimpleShowLayout>
         </Show>

apps/admin/src/organization/List.js

@@ -61,7 +61,7 @@ export const OrganizationList = ({ permissions, ...props }) => {
             bulkActionButtons={false}
             title="Liste des Entreprises"
         >
-            <Datagrid rowClik="show">
+            <Datagrid rowClick="show">
                 <OrganizationLogo label="Logo" />
                 <TextField source="name" label="Nom de l'entreprise" />
                 <OrganizationAddress label="Adresse" />

apps/admin/src/organization/Show.js

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Show, SimpleShowLayout, TextField } from 'react-admin';
+import { Show, SimpleShowLayout, TextField, UrlField } from 'react-admin';
 import { PropTypes } from 'prop-types';
+import DisplayAddress from '../toolbox/DispayAddress';
 
 // Todo :
 const OrganizationName = ({ record }) => {
@@ -12,29 +13,6 @@ OrganizationName.propTypes = {
     }),
 };
 
-const DisplayAddress = ({ record }) => {
-    return record && record.address ? (
-        <p>
-            {record.address.streetAddress} <br />
-            {record.address.postalCode} {record.address.addressLocality}{' '}
-            {record.address.addressCountry}
-        </p>
-    ) : (
-        `Pas d'addresse pour "${record.name}"`
-    );
-};
-DisplayAddress.propTypes = {
-    record: PropTypes.shape({
-        name: PropTypes.string.isRequired,
-        address: PropTypes.shape({
-            addressCountry: PropTypes.string,
-            addressLocality: PropTypes.string,
-            postalCode: PropTypes.string,
-            streetAddress: PropTypes.string,
-        }),
-    }),
-};
-
 const OrganizationLogo = ({ record }) => {
     return record && record.image ? (
         <img src={record.image} height="50" alt={record.name} />
@@ -55,23 +33,17 @@ export const OrganizationShow = (props) => {
         <Show title={<OrganizationName />} {...props}>
             <SimpleShowLayout>
                 <OrganizationLogo label="logo" />
-                <TextField label="Nom de l'entreprise" source="name" />
+                <TextField addlabel="false" source="name" />
                 <TextField label="Email principal" source="email" />
-                <TextField label="Url du site web" source="url" />
+                <UrlField label="Url du site web" source="url" />
                 <TextField label="Présentation" source="description" />
-                {<DisplayAddress />}
 
-                <TextField
-                    label="Nom du contact des offres d'emploi"
-                    source="contact_name"
-                />
-                <TextField
-                    label="Email du contact des offres d'emploi"
-                    source="contact_email"
-                />
-                <TextField
-                    label="Téléphone du contact des offres d'emploi"
-                    source="contact_phone"
+                <DisplayAddress
+                    label="adresse"
+                    streetAddress="address.streetAddress"
+                    postalCode="address.postalCode"
+                    addressLocality="address.addressLocality"
+                    addressCountry="address.addressCountry"
                 />
             </SimpleShowLayout>
         </Show>

apps/admin/src/toolbox/DispayAddress.js

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import pure from 'recompose/pure';
+import Typography from '@material-ui/core/Typography';
+import PropTypes from 'prop-types';
+import get from 'lodash/get';
+
+const AddressField = ({
+    className,
+    record = {},
+    streetAddress,
+    postalCode,
+    addressLocality,
+    addressCountry,
+    ...rest
+}) => {
+    const street = get(record, streetAddress);
+    const postal = get(record, postalCode);
+    const locality = get(record, addressLocality);
+    const country = get(record, addressCountry);
+
+    return (
+        <Typography
+            component="span"
+            variant="body2"
+            className={className}
+            {...rest}
+        >
+            {street} <br />
+            {postal} {locality} {country}
+        </Typography>
+    );
+};
+
+AddressField.propTypes = {
+    className: PropTypes.string.isRequired,
+    addressCountry: PropTypes.string,
+    addressLocality: PropTypes.string,
+    postalCode: PropTypes.string,
+    streetAddress: PropTypes.string,
+    record: PropTypes.object,
+};
+
+// wat? TypeScript looses the displayName if we don't set it explicitly
+AddressField.displayName = 'AddressField';
+
+const EnhancedAddressField = pure(AddressField);
+
+EnhancedAddressField.defaultProps = {
+    addLabel: true,
+};
+
+EnhancedAddressField.propTypes = {
+    ...Typography.propTypes,
+};
+
+EnhancedAddressField.displayName = 'EnhancedAddressField';
+
+export default EnhancedAddressField;