Skip to content

Commit c25f29c

Browse files
zhamborovazhamborova
committed
moving widgets up/down
1 parent f03e667 commit c25f29c

File tree

9 files changed

+168
-29
lines changed

9 files changed

+168
-29
lines changed

‎src/actions/widgetActions.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,29 @@ export const DELETE_WIDGET = "DELETE_WIDGET";
33
export const UPDATE_WIDGET = "UPDATE_WIDGET";
44
export const CREATE_WIDGET = "CREATE_WIDGET";
55
export const FIND_WIDGETS_FOR_TOPIC= "FIND_WIDGETS_FOR_TOPIC"
6+
export const WIDGET_UP = "WIDGET_UP"
7+
export const WIDGET_DOWN = "WIDGET_DOWN"
8+
9+
10+
export const moveWidgetUp = (dispatch, index) => {
11+
widgetServices.moveWidgetUp(index).then(
12+
dispatch({
13+
type: WIDGET_UP,
14+
index
15+
})
16+
)
17+
}
18+
19+
export const moveWidgetDown = (dispatch, index) => {
20+
widgetServices.moveWidgetDown(index).then(
21+
dispatch({
22+
type: WIDGET_DOWN,
23+
index
24+
})
25+
)
26+
}
27+
28+
629

730
export const deleteWidget =(dispatch, id)=>
831

‎src/components/HeadingWidget/HeadingWidget.css‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
.widget-delete-btn,.widget-update-btn{
2-
margin: auto 4px;
3-
}
4-
.widget-edit-btn{
5-
margin: auto 4px auto auto;
6-
}
7-
81

92
.heading-container{
103

‎src/components/HeadingWidget/HeadingWidget.js‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
3-
import {faCheck, faPenAlt, faTimes} from "@fortawesome/free-solid-svg-icons";
3+
import {faArrowDown, faArrowUp, faCheck, faPenAlt, faTimes} from "@fortawesome/free-solid-svg-icons";
44
import "./HeadingWidget.css"
55

66

@@ -10,13 +10,13 @@ class HeadingWidget extends React.Component {
1010
className: null,
1111
height: null,
1212
html: null,
13-
id: "567",
14-
name: "Widget A",
13+
id: "",
14+
name: "",
1515
order: 0,
1616
size: "h1",
1717
src: null,
1818
text: "Lorem Ipsum",
19-
topicId: "5f8d56f05595540017f92454",
19+
topicId: "",
2020
type: "HEADING",
2121
width: null,
2222
}
@@ -38,6 +38,8 @@ class HeadingWidget extends React.Component {
3838
render() {
3939
return (<div className="heading-container">
4040
<div className="heading-menu d-flex mb-2">
41+
42+
4143
<h3>Heading widget</h3>
4244
{this.state.editing ?
4345
<>
@@ -47,6 +49,16 @@ class HeadingWidget extends React.Component {
4749
<option value="HEADING"> Heading</option>
4850
<option value="PARAGRAPH">Paragraph</option>
4951
</select>
52+
{this.props.widget.order !== 0 ?
53+
<FontAwesomeIcon icon={faArrowUp} className="widget-up-btn"
54+
onClick={()=> this.props.moveWidgetUp(this.props.widget.order)}
55+
/>: null}
56+
57+
{this.props.lastIndex !== this.props.widget.order ?
58+
<FontAwesomeIcon icon={faArrowDown} className="widget-down-btn"
59+
onClick={()=> {
60+
this.props.moveWidgetDown(this.props.widget.order)}}
61+
/> : null}
5062
<FontAwesomeIcon icon={faCheck} className="widget-update-btn "
5163
onClick={() => {
5264
this.setState({editing: false});
@@ -95,6 +107,7 @@ class HeadingWidget extends React.Component {
95107
<p>{this.state.text}</p>
96108

97109
</div>
110+
98111
</div>
99112
)
100113

‎src/components/ParagraphWidget/ParagraphWidget.css‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
.widget-delete-btn{
2-
margin: auto 4px;
3-
}
4-
.widget-edit-btn{
5-
margin: auto 4px auto auto;
6-
}
1+
72
.paragraph-container{
83
margin: 10px;
94
border: 1px solid lightgrey;

‎src/components/ParagraphWidget/ParagraphWidget.js‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
22
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
3-
import {faCheck, faPenAlt, faTimes} from "@fortawesome/free-solid-svg-icons";
3+
import {faArrowDown, faArrowUp, faCheck, faPenAlt, faTimes} from "@fortawesome/free-solid-svg-icons";
44
import "./ParagraphWidget.css"
55

66

@@ -44,6 +44,16 @@ class ParagraphWidget extends React.Component {
4444
<option value="HEADING"> Heading</option>
4545
<option value="PARAGRAPH">Paragraph</option>
4646
</select>
47+
48+
{this.props.widget.order !== 0 ?
49+
<FontAwesomeIcon icon={faArrowUp} className="widget-up-btn"
50+
onClick={()=> this.props.moveWidgetUp(this.props.widget.order)}
51+
/>: null}
52+
{this.props.lastIndex !== this.props.widget.order ?
53+
<FontAwesomeIcon icon={faArrowDown} className="widget-down-btn"
54+
onClick={()=> {
55+
this.props.moveWidgetDown(this.props.widget.order)}}
56+
/> : null}
4757
<FontAwesomeIcon icon={faCheck} className="widget-update-btn "
4858
onClick={() => {
4959
this.setState({editing: false});

‎src/components/WidgetListComponent/WidgetList.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.widget-delete-btn,.widget-update-btn, .widget-up-btn, .widget-down-btn{
2+
margin: auto 4px;
3+
}
4+
.widget-edit-btn{
5+
margin: auto 4px auto auto;
6+
}
7+
8+
.widget-up-btn, .widget-down-btn{
9+
background: yellow;
10+
padding: 3px;
11+
width: 20px!important;
12+
height: 20px;
13+
}

‎src/components/WidgetListComponent/WidgetList.js‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,47 @@ 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, deleteWidget, updateWidget} from "../../actions/widgetActions";
5+
import {
6+
createWidgetForTopic,
7+
deleteWidget,
8+
moveWidgetDown,
9+
moveWidgetUp,
10+
updateWidget
11+
} from "../../actions/widgetActions";
612
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
713
import {faPlus} from "@fortawesome/free-solid-svg-icons";
14+
import "./WidgetList.css"
815

9-
10-
const selectWidget = (type, widget, deleteWidget, updateWidget) => {
16+
const selectWidget = (type, widget, deleteWidget, updateWidget, moveWidgetUp, moveWidgetDown,
17+
lastIndex) => {
1118

1219
switch (type) {
1320
case "HEADING":
1421
return <HeadingWidget widget={widget}
1522
deleteWidget={deleteWidget}
16-
updateWidget={updateWidget}/>;
23+
updateWidget={updateWidget}
24+
moveWidgetUp={moveWidgetUp}
25+
moveWidgetDown={moveWidgetDown}
26+
lastIndex={lastIndex}/>;
1727
case "PARAGRAPH" :
1828
return <ParagraphWidget widget={widget}
1929
deleteWidget={deleteWidget}
20-
updateWidget={updateWidget}/>
30+
updateWidget={updateWidget}
31+
moveWidgetUp={moveWidgetUp}
32+
moveWidgetDown={moveWidgetDown}
33+
lastIndex={lastIndex}/>
2134

2235
}
2336
}
2437

25-
const WidgetList = ({url, widgets, deleteWidget, updateWidget, createWidget}) => {
38+
const WidgetList = ({url, widgets, deleteWidget, updateWidget, createWidget, moveWidgetUp,
39+
moveWidgetDown}) => {
2640
console.log(widgets)
2741
return url.topicId ? <ul className="container m-auto">
2842
{widgets.map(widget =>
2943
<li key={widget.id}>
30-
{selectWidget(widget.type, widget, deleteWidget, updateWidget)}
44+
{selectWidget(widget.type, widget, deleteWidget,
45+
updateWidget, moveWidgetUp, moveWidgetDown, widgets.length -1)}
3146
</li>
3247
)
3348
}
@@ -48,7 +63,9 @@ const stateToPropMapper = (state) => ({
4863
const dispatchMapper = (dispatch) => ({
4964
createWidget: (topicId) => createWidgetForTopic(dispatch,topicId),
5065
deleteWidget: (widgetId) => deleteWidget(dispatch, widgetId),
51-
updateWidget: (widget) => updateWidget(dispatch, widget)
66+
updateWidget: (widget) => updateWidget(dispatch, widget),
67+
moveWidgetUp: (index) => moveWidgetUp(dispatch, index),
68+
moveWidgetDown: (index) => moveWidgetDown(dispatch, index)
5269
})
5370

5471

‎src/reducers/widgetReducer.js‎

Lines changed: 54 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,51 @@
1-
import {CREATE_WIDGET, DELETE_WIDGET,
2-
FIND_WIDGETS_FOR_TOPIC, UPDATE_WIDGET} from "../actions/widgetActions";
1+
import {
2+
CREATE_WIDGET, DELETE_WIDGET,
3+
FIND_WIDGETS_FOR_TOPIC, UPDATE_WIDGET, WIDGET_DOWN, WIDGET_UP
4+
} from "../actions/widgetActions";
35

46
const initialState = {
57
widgets: [],
68

79

810
}
911

12+
const moveUp = (list, index) => {
13+
14+
let temp = list[index-1];
15+
temp.order = index;
16+
let widget = list[index]
17+
widget.order = index-1;
18+
19+
list[index-1] = list[index];
20+
list[index] = temp;
21+
22+
23+
return [...list];
24+
25+
}
26+
27+
const moveDown = (list, index) => {
28+
29+
30+
let temp = list[index+1];
31+
temp.order = index;
32+
let widget = list[index]
33+
widget.order = index+1;
34+
35+
list[index+1] = list[index];
36+
list[index] = temp;
37+
38+
39+
return [...list];
40+
41+
}
42+
43+
44+
45+
46+
47+
48+
1049
const widgetReducer = (state=initialState, action) => {
1150

1251
switch (action.type) {
@@ -34,6 +73,19 @@ const widgetReducer = (state=initialState, action) => {
3473
widgets: state.widgets.map(widget => widget.id === action.widget.id ?
3574
action.widget : widget)
3675
}
76+
case WIDGET_UP:
77+
console.log('here')
78+
return {
79+
...state,
80+
widgets: moveUp(state.widgets, action.index)
81+
82+
}
83+
84+
case WIDGET_DOWN:
85+
return {
86+
...state,
87+
widgets: moveDown(state.widgets, action.index)
88+
}
3789

3890

3991

‎src/services/WidgetService.js‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,31 @@ export const updateWidgetService = (widget) =>{
3939

4040
}
4141

42+
43+
export const moveWidgetUp = (index) => {
44+
return fetch( `${widgetUrl}/moveUp/${index}`,
45+
{
46+
method: "POST",
47+
headers: {
48+
"content-type": "application/json"
49+
}
50+
}).then(response => response.json())
51+
}
52+
53+
54+
export const moveWidgetDown = (index) => {
55+
return fetch( `${widgetUrl}/moveDown/${index}`,
56+
{
57+
method: "POST",
58+
headers: {
59+
"content-type": "application/json"
60+
}
61+
}).then(response => response.json())
62+
}
63+
4264
export default {
43-
findWidgetsForTopic, createWidgetForTopic, deleteWidgetService, updateWidgetService
65+
findWidgetsForTopic, createWidgetForTopic, deleteWidgetService, updateWidgetService,
66+
moveWidgetUp, moveWidgetDown
4467

4568
}
4669

0 commit comments

Comments
 (0)