Skip to content

GitLab

Commit de0310ac authored by Jaden DIEFENBAUGH's avatar Jaden DIEFENBAUGH
Browse files

Wrap entity-specific editors in common detail component

parent eaca9927
Hide whitespace changes
Inline Side-by-side
src/components/AlgorithmDetail.jsx
View file @ de0310ac
......@@ -38,7 +38,6 @@ import { algorithmValidator } from '@helpers/beat.js';
import type { AlgorithmValidatorObject, BeatObject } from '@helpers/beat.js';
type Props = {
match: any,
data: BeatObject,
algorithms: BeatObject[],
libraries: BeatObject[],
......@@ -54,18 +53,12 @@ type State = {
const orderedParams = (params: any): string[] => [ params.user, params.name, params.version ];
const findAlg = (algs, nameStr) => algs.find(a => a.name === nameStr) || {};
const mapStateToProps: MapStateToProps<*,*,*> = (state, ownProps) => {
const paramName = orderedParams(ownProps.match.params).join('/');
//console.log(`mapStateToProps ${ paramName }`);
const obj = {
data: findAlg(Selectors.algorithmGet(state), paramName),
algorithms: Selectors.algorithmGet(state),
libraries: Selectors.libraryGet(state),
dataformats: Selectors.dataformatGet(state),
};
//console.log(`mapStateToProps found data: "${ JSON.stringify(obj.data) }"`);
return obj;
};
......@@ -806,7 +799,6 @@ class AlgorithmDetail extends React.Component<Props, State> {
render () {
return (
<div>
{ JSON.stringify(this.state.cache) }
<Form>
<FormGroup tag='fieldset'>
<legend>Algorithm Settings</legend>
......
src/components/DataformatDetail.jsx
View file @ de0310ac
......@@ -30,14 +30,11 @@ import * as Selectors from '@store/selectors.js';
import CacheInput from './CacheInput.jsx';
//import { algorithmValidator } from '@helpers/beat.js';
import type {
//AlgorithmValidatorObject,
BeatObject,
} from '@helpers/beat.js';
type Props = {
match: any,
data: BeatObject,
dfs: BeatObject[],
dataformats: string[],
......@@ -45,7 +42,6 @@ type Props = {
type State = {
cache: any,
//validity: AlgorithmValidatorObject
};
const orderedParams = (params: any): string[] => [ params.user, params.name, params.version ];
......@@ -72,20 +68,15 @@ const builtinDfs = [
];
const mapStateToProps: MapStateToProps<*,*,*> = (state, ownProps) => {
const paramName = orderedParams(ownProps.match.params).join('/');
//console.log(`mapStateToProps ${ paramName }`);
const obj = {
data: findDf(Selectors.dataformatGet(state), paramName),
dfs: Selectors.dataformatGet(state),
dataformats: Selectors.dataformatGet(state).map(d => d.name).concat(builtinDfs),
};
//console.log(`mapStateToProps found data: "${ JSON.stringify(obj.data) }"`);
return obj;
};
const getValidObj = (data = {}) => {
//console.log(`Calling getValidObj with data: "${ JSON.stringify(data) }"`);
const getObj = {
name: '',
contents: {},
......@@ -346,13 +337,11 @@ class DataformatDetail extends React.Component<Props, State> {
state = {
cache: getValidObj(this.props.data),
//validity: algorithmValidator(this.props.data, this.props.algorithms),
}
componentWillReceiveProps (nextProps) {
this.setState({
cache: getValidObj(nextProps.data),
//validity: this.getValidity(nextProps.data, nextProps.algorithms),
});
}
......@@ -370,16 +359,15 @@ class DataformatDetail extends React.Component<Props, State> {
render = () => (
<Form onSubmit={(e) => e.preventDefault()}>
<span>{ JSON.stringify(this.state.cache) }</span>
<FormGroup tag='fieldset'>
<legend>Algorithm Settings</legend>
<legend>Dataformat Settings</legend>
<FormGroup>
<Label for='algName'>Name</Label>
<Input
type='text'
name='name'
id='algName'
placeholder='New algorithm name...'
placeholder='New dataformat name...'
value={this.state.cache.name}
onChange={e => this.setState({ cache: {...this.state.cache, 'name': e.target.value}})}
valid={
......
src/components/EntityDetail.jsx
View file @ de0310ac
// @flow
import React from 'react';
import * as React from 'react';
import {
Container,
Row,
Col,
TabContent,
TabPane,
Nav,
NavItem,
NavLink,
} from 'reactstrap';
import { connect } from 'react-redux';
import type { MapStateToProps, MapDispatchToProps } from 'react-redux';
import cn from 'classnames';
import * as Selectors from '@store/selectors.js';
import {
Route,
Link
} from 'react-router-dom';
import type { BeatObject } from '@helpers/beat';
import DataformatDetail from './DataformatDetail.jsx';
import AlgorithmDetail from './AlgorithmDetail.jsx';
type Props = {
instance: any
match: any,
getEntityObject: () => BeatObject,
};
const EntityDetail = ({ instance }: Props) => (
<pre>{ JSON.stringify(instance) }</pre>
);
type Tab = '0' | '1' | '2';
export default EntityDetail;
type State = {
activeTab: Tab,
};
const name = (params: any) => Object.values(params).join('/');
const mapStateToProps: MapStateToProps<*,*,*> = (state, ownProps) => {
const entity = ownProps.match.params.entity;
const name = ownProps.match.params.name;
console.log(`${ entity }: ${ name }`);
const obj = {
getEntityObject: (): BeatObject => Selectors[`${ entity }Get`](state).find(o => o.name === name) || {name: '', contents: {}},
};
export const mapParamsToData = (params: string[], data: any) => {
let obj = {};
if(Object.keys(data).length > 0){
const arr: any[] = (
params.slice(0, -1)
.reduce((o: any, p) => o[p], JSON.parse(JSON.stringify(data))): any
);
return obj;
};
obj = arr.find(o => o.name === name(params));
class EntityDetail extends React.Component<Props, State> {
constructor(props: Props){
super(props);
console.log(props.match);
}
return obj;
};
state = {
activeTab: '0',
}
export type DetailProps = {
match: any,
data: any,
};
switchToTab = (tab: Tab) => {
this.setState({
activeTab: tab
});
}
render () {
return (
<div>
<Nav tabs className='nav-fill'>
<NavItem>
<NavLink
className={cn({ active: this.state.activeTab === '0' })}
onClick={() => this.switchToTab('0')}
>
Editor
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={cn({ active: this.state.activeTab === '1' })}
onClick={() => this.switchToTab('1')}
>
Documentation
</NavLink>
</NavItem>
<NavItem>
<NavLink
className={cn({ active: this.state.activeTab === '2' })}
onClick={() => this.switchToTab('2')}
>
Raw JSON
</NavLink>
</NavItem>
</Nav>
<TabContent activeTab={this.state.activeTab}>
<TabPane tabId='0'>
{ this.props.match.params.entity === 'algorithm' && <AlgorithmDetail data={this.props.getEntityObject()} /> }
{ this.props.match.params.entity === 'dataformat' && <DataformatDetail data={this.props.getEntityObject()} /> }
</TabPane>
<TabPane tabId='1'>
</TabPane>
<TabPane tabId='2'>
<pre>{ JSON.stringify(this.props.getEntityObject(), null, 4) }</pre>
</TabPane>
</TabContent>
</div>
);
}
}
export default connect(mapStateToProps)(EntityDetail);
src/components/EntityHome.jsx
View file @ de0310ac
......@@ -23,28 +23,12 @@ import { pluralize } from '@helpers/beat.js';
import EntityList from './EntityList.jsx';
import NewEntityModal from './NewEntityModal.jsx';
import DatabasesDetail from './DatabasesDetail.jsx';
import LibrariesDetail from './LibrariesDetail.jsx';
import DataformatDetail from './DataformatDetail.jsx';
import AlgorithmDetail from './AlgorithmDetail.jsx';
import ToolchainsDetail from './ToolchainsDetail.jsx';
import ExperimentsDetail from './ExperimentsDetail.jsx';
import EntityDetail from './EntityDetail.jsx';
type Props = {
entity: BeatEntity,
};
const detailPaths = new Map([
[ '/database/:name/:version', DatabasesDetail ],
[ '/library/:user/:name/:version', LibrariesDetail ],
[ '/dataformat/:user/:name/:version', DataformatDetail ],
[ '/algorithm/:user/:name/:version', AlgorithmDetail ],
[ '/toolchain/:user/:name/:version', ToolchainsDetail ],
[ '/experiment/:user/:tcuser/:tcname/:tcversion/:name', ExperimentsDetail ],
]);
type State = {
newOpen: boolean,
};
......@@ -63,11 +47,7 @@ class EntityHome extends React.Component<Props, State> {
render () {
return (
<Switch>
{ Array.from(detailPaths).map(([path, C], i) => {
return (
<Route key={i} exact path={path} component={C} />
);
})}
<Route exact path={'/:entity/:name+'} component={EntityDetail} />
<Route>
<Container>
<Row className='mb-3'>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment