Des interfaces sur mesure avec le CMS Contentful –épisode 2 : Réaliser sa propre UI Extension Contentful

npm install styled-components

import styled from 'styled-components';

export const Container = styled.div`
 display : flex;
 flex-direction : column; 

 & label {
   margin : 10px 0;
   line-height : 15px;
   font-size:13px;
   font-weight : 400;
 }

 & textarea{
   min-height : 100px;
 }
`;

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Container } from './styled';
import { updateMessage } from '../../actions/index';

const EditMessage = ({ storedMessage }) => {
   return (
       <Container>
           <label>Update Message</label>
           <textarea type={'text'}  defaultValue={storedMessage || ''} />
       </Container>
   );
};

EditMessage.propTypes = {
   storedMessage: PropTypes.string
};

const mapStateToProps = ({ fieldValue }) => ({
   storedMessage: fieldValue.message || null
});

export default connect(mapStateToProps)(EditMessage);

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Container } from './styled';
import { updateMessage } from '../../actions/index';

const EditMessage = ({ dispatch, storedMessage }) => {
   return (
       <Container>
           <label>Update Message</label>
           <textarea type={'text'}
               defaultValue={storedMessage || ''}
               onChange={e => {
                   dispatch(updateMessage(e.target.value));
               }}/>
       </Container>
   );
};

EditMessage.propTypes = {
   storedMessage: PropTypes.string
};

const mapStateToProps = ({ fieldValue }) => ({
   storedMessage: fieldValue.message || null
});

export default connect(mapStateToProps)(EditMessage);

export const updateMessage = value => ({
   type: 'UPDATE_MESSAGE',
   payload: {
       value: value
   }
});

export * from './fieldValue';

import { combineReducers } from 'redux';
import fieldValue from './fieldValue';

export default combineReducers({
   fieldValue
});

const fieldValue = (state = [], action) => {
   switch (action.type) {

    case 'UPDATE_MESSAGE' :
        return {
            ...state,
            message: action.payload.value
        };
  
    default:
        return state;
    }
  };

export default fieldValue;

import React  from 'react';
import { connect } from 'react-redux';
import EditMessage from './components/EditMessage';

const App = ({ sdk, fieldValue }) => {
   return (
       <div>
           <h1>Hello</h1>
           <EditMessage/>
       </div>
   );
};

const mapStateToProps = ({ fieldValue }) => ({
   fieldValue: fieldValue,
});

export default connect(mapStateToProps)(App);

import React  from 'react';
import { connect } from 'react-redux';
import EditMessage from './components/EditMessage';

const App = ({ sdk, fieldValue }) => {
   return (
       <div>
           <h1>Hello</h1>
           <EditMessage/>
       </div>
   );
};

const mapStateToProps = ({ fieldValue }) => ({
   fieldValue: fieldValue,
});

export default connect(mapStateToProps)(App);

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import isEqual from 'lodash/isEqual';
import { initFieldValue } from '../actions';
import EditMessage from './components/EditMessage';

const App = ({ fieldValue, sdk, dispatch }) => {

   useEffect(() => {
           setFieldValue();
   }, [fieldValue]);

   const setFieldValue = () => sdk.field.setValue(fieldValue);

   return (
       <div>
           <h1>Hello</h1>
           <EditMessage/>
       </div>
   );
};

const mapStateToProps = ({ fieldValue }) => ({
   fieldValue: fieldValue,
});
export default connect(mapStateToProps)(App);

import React, {useEffect} from 'react';
import {connect} from 'react-redux';
import {initFieldValue} from '../actions';
import EditMessage from './components/EditMessage';

const App = ({fieldValue, sdk, dispatch}) => {
   useEffect(() => {
       if (sdk.field.getValue() && sdk.field.getValue().message !== undefined) {
           dispatch(initFieldValue(sdk.field.getValue()));
       } else {
           setFieldValue();
       }
   }, []);

   useEffect(() => {
       setFieldValue();
   }, [fieldValue]);

   const setFieldValue = () => sdk.field.setValue(fieldValue);

   return (
       <div>
           <h1>Hello</h1>
           <EditMessage/>
       </div>
   );
};

const mapStateToProps = ({fieldValue}) => ({
   fieldValue: fieldValue,
});
export default connect(mapStateToProps)(App);

export const initFieldValue = object => ({
   type: 'INIT_FIELD_VALUE',
   payload: {
       value: object
   }
});

export const updateMessage = value => ({
   type: 'UPDATE_MESSAGE',
   payload: {
       value: value
   }
});

const fieldValue = (state = [], action) => {
   switch (action.type) {
   case 'INIT_FIELD_VALUE' :
       return action.payload.value;

   case 'UPDATE_MESSAGE' :
       return {
           ...state,
           message: action.payload.value
       };

   default:
       return state;
   }
};

export default fieldValue;

import React, {useEffect} from 'react';
import {connect} from 'react-redux';
import isEqual from 'lodash/isEqual';
import {initFieldValue} from '../actions';
import EditMessage from './components/EditMessage';

const App = ({fieldValue, sdk, dispatch}) => {
   useEffect(() => {
       if (sdk.field.getValue() && sdk.field.getValue() !== {}) {
           dispatch(initFieldValue(sdk.field.getValue()));
       } else {
           setFieldValue();
       }

       sdk.window.startAutoResizer();

       return () => {
           sdk.window.stopAutoResizer();
       };
   }, []);

   useEffect(() => {
       setFieldValue();
   }, [fieldValue]);

   const setFieldValue = () => sdk.field.setValue(fieldValue);

   return (
       <div>
           <h1>Hello</h1>
           <EditMessage/>
       </div>
   );
};

const mapStateToProps = ({fieldValue}) => ({
   fieldValue: fieldValue,
});
export default connect(mapStateToProps)(App);