Skip to content

Commit 42102b9

Browse files
committed
added widgets - incomplete
1 parent 2d82472 commit 42102b9

File tree

15 files changed

+431
-111
lines changed

15 files changed

+431
-111
lines changed

src/actions/index.js

Lines changed: 87 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ export const headingTextChanged = (dispatch, widgetId, newText) => (
66
id: widgetId,
77
text: newText})
88
)
9+
910
export const headingSizeChanged = (dispatch, widgetId, newSize) => (
1011
dispatch({
1112
type: constants.HEADING_SIZE_CHANGED,
@@ -20,23 +21,101 @@ export const findAllWidgets = dispatch => {
2021
type: constants.FIND_ALL_WIDGETS,
2122
widgets: widgets }))
2223
}
23-
export const addWidget = dispatch => (
24-
dispatch({type: constants.ADD_WIDGET})
25-
)
26-
export const save = dispatch => (
27-
dispatch({type: constants.SAVE})
28-
)
2924
export const preview = dispatch => (
3025
dispatch({type: constants.PREVIEW})
3126
)
3227
export const findWidgetsForTopic = (topicId,dispatch) => (
3328
fetch("http://localhost:8080/api/topic/TID/widget".replace("TID",topicId))
3429
.then(response => (response.json()))
3530
.then(widgets => (dispatch(
36-
{type:'FIND_WIDGETS_TOPIC',
37-
widgets:widgets,topicId:topicId}
31+
{ type: constants.FIND_ALL_WIDGETS_FOR_TOPIC,
32+
widgets:widgets
33+
}
3834
)))
3935
)
4036
export const add = (topicId,dispatch) => (
4137
dispatch({type:constants.ADD,topicId:topicId})
4238
)
39+
40+
41+
export const setTopicId = (dispatch, topicId) => {
42+
dispatch({
43+
type: constants.SET_TOPIC_ID,
44+
topicId: topicId
45+
})
46+
}
47+
export const save = (topicId, dispatch) => (
48+
dispatch({
49+
type:constants.SAVE,topicId:topicId
50+
})
51+
)
52+
export const imageChanged = (dispatch, widgetId, newImage) => (
53+
dispatch({
54+
type: constants.IMAGE_CHANGED,
55+
id: widgetId,
56+
src: newImage
57+
})
58+
)
59+
60+
export const widthChanged = (dispatch, widgetId, newWidth) => (
61+
dispatch({
62+
type: constants.WIDTH_CHANGED,
63+
id: widgetId,
64+
width: newWidth
65+
})
66+
)
67+
68+
export const linkChanged = (dispatch, widgetId, newLink) => (
69+
dispatch({
70+
type: constants.LINK_CHANGED,
71+
id: widgetId,
72+
href: newLink
73+
})
74+
)
75+
76+
export const heightChanged = (dispatch, widgetId, newHeight) => (
77+
dispatch({
78+
type: constants.HEIGHT_CHANGED,
79+
id: widgetId,
80+
height: newHeight
81+
})
82+
)
83+
84+
export const listTypeChanged = (dispatch, widgetId, newType) => (
85+
dispatch({
86+
type: constants.LIST_TYPE_CHANGED,
87+
id: widgetId,
88+
listType: newType
89+
})
90+
)
91+
92+
export const findAllWidgetsForTopic = (dispatch, topicId) => {
93+
fetch('http://localhost:8080/api/topic/TID/widget'.replace('TID', topicId))
94+
.then(response => (response.json()))
95+
.then(widgets => dispatch({
96+
type: constants.FIND_ALL_WIDGETS_FOR_TOPIC,
97+
widgets: widgets
98+
}))
99+
}
100+
export const search = (searchQuery,dispatch)=>(
101+
fetch("https://www.googleapis.com/customsearch/v1?key=AIzaSyCG-dD8kckSHXcOJfE82mZzRmU5l2J0b5o&cx=017661173743464904363:okgv-u30f8q&q=QUERY".replace("QUERY",searchQuery))
102+
.then(response => (response.json()))
103+
.then(results => dispatch(
104+
{
105+
type:constants.SEARCH,
106+
results:results
107+
}
108+
)
109+
))
110+
111+
112+
export const clickImage = (widgetId,result,dispatch) =>(
113+
dispatch(
114+
{
115+
type:constants.IMAGE_URL,
116+
id:widgetId,
117+
imageUrl:result
118+
}
119+
)
120+
)
121+

src/components/LessonTabItem.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {Component} from 'react';
2-
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
2+
import {Link} from 'react-router-dom'
33
import '../../node_modules/bootstrap/dist/css/bootstrap.css';
44

55
class LessonTabItem extends Component {

src/components/TopicPillItem.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import React from 'react';
22
import { Link } from 'react-router-dom'
3-
import {BrowserRouter as Router, Route} from 'react-router-dom'
4-
import {WidgetContainer} from "./../containers/WidgetList";
53

64
export default class TopicPillItem
75
extends React.Component {

src/components/Widget.js

Lines changed: 149 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,90 @@
11
import React from 'react'
22
import {connect} from 'react-redux'
3-
import {DELETE_WIDGET} from "../constants/index"
3+
import * as constants from "../constants/index"
44
import * as actions from '../actions'
55

66
const Heading = ({widget, preview, headingTextChanged, headingSizeChanged}) => {
7-
let selectElem
8-
let inputElem
7+
let selectElem;
8+
let inputElem;
99
return(
1010
<div>
1111
<div hidden={preview}>
1212
<h2> Heading {widget.size}</h2>
13-
<input onChange={() => headingTextChanged(widget.id, inputElem.value)}
14-
value={widget.text}
15-
ref={node => inputElem = node}/>
16-
<select onChange={() => headingSizeChanged(widget.id, selectElem.value)}
13+
<input className="form-control"
14+
onChange={() => headingTextChanged(widget.id, inputElem.value)}
15+
value={widget.text}
16+
type="text"
17+
placeholder="Enter heading text here"
18+
ref={node => inputElem=node}/>
19+
<br/>
20+
<select className="form-control"
21+
onChange={() => headingSizeChanged(widget.id, selectElem.value)}
1722
value={widget.size}
1823
ref={node => selectElem = node}>
1924
<option value="1">Heading 1</option>
2025
<option value="2">Heading 2</option>
2126
<option value="3">Heading 3</option>
2227
</select>
28+
<br/>
29+
<br/>
2330
<h3>Preview</h3>
2431
</div>
25-
{widget.size === 1 && <h1>{widget.text}</h1>}
26-
{widget.size === 2 && <h2>{widget.text}</h2>}
27-
{widget.size === 3 && <h3>{widget.text}</h3>}
32+
<div className="container-fluid text-center">
33+
{widget.size == 1 && <h1>{widget.text}</h1>}
34+
{widget.size == 2 && <h2>{widget.text}</h2>}
35+
{widget.size == 3 && <h3>{widget.text}</h3>}
36+
</div>
37+
</div>
38+
)
39+
}
40+
const Link = ({widget, preview, headingTextChanged, linkChanged}) => {
41+
let inputElement;
42+
let inputElement1;
43+
return (
44+
<div className="">
45+
<div hidden={preview}>
46+
<h6>{widget.name}</h6>
47+
<textarea
48+
className="form-control"
49+
onChange={() => headingTextChanged(widget.id, inputElement.value)}
50+
value={widget.text}
51+
placeholder="Link text"
52+
ref={node => inputElement = node}/>
53+
<textarea
54+
className="form-control"
55+
onChange={() => linkChanged(widget.id, inputElement1.value)}
56+
value={widget.href}
57+
placeholder="URL"
58+
ref={node => inputElement1 = node}/>
59+
<br/>
60+
<br/>
61+
<h3>Preview</h3>
62+
</div>
63+
<div className="container-fluid text-center">
64+
<a href={widget.href}>{widget.text}</a>
65+
</div>
2866
</div>
2967
)
3068
}
31-
const dispathToPropsMapper = dispatch => ({
69+
70+
const dispatchToPropsMapper = dispatch => ({
3271
headingTextChanged: (widgetId, newText) =>
3372
actions.headingTextChanged(dispatch, widgetId, newText),
3473
headingSizeChanged: (widgetId, newSize) =>
35-
actions.headingSizeChanged(dispatch, widgetId, newSize)
74+
actions.headingSizeChanged(dispatch, widgetId, newSize),
75+
listTypeChanged: (widgetId, newType) =>
76+
actions.listTypeChanged(dispatch, widgetId, newType),
77+
widthChanged: (widgetId, newWidth) =>
78+
actions.widthChanged(dispatch, widgetId, newWidth),
79+
heightChanged: (widgetId, newHeight) =>
80+
actions.heightChanged(dispatch, widgetId, newHeight),
81+
linkChanged: (widgetId, newLink) =>
82+
actions.linkChanged(dispatch, widgetId, newLink)
3683
})
3784
const stateToPropsMapper = state => ({
3885
preview: state.preview
3986
})
40-
const HeadingContainer = connect(stateToPropsMapper, dispathToPropsMapper)(Heading)
87+
const HeadingContainer = connect(stateToPropsMapper, dispatchToPropsMapper)(Heading)
4188

4289
const Paragraph = () => (
4390
<div>
@@ -46,50 +93,109 @@ const Paragraph = () => (
4693
</div>
4794
)
4895

49-
const Image = () => (
50-
<h2>Image</h2>
51-
)
96+
const Image = ({widget,preview,results,iurl,search,clickImage}) => {
97+
let imageUrlElem;
98+
let searchInput;
99+
return (
100+
101+
<div>
102+
<div hidden={preview}>
103+
<h2 style={{padding: "10px"}}>{widget.widgetType}</h2>
104+
<div style={{padding: "10px"}}>
105+
<input className="form-control" type="text" placeholder="Link Url"
106+
onChange={() => iurl(widget.id, imageUrlElem.value)} ref={node => imageUrlElem = node}
107+
value={widget.iurl}/><br/>
108+
<div className="row">
109+
<div className="col-10" style={{paddingRight: "0px"}}>
110+
<input placeholder="search for image ... "
111+
className="form-control" type="text" ref={node => searchInput = node}/>
112+
</div>
113+
<div className="col-2 float-right">
114+
<button className="btn" style={{background: "#4286f4"}}
115+
onClick={() => search(searchInput.value)}><i className="fa fa-lg fa-search"></i>
116+
</button>
117+
</div>
118+
</div>
119+
<br/>
120+
{results !== undefined && results.length > 0 && results.map(result => (
121+
<img style={{widget: "150px", height: "150px", margin: "10px"}} src={result} onClick={() => {
122+
clickImage(widget.id, result)
123+
}}/>
124+
))}
125+
</div>
126+
<h4 style={{padding: "10px"}}>Preview</h4>
127+
</div>
128+
<div style={{padding: "10px"}}>
129+
{widget.widgetType === 'Image' && <img src={widget.iurl} style={{width: "300px", height: "300px"}}/>}
130+
</div>
131+
</div>
132+
)
133+
}
52134

53135
const List = () => (
54136
<h2>List</h2>
55137
)
56138

57-
const Widget = ({widget, preview, dispatch}) => {
139+
const Widget = ({widget,topicId, preview, dispatch}) => {
58140
let selectElement
59141
return(
60-
<li>
61-
<h1>######WIDGET RENDERING######</h1>
142+
<div>
62143
<div hidden={preview}>
63-
{widget.id} {widget.widgetType}
64144

65-
<select value={widget.widgetType}
66-
onChange={e =>
67-
dispatch({
68-
type: 'SELECT_WIDGET_TYPE',
69-
id: widget.id,
70-
widgetType: selectElement.value
71-
})} ref={node => selectElement = node}>
72-
<option>Heading</option>
73-
<option>Paragraph</option>
74-
<option>List</option>
75-
<option>Image</option>
76-
</select>
145+
<div className="container">
146+
<div className="row">
147+
{widget.id} {widget.widgetType}
77148

78-
<button onClick={e => (
79-
dispatch({type: DELETE_WIDGET, id: widget.id})
149+
<select hidden={preview}
150+
value={widget.widgetType}
151+
onChange={e =>
152+
dispatch({
153+
type: 'SELECT_WIDGET_TYPE',
154+
id: widget.id,
155+
widgetType: selectElement.value
156+
})} ref={node => selectElement = node}>
157+
<option>Heading</option>
158+
<option>Paragraph</option>
159+
<option>List</option>
160+
<option>Image</option>
161+
<option>Link</option>
162+
</select>
163+
<button hidden={preview} className="btn btn-sm btn-danger"
164+
onClick={e => (
165+
dispatch({type: constants.DELETE_WIDGET, id: widget.id})
80166
)}>Delete</button>
167+
<button hidden={!preview} className="btn btn-secondary fa fa-edit">
168+
</button>
169+
170+
<button hidden={preview} className='btn btn-outline-info fa fa-arrow-up'
171+
onClick={e => (dispatch({type: constants.MOVE_UP_WIDGET, widgetOrder: widget.widgetOrder})
172+
)}></button>
173+
<button hidden={preview} className='btn btn-outline-info fa fa-arrow-down'
174+
onClick={e => (dispatch({type: constants.MOVE_DOWN_WIDGET, widgetOrder: widget.widgetOrder})
175+
)}></button>
176+
</div>
177+
</div>
81178
</div>
82179
<div>
83-
{widget.widgetType==='Heading' && <HeadingContainer widget={widget}/>}
84-
{widget.widgetType==='Paragraph' && <Paragraph/>}
85-
{widget.widgetType==='List' && <List/>}
86-
{widget.widgetType==='Image' && <Image/>}
180+
{widget.widgetType==='Heading' && <HeadingCt widget={widget}/>}
181+
{widget.widgetType==='Paragraph' && <ParagraphCt widget={widget}/>}
182+
{widget.widgetType==='List' && <ListCt widget={widget}/>}
183+
{widget.widgetType==='Image' && <ImageCt widget={widget}/>}
184+
{widget.widgetType==='Link' && <LinkCt widget={widget}/>}
87185
</div>
88-
</li>
186+
</div>
89187
)
90188
}
91-
export const WidgetCt = connect(state => ({
92-
preview: state.preview
93-
}))(Widget)
94189

95-
export default WidgetCt
190+
const imageDispatchToPropsMapper = dispatch => ({
191+
imageChanged: (widgetId,imageUrl)=>actions.imageChanged(widgetId,imageUrl,dispatch),
192+
search:(searchQuery)=> actions.search(searchQuery,dispatch),
193+
clickImage: (widgetId,result) => actions.clickImage(widgetId,result,dispatch)
194+
})
195+
196+
export const WidgetCt = connect(stateToPropsMapper)(Widget)
197+
export const HeadingCt = connect(stateToPropsMapper, dispatchToPropsMapper)(Heading)
198+
export const ParagraphCt = connect(stateToPropsMapper, dispatchToPropsMapper)(Paragraph)
199+
export const ListCt = connect(stateToPropsMapper, dispatchToPropsMapper)(List)
200+
export const ImageCt = connect(stateToPropsMapper, imageDispatchToPropsMapper)(Image)
201+
export const LinkCt = connect(stateToPropsMapper, dispatchToPropsMapper)(Link)

0 commit comments

Comments
 (0)