Skip to content

Commit

Permalink
added widgets - incomplete
Browse files Browse the repository at this point in the history
  • Loading branch information
@erinzhangxi
erinzhangxi committed Jun 3, 2018
1 parent 2d82472 commit 42102b9
Show file tree
Hide file tree
Showing 15 changed files with 431 additions and 111 deletions.
95 changes: 87 additions & 8 deletions src/actions/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export const headingTextChanged = (dispatch, widgetId, newText) => (
id: widgetId,
text: newText})
)

export const headingSizeChanged = (dispatch, widgetId, newSize) => (
dispatch({
type: constants.HEADING_SIZE_CHANGED,
Expand All @@ -20,23 +21,101 @@ export const findAllWidgets = dispatch => {
type: constants.FIND_ALL_WIDGETS,
widgets: widgets }))
}
export const addWidget = dispatch => (
dispatch({type: constants.ADD_WIDGET})
)
export const save = dispatch => (
dispatch({type: constants.SAVE})
)
export const preview = dispatch => (
dispatch({type: constants.PREVIEW})
)
export const findWidgetsForTopic = (topicId,dispatch) => (
fetch("http://localhost:8080/api/topic/TID/widget".replace("TID",topicId))
.then(response => (response.json()))
.then(widgets => (dispatch(
{type:'FIND_WIDGETS_TOPIC',
widgets:widgets,topicId:topicId}
{ type: constants.FIND_ALL_WIDGETS_FOR_TOPIC,
widgets:widgets
}
)))
)
export const add = (topicId,dispatch) => (
dispatch({type:constants.ADD,topicId:topicId})
)


export const setTopicId = (dispatch, topicId) => {
dispatch({
type: constants.SET_TOPIC_ID,
topicId: topicId
})
}
export const save = (topicId, dispatch) => (
dispatch({
type:constants.SAVE,topicId:topicId
})
)
export const imageChanged = (dispatch, widgetId, newImage) => (
dispatch({
type: constants.IMAGE_CHANGED,
id: widgetId,
src: newImage
})
)

export const widthChanged = (dispatch, widgetId, newWidth) => (
dispatch({
type: constants.WIDTH_CHANGED,
id: widgetId,
width: newWidth
})
)

export const linkChanged = (dispatch, widgetId, newLink) => (
dispatch({
type: constants.LINK_CHANGED,
id: widgetId,
href: newLink
})
)

export const heightChanged = (dispatch, widgetId, newHeight) => (
dispatch({
type: constants.HEIGHT_CHANGED,
id: widgetId,
height: newHeight
})
)

export const listTypeChanged = (dispatch, widgetId, newType) => (
dispatch({
type: constants.LIST_TYPE_CHANGED,
id: widgetId,
listType: newType
})
)

export const findAllWidgetsForTopic = (dispatch, topicId) => {
fetch('http://localhost:8080/api/topic/TID/widget'.replace('TID', topicId))
.then(response => (response.json()))
.then(widgets => dispatch({
type: constants.FIND_ALL_WIDGETS_FOR_TOPIC,
widgets: widgets
}))
}
export const search = (searchQuery,dispatch)=>(
fetch("https://www.googleapis.com/customsearch/v1?key=AIzaSyCG-dD8kckSHXcOJfE82mZzRmU5l2J0b5o&cx=017661173743464904363:okgv-u30f8q&q=QUERY".replace("QUERY",searchQuery))
.then(response => (response.json()))
.then(results => dispatch(
{
type:constants.SEARCH,
results:results
}
)
))


export const clickImage = (widgetId,result,dispatch) =>(
dispatch(
{
type:constants.IMAGE_URL,
id:widgetId,
imageUrl:result
}
)
)

2 changes: 1 addition & 1 deletion src/components/LessonTabItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import {Link} from 'react-router-dom'
import '../../node_modules/bootstrap/dist/css/bootstrap.css';

class LessonTabItem extends Component {
Expand Down
2 changes: 0 additions & 2 deletions src/components/TopicPillItem.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import React from 'react';
import { Link } from 'react-router-dom'
import {BrowserRouter as Router, Route} from 'react-router-dom'
import {WidgetContainer} from "./../containers/WidgetList";

export default class TopicPillItem
extends React.Component {
Expand Down
192 changes: 149 additions & 43 deletions src/components/Widget.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,90 @@
import React from 'react'
import {connect} from 'react-redux'
import {DELETE_WIDGET} from "../constants/index"
import * as constants from "../constants/index"
import * as actions from '../actions'

const Heading = ({widget, preview, headingTextChanged, headingSizeChanged}) => {
let selectElem
let inputElem
let selectElem;
let inputElem;
return(
<div>
<div hidden={preview}>
<h2> Heading {widget.size}</h2>
<input onChange={() => headingTextChanged(widget.id, inputElem.value)}
value={widget.text}
ref={node => inputElem = node}/>
<select onChange={() => headingSizeChanged(widget.id, selectElem.value)}
<input className="form-control"
onChange={() => headingTextChanged(widget.id, inputElem.value)}
value={widget.text}
type="text"
placeholder="Enter heading text here"
ref={node => inputElem=node}/>
<br/>
<select className="form-control"
onChange={() => headingSizeChanged(widget.id, selectElem.value)}
value={widget.size}
ref={node => selectElem = node}>
<option value="1">Heading 1</option>
<option value="2">Heading 2</option>
<option value="3">Heading 3</option>
</select>
<br/>
<br/>
<h3>Preview</h3>
</div>
{widget.size === 1 && <h1>{widget.text}</h1>}
{widget.size === 2 && <h2>{widget.text}</h2>}
{widget.size === 3 && <h3>{widget.text}</h3>}
<div className="container-fluid text-center">
{widget.size == 1 && <h1>{widget.text}</h1>}
{widget.size == 2 && <h2>{widget.text}</h2>}
{widget.size == 3 && <h3>{widget.text}</h3>}
</div>
</div>
)
}
const Link = ({widget, preview, headingTextChanged, linkChanged}) => {
let inputElement;
let inputElement1;
return (
<div className="">
<div hidden={preview}>
<h6>{widget.name}</h6>
<textarea
className="form-control"
onChange={() => headingTextChanged(widget.id, inputElement.value)}
value={widget.text}
placeholder="Link text"
ref={node => inputElement = node}/>
<textarea
className="form-control"
onChange={() => linkChanged(widget.id, inputElement1.value)}
value={widget.href}
placeholder="URL"
ref={node => inputElement1 = node}/>
<br/>
<br/>
<h3>Preview</h3>
</div>
<div className="container-fluid text-center">
<a href={widget.href}>{widget.text}</a>
</div>
</div>
)
}
const dispathToPropsMapper = dispatch => ({

const dispatchToPropsMapper = dispatch => ({
headingTextChanged: (widgetId, newText) =>
actions.headingTextChanged(dispatch, widgetId, newText),
headingSizeChanged: (widgetId, newSize) =>
actions.headingSizeChanged(dispatch, widgetId, newSize)
actions.headingSizeChanged(dispatch, widgetId, newSize),
listTypeChanged: (widgetId, newType) =>
actions.listTypeChanged(dispatch, widgetId, newType),
widthChanged: (widgetId, newWidth) =>
actions.widthChanged(dispatch, widgetId, newWidth),
heightChanged: (widgetId, newHeight) =>
actions.heightChanged(dispatch, widgetId, newHeight),
linkChanged: (widgetId, newLink) =>
actions.linkChanged(dispatch, widgetId, newLink)
})
const stateToPropsMapper = state => ({
preview: state.preview
})
const HeadingContainer = connect(stateToPropsMapper, dispathToPropsMapper)(Heading)
const HeadingContainer = connect(stateToPropsMapper, dispatchToPropsMapper)(Heading)

const Paragraph = () => (
<div>
Expand All @@ -46,50 +93,109 @@ const Paragraph = () => (
</div>
)

const Image = () => (
<h2>Image</h2>
)
const Image = ({widget,preview,results,iurl,search,clickImage}) => {
let imageUrlElem;
let searchInput;
return (

<div>
<div hidden={preview}>
<h2 style={{padding: "10px"}}>{widget.widgetType}</h2>
<div style={{padding: "10px"}}>
<input className="form-control" type="text" placeholder="Link Url"
onChange={() => iurl(widget.id, imageUrlElem.value)} ref={node => imageUrlElem = node}
value={widget.iurl}/><br/>
<div className="row">
<div className="col-10" style={{paddingRight: "0px"}}>
<input placeholder="search for image ... "
className="form-control" type="text" ref={node => searchInput = node}/>
</div>
<div className="col-2 float-right">
<button className="btn" style={{background: "#4286f4"}}
onClick={() => search(searchInput.value)}><i className="fa fa-lg fa-search"></i>
</button>
</div>
</div>
<br/>
{results !== undefined && results.length > 0 && results.map(result => (
<img style={{widget: "150px", height: "150px", margin: "10px"}} src={result} onClick={() => {
clickImage(widget.id, result)
}}/>
))}
</div>
<h4 style={{padding: "10px"}}>Preview</h4>
</div>
<div style={{padding: "10px"}}>
{widget.widgetType === 'Image' && <img src={widget.iurl} style={{width: "300px", height: "300px"}}/>}
</div>
</div>
)
}

const List = () => (
<h2>List</h2>
)

const Widget = ({widget, preview, dispatch}) => {
const Widget = ({widget,topicId, preview, dispatch}) => {
let selectElement
return(
<li>
<h1>######WIDGET RENDERING######</h1>
<div>
<div hidden={preview}>
{widget.id} {widget.widgetType}

<select value={widget.widgetType}
onChange={e =>
dispatch({
type: 'SELECT_WIDGET_TYPE',
id: widget.id,
widgetType: selectElement.value
})} ref={node => selectElement = node}>
<option>Heading</option>
<option>Paragraph</option>
<option>List</option>
<option>Image</option>
</select>
<div className="container">
<div className="row">
{widget.id} {widget.widgetType}

<button onClick={e => (
dispatch({type: DELETE_WIDGET, id: widget.id})
<select hidden={preview}
value={widget.widgetType}
onChange={e =>
dispatch({
type: 'SELECT_WIDGET_TYPE',
id: widget.id,
widgetType: selectElement.value
})} ref={node => selectElement = node}>
<option>Heading</option>
<option>Paragraph</option>
<option>List</option>
<option>Image</option>
<option>Link</option>
</select>
<button hidden={preview} className="btn btn-sm btn-danger"
onClick={e => (
dispatch({type: constants.DELETE_WIDGET, id: widget.id})
)}>Delete</button>
<button hidden={!preview} className="btn btn-secondary fa fa-edit">
</button>

<button hidden={preview} className='btn btn-outline-info fa fa-arrow-up'
onClick={e => (dispatch({type: constants.MOVE_UP_WIDGET, widgetOrder: widget.widgetOrder})
)}></button>
<button hidden={preview} className='btn btn-outline-info fa fa-arrow-down'
onClick={e => (dispatch({type: constants.MOVE_DOWN_WIDGET, widgetOrder: widget.widgetOrder})
)}></button>
</div>
</div>
</div>
<div>
{widget.widgetType==='Heading' && <HeadingContainer widget={widget}/>}
{widget.widgetType==='Paragraph' && <Paragraph/>}
{widget.widgetType==='List' && <List/>}
{widget.widgetType==='Image' && <Image/>}
{widget.widgetType==='Heading' && <HeadingCt widget={widget}/>}
{widget.widgetType==='Paragraph' && <ParagraphCt widget={widget}/>}
{widget.widgetType==='List' && <ListCt widget={widget}/>}
{widget.widgetType==='Image' && <ImageCt widget={widget}/>}
{widget.widgetType==='Link' && <LinkCt widget={widget}/>}
</div>
</li>
</div>
)
}
export const WidgetCt = connect(state => ({
preview: state.preview
}))(Widget)

export default WidgetCt
const imageDispatchToPropsMapper = dispatch => ({
imageChanged: (widgetId,imageUrl)=>actions.imageChanged(widgetId,imageUrl,dispatch),
search:(searchQuery)=> actions.search(searchQuery,dispatch),
clickImage: (widgetId,result) => actions.clickImage(widgetId,result,dispatch)
})

export const WidgetCt = connect(stateToPropsMapper)(Widget)
export const HeadingCt = connect(stateToPropsMapper, dispatchToPropsMapper)(Heading)
export const ParagraphCt = connect(stateToPropsMapper, dispatchToPropsMapper)(Paragraph)
export const ListCt = connect(stateToPropsMapper, dispatchToPropsMapper)(List)
export const ImageCt = connect(stateToPropsMapper, imageDispatchToPropsMapper)(Image)
export const LinkCt = connect(stateToPropsMapper, dispatchToPropsMapper)(Link)
Loading

0 comments on commit 42102b9

Please sign in to comment.