How to use the admin-on-rest.translate function in admin-on-rest

export const CommandList = props => (
    } sort={{ field: 'date', order: 'DESC' }} perPage={25}>
        
            
            
            
            
            
            
            
            
        
    
);

const CommandTitle = translate(({ record, translate }) =&gt; console.log({record}) || <span>{translate('resources.Command.name', { smart_count: 1 })} #{record.reference}</span>);

export const CommandEdit = translate(({ translate, ...rest }) =&gt; (
    } {...rest}&gt;
        
            
            
            
                 `${choice.firstName} ${choice.lastName}`} /&gt;

import React from 'react';
import { translate, SelectArrayInput } from 'admin-on-rest';

import segments from '../segments/data';

const SegmentsInput = ({ translate, ...rest }) => (
     ({ id: segment.id, name: translate(segment.name) }))} />
);

const TranslatedSegmentsInput = translate(SegmentsInput);

TranslatedSegmentsInput.defaultProps = {
    addField: true,
    source: 'groups',
};

export default TranslatedSegmentsInput;

const styles = {
    main: { display: 'flex', flexWrap: 'wrap' },
    chip: { margin: 4 },
};

const SegmentsField = ({ record, translate }) => (
    <span style="{styles.main}">
        {record.groups.map(segment =&gt; (
            
                {translate(segments.find(s =&gt; s.id === segment).name)}
            
        ))}
    </span>
);

const TranslatedSegmentsField = translate(SegmentsField);

TranslatedSegmentsField.defaultProps = {
    addLabel: true,
    source: 'groups',
};

export default TranslatedSegmentsField;

)
        );
    }
);

const cardStyle = {
    width: 300,
    minHeight: 300,
    margin: '0.5em',
    display: 'inline-block',
    verticalAlign: 'top',
};

const CommentGrid = translate(({ ids, data, basePath, translate }) => (
    <div style="{{">
        {ids.map(id =&gt; (
            
                }
                    subtitle={
                        
                    }
                    avatar={} /&gt;}
                /&gt;
                
                    
                
                
                    {translate('comment.list.about')}&nbsp;
                    </div>

import { Card, CardActions, CardHeader, CardText } from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';
import { Toolbar, ToolbarGroup } from 'material-ui/Toolbar';
import ChevronLeft from 'material-ui/svg-icons/navigation/chevron-left';
import ChevronRight from 'material-ui/svg-icons/navigation/chevron-right';
export CommentIcon from 'material-ui/svg-icons/communication/chat-bubble';

const CommentFilter = ({ ...props }) => (
    
);

const CommentPagination = translate(
    ({ page, perPage, total, setPage, translate }) => {
        const nbPages = Math.ceil(total / perPage) || 1;
        return (
            nbPages > 1 && (
                
                    
                        {page > 1 && (
                            }
                                onClick={() => setPage(page - 1)}
                            />
                        )}
                        {page !== nbPages && (

export const CommandList = (props) => (
    } sort={{ field: 'date', order: 'DESC' }} perPage={25}>
        
            
            
            
            
            
            
            
            
        
    
);

const CommandTitle = translate(({ record, translate }) =&gt; <span>{translate('resources.commands.name', { smart_count: 1 })} #{record.reference}</span>);

export const CommandEdit = translate(({ translate, ...rest }) =&gt; (
    } {...rest}&gt;
        
            
            
            
                 `${choice.first_name} ${choice.last_name}`} /&gt;
            
            
            
            <div style="{{"></div>

import ProductRefField from '../products/ProductRefField';
import LinkToRelatedProducts from './LinkToRelatedProducts';

export const CategoryIcon = Icon;

export const CategoryList = (props) => (
    
        
            
            
            
        
    
);

const CategoryTitle = translate(({ record, translate }) =&gt; <span>{translate('resources.categories.name', { smart_count: 1 })} "{record.name}"</span>);

export const CategoryEdit = (props) =&gt; (
    } {...props}&gt;

);

const VisitorDeleteTitle = translate(({ record, translate }) =&gt; <span>
    {translate('resources.customers.page.delete')}&nbsp;
    {record &amp;&amp; <img alt="" width="25" src="{`${record.avatar}?size=25x25`}">}
    {record &amp;&amp; `${record.first_name} ${record.last_name}`}
</span>);

export const VisitorDelete = (props) =&gt; } /&gt;;

import React from 'react';
import { translate, ReferenceArrayField, SingleFieldList } from 'admin-on-rest';

import Chip from 'material-ui/Chip';

const NameField = translate(({ translate: t, source, record = {} }) => (
    {t(`resources.Segment.data.${record[source]}`)}
));

const SegmentReferenceField = props => (
    
        
            
        
    
);

SegmentReferenceField.defaultProps = {
    label: 'resources.Customer.fields.groups',
    source: 'groupsIds',
    addLabel: true,
};

TabbedForm,
    TextField,
    TextInput,
} from 'admin-on-rest';
import Icon from 'material-ui/svg-icons/image/collections';
import Chip from 'material-ui/Chip';
import RichTextInput from 'aor-rich-text-input';

import CustomerReferenceField from '../visitors/CustomerReferenceField';
import StarRatingField from '../reviews/StarRatingField';
import GridList from './GridList';
import Poster from './Poster';

export const ProductIcon = Icon;

const QuickFilter = translate(({ label, translate }) => {translate(label)});

export const ProductFilter = props => (
    
);

export const ProductList = props => (