Skip to content

Commit f03e667

Browse files
zhamborovazhamborova
committed
made widgets work somewhat
1 parent 649ca5c commit f03e667

File tree

8 files changed

+158
-69
lines changed

8 files changed

+158
-69
lines changed

‎src/actions/widgetActions.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,22 @@ export const UPDATE_WIDGET = "UPDATE_WIDGET";
44
export const CREATE_WIDGET = "CREATE_WIDGET";
55
export const FIND_WIDGETS_FOR_TOPIC= "FIND_WIDGETS_FOR_TOPIC"
66

7-
export const deleteWidget =(dispatch, id)=>(
7+
export const deleteWidget =(dispatch, id)=>
8+
89
widgetServices.deleteWidgetService(id).then(status =>
910
dispatch({
1011
type: DELETE_WIDGET,
1112
id
1213
})
13-
))
14+
)
1415

1516

16-
export const updateWidget =(dispatch, widget)=>(
17-
widgetServices.updateWidgetService(widget._id, widget)
17+
export const updateWidget =(dispatch, widget)=>{
18+
widgetServices.updateWidgetService(widget)
1819
.then(status => dispatch( {
1920
type: UPDATE_WIDGET,
20-
widget
21-
})
22-
))
21+
widget}))
22+
}
2323

2424
export const createWidgetForTopic=(dispatch, topicId)=>{
2525
widgetServices.createWidgetForTopic(topicId, {

‎src/components/CourseEditorComponent/CourseEditor.js‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ import {findModulesForCourse} from "../../actions/moduleActions"
77
import {connect} from "react-redux";
88
import {findCourseById} from "../../actions/courseActions"
99
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
10-
import {faTimes} from "@fortawesome/free-solid-svg-icons";
10+
import {faPlus, faTimes} from "@fortawesome/free-solid-svg-icons";
1111
import {findLessonsForModule} from "../../actions/lessonActions";
1212
import {Link} from "react-router-dom";
1313
import {findTopicsForLesson} from "../../actions/topicsActions";
1414
import WidgetList from "../WidgetListComponent/WidgetList";
15-
import {findWidgetsForTopic} from "../../actions/widgetActions";
15+
import {createWidgetForTopic, findWidgetsForTopic} from "../../actions/widgetActions";
1616

1717
class CourseEditor extends React.Component{
1818

@@ -78,10 +78,7 @@ class CourseEditor extends React.Component{
7878
</div>
7979

8080

81-
8281
</div>
83-
84-
8582
)
8683
}
8784

@@ -95,7 +92,8 @@ const propertyToDispatchMapper = (dispatch) => ({
9592
findCourseById: (courseId) => findCourseById(dispatch,courseId),
9693
findLessonsForModule: (moduleId) => findLessonsForModule(dispatch,moduleId),
9794
findTopicsForLesson: (lessonId) => findTopicsForLesson(dispatch, lessonId),
98-
findWidgetsForTopic: (topicId) => findWidgetsForTopic(dispatch,topicId)
95+
findWidgetsForTopic: (topicId) => findWidgetsForTopic(dispatch,topicId),
96+
9997
})
10098

10199
export default connect(stateToProperty, propertyToDispatchMapper)(CourseEditor)

‎src/components/CourseEditorComponent/CourseEditor.style.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,3 +114,16 @@
114114
background-color: darkred;
115115

116116
}
117+
118+
.widget-add-button{
119+
width: 40px!important;
120+
height: 40px;
121+
position: sticky;
122+
left: 93%;
123+
margin-top: auto;
124+
125+
}
126+
127+
.widget-add-button > path {
128+
fill: red;
129+
}

‎src/components/HeadingWidget/HeadingWidget.js‎

Lines changed: 59 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,28 +7,59 @@ import "./HeadingWidget.css"
77
class HeadingWidget extends React.Component {
88

99
state={
10-
text:"",
11-
widgetName:"",
12-
size:"",
13-
editing: false
10+
className: null,
11+
height: null,
12+
html: null,
13+
id: "567",
14+
name: "Widget A",
15+
order: 0,
16+
size: "h1",
17+
src: null,
18+
text: "Lorem Ipsum",
19+
topicId: "5f8d56f05595540017f92454",
20+
type: "HEADING",
21+
width: null,
1422
}
1523

16-
render(){
17-
return(<div className="heading-container">
24+
componentDidMount() {
25+
this.setState({
26+
id: this.props.widget.id,
27+
text:this.props.widget.text,
28+
name: this.props.widget.name,
29+
size: this.props.widget.size,
30+
type: this.props.widget.type,
31+
order: this.props.widget.order,
32+
topicId: this.props.widget.topicId,
33+
})
34+
35+
}
36+
37+
38+
render() {
39+
return (<div className="heading-container">
1840
<div className="heading-menu d-flex mb-2">
1941
<h3>Heading widget</h3>
2042
{this.state.editing ?
2143
<>
22-
<select className=" widget-type form-control w-25 mb-2">
23-
<option>Paragraph</option>
24-
<option> Heading </option>
44+
<select className=" widget-type form-control w-25 mb-2"
45+
value={this.state.type}
46+
onChange={(e) => this.setState({type: e.target.value})}>
47+
<option value="HEADING"> Heading</option>
48+
<option value="PARAGRAPH">Paragraph</option>
2549
</select>
2650
<FontAwesomeIcon icon={faCheck} className="widget-update-btn "
27-
onClick={()=> this.setState({editing:false}) }/>
28-
<FontAwesomeIcon icon={faTimes} className="widget-delete-btn"/></>:
51+
onClick={() => {
52+
this.setState({editing: false});
53+
this.props.updateWidget(this.state)
54+
}}/>
55+
<FontAwesomeIcon icon={faTimes}
56+
className="widget-delete-btn"
57+
onClick={() => this.props.deleteWidget(this.state.id)} />
58+
59+
</> :
2960
<>
30-
<FontAwesomeIcon onClick={()=> this.setState({editing:true})}
31-
icon={faPenAlt} className="widget-edit-btn"/>
61+
<FontAwesomeIcon onClick={() => this.setState({editing: true})}
62+
icon={faPenAlt} className="widget-edit-btn"/>
3263
</>
3364
}
3465
</div>
@@ -37,22 +68,27 @@ class HeadingWidget extends React.Component {
3768
<>
3869
<input className="form-control heading-text mb-2"
3970
placeholder="Heading text"
40-
value= {this.state.text}
41-
onChange={(e)=> this.setState({text:e.target.value})}/>
71+
value={this.state.text}
72+
onChange={(e) => this.setState({text: e.target.value})}/>
73+
74+
<select className="form-control mb-2"
75+
value={this.state.size}
76+
onChange={(e) => this.setState({size: e.target.value})}>
4277

43-
<select className="form-control mb-2" >
4478
<option value={"h1"}>Heading 1</option>
4579
<option value={"h2"}>Heading 2</option>
4680
<option value={"h3"}>Heading 3</option>
4781
<option value={"h4"}>Heading 4</option>
4882
<option value={"h5"}>Heading 5</option>
4983
<option value={"h6"}>Heading 6</option>
5084
</select>
51-
<input className="widget-name form-control mb-2"
52-
placeholder="Widget Name"
53-
value={this.state.widgetName}
54-
onChange={(e)=>{this.setState({widgetName:e.target.value})}}/></>
55-
: null }
85+
<input className="widget-name form-control mb-2"
86+
placeholder="Widget Name"
87+
value={this.state.name}
88+
onChange={(e) => {
89+
this.setState({name: e.target.value})
90+
}}/></>
91+
: null}
5692
</div>
5793
<div className="heading-preview">
5894
{this.state.editing ? <h4>Preview</h4> : null}
@@ -61,6 +97,8 @@ class HeadingWidget extends React.Component {
6197
</div>
6298
</div>
6399
)
100+
101+
64102
}
65103
}
66104

‎src/components/ParagraphWidget/ParagraphWidget.js‎

Lines changed: 44 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,52 @@ import "./ParagraphWidget.css"
77
class ParagraphWidget extends React.Component {
88

99
state={
10-
text:"",
11-
widgetName:"",
12-
editing: false
10+
className: null,
11+
height: null,
12+
html: null,
13+
id: "",
14+
name: "",
15+
order: 0,
16+
size: "",
17+
src: null,
18+
text: "",
19+
topicId: "",
20+
type: "PARAGRAPH",
21+
width: null,
1322
}
1423

24+
componentDidMount() {
25+
this.setState({
26+
id: this.props.widget.id,
27+
text:this.props.widget.text,
28+
name: this.props.widget.name,
29+
size: this.props.widget.size,
30+
type: this.props.widget.type,
31+
order: this.props.widget.order,
32+
topicId: this.props.widget.topicId,
33+
})
34+
35+
}
1536
render(){
1637
return(<div className="paragraph-container">
1738
<div className="paragraph-menu d-flex mb-2">
1839
<h3>Paragraph widget</h3>
1940
{this.state.editing ?
20-
<>
21-
<select className=" widget-type form-control w-25">
22-
<option>Paragraph</option>
23-
<option> Heading </option>
24-
</select>
25-
<FontAwesomeIcon icon={faCheck} className="module-update-btn"
26-
onClick={()=> this.setState({editing:false}) }/>
27-
<FontAwesomeIcon icon={faTimes} className="widget-delete-btn"/></>:
41+
<><select className=" widget-type form-control w-25 mb-2"
42+
value={this.state.type}
43+
onChange={(e) => this.setState({type: e.target.value})}>
44+
<option value="HEADING"> Heading</option>
45+
<option value="PARAGRAPH">Paragraph</option>
46+
</select>
47+
<FontAwesomeIcon icon={faCheck} className="widget-update-btn "
48+
onClick={() => {
49+
this.setState({editing: false});
50+
this.props.updateWidget(this.state)
51+
}}/>
52+
<FontAwesomeIcon icon={faTimes}
53+
className="widget-delete-btn"
54+
onClick={() => this.props.deleteWidget(this.state.id)} />
55+
</>:
2856
<>
2957
<FontAwesomeIcon onClick={()=> this.setState({editing:true})}
3058
icon={faPenAlt} className="widget-edit-btn"/>
@@ -40,12 +68,14 @@ class ParagraphWidget extends React.Component {
4068
onChange={(e)=>{this.setState({text:e.target.value})}}/>
4169
<input className="widget-name form-control"
4270
placeholder="Widget Name"
43-
value={this.state.widgetName}
44-
onChange={(e)=>{this.setState({widgetName:e.target.value})}}/>
71+
value={this.state.name}
72+
onChange={(e)=>{this.setState({name:e.target.value})}}/>
4573
</> : null }
4674
</div>
4775
<div className="paragraph-preview">
48-
{this.state.editing ? <h4>Preview</h4> : null}
76+
{this.state.editing ?
77+
<h4>Preview</h4> :
78+
null}
4979
<p>{this.state.text}</p>
5080

5181
</div>

‎src/components/WidgetListComponent/WidgetList.js‎

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,39 @@ import React from "react";
22
import ParagraphWidget from "../ParagraphWidget/ParagraphWidget";
33
import HeadingWidget from "../HeadingWidget/HeadingWidget";
44
import {connect} from "react-redux";
5-
import {createWidgetForTopic} from "../../actions/widgetActions";
5+
import {createWidgetForTopic, deleteWidget, updateWidget} from "../../actions/widgetActions";
6+
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
7+
import {faPlus} from "@fortawesome/free-solid-svg-icons";
68

79

8-
const selectWidget = (type, widget) => {
10+
const selectWidget = (type, widget, deleteWidget, updateWidget) => {
911

1012
switch (type) {
1113
case "HEADING":
12-
return <HeadingWidget widget={widget}/>;
14+
return <HeadingWidget widget={widget}
15+
deleteWidget={deleteWidget}
16+
updateWidget={updateWidget}/>;
1317
case "PARAGRAPH" :
14-
return <ParagraphWidget widget={widget}/>
18+
return <ParagraphWidget widget={widget}
19+
deleteWidget={deleteWidget}
20+
updateWidget={updateWidget}/>
1521

1622
}
1723
}
1824

19-
const WidgetList = ({url, widgets}) => {
20-
return <ul className="container m-auto">
25+
const WidgetList = ({url, widgets, deleteWidget, updateWidget, createWidget}) => {
26+
console.log(widgets)
27+
return url.topicId ? <ul className="container m-auto">
2128
{widgets.map(widget =>
2229
<li key={widget.id}>
23-
{selectWidget(widget.type, widget)}
30+
{selectWidget(widget.type, widget, deleteWidget, updateWidget)}
2431
</li>
2532
)
2633
}
27-
</ul>
34+
<li>
35+
<FontAwesomeIcon icon={faPlus} className="widget-add-button"
36+
onClick={()=>{createWidget(url.topicId)}}/></li>
37+
</ul> : null
2838

2939

3040
}
@@ -36,7 +46,9 @@ const stateToPropMapper = (state) => ({
3646
})
3747

3848
const dispatchMapper = (dispatch) => ({
39-
createWidgetForTopic: (topicId) => createWidgetForTopic(topicId)
49+
createWidget: (topicId) => createWidgetForTopic(dispatch,topicId),
50+
deleteWidget: (widgetId) => deleteWidget(dispatch, widgetId),
51+
updateWidget: (widget) => updateWidget(dispatch, widget)
4052
})
4153

4254

‎src/reducers/widgetReducer.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,20 +18,20 @@ const widgetReducer = (state=initialState, action) => {
1818
action.widget]
1919
}
2020
case FIND_WIDGETS_FOR_TOPIC :
21-
console.log(action.widgets)
21+
2222
return {
2323
...state,
2424
widgets: action.widgets,
2525
}
2626
case DELETE_WIDGET:
2727
return {
2828
...state,
29-
widgets: state.widgets.filter(widget => action.id !== widget._id)
29+
widgets: state.widgets.filter(widget => action.id !== widget.id)
3030
}
3131
case UPDATE_WIDGET:
3232
return {
3333
...state,
34-
widgets: state.widgets.map(widget => widget._id === action.widget._id ?
34+
widgets: state.widgets.map(widget => widget.id === action.widget.id ?
3535
action.widget : widget)
3636
}
3737

0 commit comments

Comments
 (0)