front-end v.001

src/app/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

src/app/components/App.jsx

@@ -0,0 +1,78 @@
+import React, { useContext, Component } from 'react';
+
+// data
+import data from '../data.jsx'
+
+// containers
+import SplitPane from '../container/SplitPane.jsx';
+
+// left pane = events, right pane = details
+import Events from '../container/Events.jsx';
+import Details from '../container/Details.jsx';
+
+class App extends Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {};
+
+ this.addActionToView = this.addActionToView.bind(this);
+ // this.toTheFuture = this.toTheFuture.bind(this);
+ }
+
+ // function to select an event from the data
+ // and set state with all required info
+ addActionToView(e) {
+ const actionToView = data.filter(action => e.target.id === String(action.id));
+ const {
+ action, id, payload, state,
+ } = actionToView[0];
+ this.setState({
+ action, id, payload, state,
+ });
+ }
+
+ // function to travel to the FUTURE
+ // **** not being passed to any children yet
+ // toTheFuture(e) {
+ // if (this.state.action) {
+ // for (let i = 0; i < data.length - 1; i += 1) {
+ // // clicking next returns next piece of data
+ // if (data[i].id === this.state.id) {
+ // const { action, id, payload, state } = data[i + 1];
+ // this.setState({action, id, payload, state});
+ // }
+ // // if we're at the last action stop there
+ // // don't let user go any further
+ // if (data[i].id === undefined) {
+ // const { action, id, payload, state } = data[data.length -1 ];
+ // this.setState({action, id, payload, state});
+ // }
+ // }
+ // }
+ // }
+
+ render() {
+ const {
+ action, id, payload, state,
+ } = this.state;
+ return (
+ <SplitPane
+ left={
+ <Events addAction={this.addActionToView} />
+ }
+ right={
+ (
+ <Details
+ action={action}
+ id={id}
+ payload={payload}
+ actionState={state}
+ />
+ )}
+ />
+ );
+ }
+}
+
+export default App;

src/app/components/DetailCards/Actions/ActionsDisplay.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function Actions(props) {
+ // renders action information
+ const { action, payload } = props;
+ return (
+ <>
+ action:
+ {action || 'select an event'}
+ <br></br>
+ payload:
+ {payload || 'select an event'}
+ </>
+ );
+}

src/app/components/DetailCards/DetailsNav.jsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+
+var Link = require('react-router-dom').Link;
+var NavLink = require('react-router-dom').NavLink;
+//styled component imports
+import { Buttons, Button, DetailsNavWrapper, Ul } from '../../styles/Nav.jsx';
+
+
+export default function RightNav(props) {
+ return (
+ //make this nav bar with react router
+ //sync it so each active link displays appropriate div
+ //with info
+
+ //style pages so inputted information is styled correctly
+ <>
+ <DetailsNavWrapper>
+ <Buttons>
+ <NavLink activeClassName='active' to='/actions'>
+ <Button>actions</Button>
+ </NavLink>
+ <NavLink activeClassName='active' to='/effects'>
+ <Button>effects</Button>
+ </NavLink>
+ <NavLink activeClassName='active' to='/state'>
+ <Button>state</Button>
+ </NavLink>
+ </Buttons>
+ </DetailsNavWrapper>
+ </>
+ )
+}

src/app/components/DetailCards/Effects/EffectsDisplay.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export default function Effects(props) {
+ return (
+ <div>effects display page</div>
+ );
+}

src/app/components/DetailCards/State/StateCard.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default function EffectCard(props) {
+ // renders the data to show
+ const { stringData } = props;
+ return (
+ <div>
+ { stringData || 'select an event'}
+ </div>
+ );
+}

src/app/components/DetailCards/State/StateDisplay.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import StateCard from './StateCard.jsx';
+
+export default function State(props) {
+ // stringifying data to pass down to StateCard to display
+ const { actionState } = props;
+ const stringData = JSON.stringify(actionState, null, '\t');
+
+ return (
+ <>
+ {<StateCard stringData={stringData} />}
+ </>
+ );
+}

src/app/components/EventCards/EventCreator.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default function EventCreator(props) {
+ // renders individual action
+ const { action, id, addAction } = props;
+
+ return (
+ <div id={id} onClick={ addAction }>
+ {action}
+ </div>
+ );
+}

src/app/components/EventCards/EventsDisplay.jsx

@@ -0,0 +1,31 @@
+import React, { useContext, useState } from 'react';
+
+// components import
+import EventCreator from './EventCreator.jsx';
+import TimeTravel from './TimeTravel.jsx';
+
+// styled components import
+import { EventsWrapper } from '../../styles/Events.jsx';
+
+// data context import
+import { DataContext } from '../../index.js'
+
+export default function Events(props) {
+ // data context instance created
+ const data = useContext(DataContext);
+
+ return (
+ <EventsWrapper>
+ {data.map((e, i) => (
+ <EventCreator
+ action={e.action}
+ key={i}
+ id={e.id}
+ addAction={props.addAction}
+ />
+ ))}
+ {/* time travel doesn't work yet */}
+ <TimeTravel />
+ </EventsWrapper>
+ );
+}

src/app/components/EventCards/EventsNav.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+// styled components
+import { EventsNavWrapper } from '../../styles/Nav.jsx';
+
+
+// events nav bar is created below and styled
+export default function LeftNav() {
+ return (
+ <>
+ <EventsNavWrapper>events</EventsNavWrapper>
+ </>
+ );
+}

src/app/components/EventCards/TimeTravel.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function TimeTavel(props) {
+ return (
+ <div>
+ PREVIOUS
+ NEXT
+ </div>
+ );
+}

src/app/container/Details.jsx

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+
+const ReactRouter = require('react-router-dom');
+
+const Router = ReactRouter.BrowserRouter;
+const { Route } = ReactRouter;
+
+// details nav component import
+import DetailsNav from '../components/DetailCards/DetailsNav.jsx';
+
+// component imports for react router
+import ActionsDisplay from '../components/DetailCards/Actions/ActionsDisplay.jsx'
+import EffectsDisplay from '../components/DetailCards/Effects/EffectsDisplay.jsx'
+import StateDisplay from '../components/DetailCards/State/StateDisplay.jsx'
+
+
+export default function Details(props) {
+
+ // destructuring required info that's being passed down from App.jsx
+ // passing these props onto children
+ const {
+ action, id, payload, actionState,
+ } = props;
+
+ return (
+ <Router>
+ <>
+ <DetailsNav />
+
+ {/* routing components and rendering them with props */}
+ <Route
+ path='/actions'
+ render={props => <ActionsDisplay {...props} action={action} payload={payload} />}
+ />
+ <Route
+ path='/effects'
+ render={props => <EffectsDisplay {...props} action={action} />}
+ />
+ <Route
+ path='/state'
+ render={props => <StateDisplay {...props} actionState={actionState} />}
+ />
+ </>
+ </Router>
+ );
+}

src/app/container/Events.jsx

@@ -0,0 +1,24 @@
+import React, { useContext, useState, Component} from 'react';
+
+// components
+import EventsNav from '../components/EventCards/EventsNav.jsx';
+import EventsDisplay from '../components/EventCards/EventsDisplay.jsx'
+
+class Events extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {};
+ }
+
+ render() {
+ const { addAction } = this.props;
+ return (
+ <>
+ <EventsNav />
+ <EventsDisplay addAction={addAction} />
+ </>
+ );
+ }
+}
+
+export default Events;

src/app/container/SplitPane.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+// styled components
+import { PaneWrapper, LeftPane, RightPane } from '../styles/SplitPane.jsx';
+
+export default function SplitPane(props) {
+ const { left, right } = props;
+ return (
+ <PaneWrapper>
+ <LeftPane>{left}</LeftPane>
+ <RightPane>{right}</RightPane>
+ </PaneWrapper>
+ );
+}