import React from 'react'; import PropTypes from 'prop-types'; import paramCase from 'param-case'; import forceArray from 'force-array'; import { compose, graphql } from 'react-apollo'; import { reduxForm } from 'redux-form'; import find from 'lodash.find'; import get from 'lodash.get'; import { ViewContainer, Title, StatusLoader, Message } from 'joyent-ui-toolkit'; import GetMetadata from '@graphql/list-metadata.gql'; import { KeyValue } from '@components/instances'; const MetadataForms = (metadata = []) => metadata.map(({ key, formName, formValue, value, name }) => { const MetadataForm = reduxForm({ form: `instance-metadata-${key}`, initialValues: { [formName]: name, [formValue]: value } })(KeyValue); return ( console.log(key, val)} onRemove={key => console.log('remove', key)} textarea /> ); }); const Metadata = ({ metadata = [], loading, error }) => { const _title = Metadata; const _loading = !(loading && !forceArray(metadata).length) ? null : ( ); const _metadata = !_loading && MetadataForms(metadata); const _error = !(error && !_loading) ? null : ( ); return ( {_title} {_loading} {_error} {_metadata} ); }; Metadata.propTypes = { loading: PropTypes.bool }; export default compose( graphql(GetMetadata, { options: ({ match }) => ({ pollInterval: 1000, variables: { name: get(match, 'params.instance') } }), props: ({ data: { loading, error, variables, ...rest } }) => { const values = get( find(get(rest, 'machines', []), ['name', variables.name]), 'metadata', [] ); const metadata = Object.keys(values).reduce((all, name) => { const key = paramCase(name); return { ...all, [key]: { key, formName: `${key}-name`, formValue: `${key}-value`, value: values[name], name } }; }, {}); return { metadata: Object.values(metadata), loading, error }; } }) )(Metadata);