Skip to content

Commit e38f279

Browse files
AuraOfDivinityAuraOfDivinity
committed
Issues with redux
1 parent f421b31 commit e38f279

File tree

9 files changed

+261
-132
lines changed

9 files changed

+261
-132
lines changed

‎src/actions/proposalActions.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import axios from "axios";
2+
import { errorHandler } from "../utils/errorHandler";
3+
import { setRequestStatus } from "../utils/setRequestStatus";
4+
import { CREATE_PROPOSAL, GET_PROPOSAL } from "../actions/types";
5+
6+
// CREATE PROPOSAL
7+
export const createProposal = (proposalInfo) => async (dispatch) => {
8+
try {
9+
console.log("proposalInfo", proposalInfo);
10+
const res = await axios.post("/proposal", proposalInfo);
11+
dispatch(setRequestStatus(false));
12+
if (res.status === 201) {
13+
dispatch(setRequestStatus(true));
14+
console.log("proposal created in ACTION", res.data);
15+
dispatch({
16+
type: CREATE_PROPOSAL,
17+
payload: res.data.proposal || res.data.msg,
18+
});
19+
}
20+
} catch (error) {
21+
dispatch(errorHandler(error));
22+
}
23+
};
24+
25+
// GET PROPOSAL DATA
26+
export const getProposal = (proposalId) => async (dispatch) => {
27+
try {
28+
const res = await axios.get("/proposal/" + proposalId);
29+
dispatch(setRequestStatus(false));
30+
if (res.status === 200) {
31+
dispatch(setRequestStatus(true));
32+
console.log("proposal data fetched in action", res.data);
33+
dispatch({
34+
type: GET_PROPOSAL,
35+
payload: res.data.proposal || res.data.msg,
36+
});
37+
}
38+
} catch (error) {
39+
dispatch(errorHandler(error));
40+
}
41+
};

‎src/actions/types.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
export const GET_CURRENT_USER = "GET_CURRENT_USER";
2-
export const SET_CURRENT_USER = "SET_CURRENT_USER";
3-
export const RESPONSE_MSG = "RESPONSE_MSG";
1+
export const GET_CURRENT_USER = "GET_CURRENT_USER";
2+
export const SET_CURRENT_USER = "SET_CURRENT_USER";
3+
export const RESPONSE_MSG = "RESPONSE_MSG";
44
export const GET_ERRORS = "GET_ERRORS";
55
export const SET_ERROR = "SET_ERROR";
66
export const SET_STATUS = "SET_STATUS";
@@ -26,4 +26,6 @@ export const GET_USER_PROJECTS = "GET_USER_PROJECTS";
2626
export const GET_ALL_EVENTS = "GET_ALL_EVENTS";
2727
export const GET_ALL_PROJECTS = "GET_ALL_PROJECTS";
2828
export const GET_ALL_POSTS = "GET_ALL_POSTS";
29-
export const GET_USER_POSTS = "GET_USER_POSTS";
29+
export const GET_USER_POSTS = "GET_USER_POSTS";
30+
export const CREATE_PROPOSAL = "CREATE_PROPOSAL";
31+
export const GET_PROPOSAL = "GET_PROPOSAL";

‎src/reducers/index.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { combineReducers } from 'redux';
2-
import authReducers from './authReducer';
3-
import postReducers from './postReducer';
4-
import userReducers from './userReducer';
5-
import errorReducer from './errorReducer';
6-
import requestStatus from './requestStatus';
7-
import notificationReducer from './notificationReducer'
8-
import dashboardReducer from './dashboardReducer'
9-
import insightReducer from './insightReducer';
10-
import orgReducer from './orgReducer';
11-
import eventReducer from './eventReducer';
12-
import projectReducer from './projectReducer';
1+
import { combineReducers } from "redux";
2+
import authReducers from "./authReducer";
3+
import postReducers from "./postReducer";
4+
import userReducers from "./userReducer";
5+
import errorReducer from "./errorReducer";
6+
import requestStatus from "./requestStatus";
7+
import notificationReducer from "./notificationReducer";
8+
import dashboardReducer from "./dashboardReducer";
9+
import insightReducer from "./insightReducer";
10+
import orgReducer from "./orgReducer";
11+
import eventReducer from "./eventReducer";
12+
import projectReducer from "./projectReducer";
13+
import proposalReducer from "./proposalReducer";
1314

1415
const rootReducer = combineReducers({
1516
auth: authReducers,
@@ -22,7 +23,8 @@ const rootReducer = combineReducers({
2223
org: orgReducer,
2324
event: eventReducer,
2425
project: projectReducer,
25-
status: requestStatus
26+
status: requestStatus,
27+
proposal: proposalReducer,
2628
});
2729

28-
export default rootReducer;
30+
export default rootReducer;

‎src/reducers/proposalReducer.js‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { CREATE_PROPOSAL, GET_PROPOSAL } from "../actions/types";
2+
3+
const initialState = {
4+
createdProposal: {},
5+
fetchedProposal: {},
6+
proposalIsFetched: false,
7+
};
8+
9+
export default (state = initialState, action) => {
10+
switch (action.type) {
11+
case CREATE_PROPOSAL: {
12+
console.log("in reducer CREATE_PROPOSAL switch case");
13+
return {
14+
...state,
15+
createdProposal: action.payload,
16+
};
17+
}
18+
case GET_PROPOSAL: {
19+
console.log("in reducer");
20+
return {
21+
...state,
22+
fetchedProposal: action.payload,
23+
};
24+
}
25+
default: {
26+
return state;
27+
}
28+
}
29+
};

‎src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js‎

Lines changed: 57 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import React, { Component } from "react";
22
import userIcon2 from "../../../../../images/userIcon2.jpg";
33
import { Form, ListGroup, Button } from "react-bootstrap";
44
import "./DiscussionComments.scss";
5+
import Carousel, { Modal, ModalGateway } from "react-images";
56

67
class DiscussionComments extends Component {
78
constructor(props) {
89
super(props);
910
this.state = {
1011
commentContent: "",
1112
commentItems: this.props.commentItems,
13+
imageModalOpen: false,
1214
};
1315
}
1416

@@ -41,13 +43,17 @@ class DiscussionComments extends Component {
4143
});
4244
};
4345

46+
toggleModal = () => {
47+
this.setState((state) => ({ imageModalOpen: !state.imageModalOpen }));
48+
};
49+
4450
render() {
4551
const comments = this.props.commentItems;
4652
return (
4753
<div className="commentbox">
4854
<div className="comments">
4955
<div className="comment-title">Comments</div>
50-
<div className="comments-containers" style={{ minHeight: "75vh" }}>
56+
<div className="comments-containers">
5157
<ListGroup>{comments}</ListGroup>
5258
</div>
5359
<div className="chat-container">
@@ -56,7 +62,7 @@ class DiscussionComments extends Component {
5662
style={{
5763
display: "inline-block",
5864
marginRight: "10px",
59-
width: "80%",
65+
width: "70%",
6066
}}
6167
>
6268
<Form.Control
@@ -68,14 +74,62 @@ class DiscussionComments extends Component {
6874
</Form>
6975
<Button
7076
size="sm"
71-
style={{ display: "inline-block" }}
7277
onClick={this.handleComment}
78+
style={{ width: "25%" }}
7379
>
7480
Comment
7581
</Button>
7682
</div>
7783
</div>
7884
</div>
85+
<div class="images">
86+
<div className="images-title">Attached Images</div>
87+
<div
88+
style={{
89+
overflow: "hidden",
90+
marginLeft: "2",
91+
marginRight: "2",
92+
padding: "12px",
93+
border: "1px solid black",
94+
height: "100%",
95+
border: "solid 1px #dfe9f1",
96+
}}
97+
>
98+
{this.props.images.map((item, index) => {
99+
return (
100+
<div
101+
style={{
102+
boxSizing: "border-box",
103+
float: "left",
104+
margin: "2px",
105+
marginRight: "10px",
106+
overflow: "hidden",
107+
paddingBottom: "16%",
108+
position: "relative",
109+
width: `calc(25% - ${2 * 2}px)`,
110+
"&:hover": {
111+
opacity: 0.9,
112+
},
113+
}}
114+
>
115+
<img
116+
onClick={this.toggleModal}
117+
src={item.source}
118+
style={{ maxWidth: "100%", position: "absolute" }}
119+
/>
120+
</div>
121+
);
122+
})}
123+
</div>
124+
125+
<ModalGateway>
126+
{this.state.imageModalOpen ? (
127+
<Modal onClose={this.toggleModal}>
128+
<Carousel views={this.props.images} />
129+
</Modal>
130+
) : null}
131+
</ModalGateway>
132+
</div>
79133
</div>
80134
);
81135
}

‎src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.scss‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,24 @@
11
.commentbox {
2+
display: flex;
3+
flex-direction: column;
4+
25
.comments {
6+
flex: 2;
37
.comment-title {
4-
margin-top: 10px;
58
font-family: Inter;
69
font-style: normal;
710
font-weight: 600;
811
font-size: 22px;
912
line-height: 27px;
10-
13+
margin-top: 0px;
1114
color: #000000;
1215
}
1316
.comments-containers {
1417
border: solid 1px #dfe9f1;
1518
overflow: auto;
1619
border-radius: 5px;
1720
margin: 5px 5px -1px 5px;
18-
max-height: 73vh;
21+
height: 300px;
1922

2023
.comment-item {
2124
display: flex;
@@ -81,4 +84,17 @@
8184
}
8285
}
8386
}
87+
.images {
88+
flex: 1;
89+
90+
.images-title {
91+
font-family: Inter;
92+
font-style: normal;
93+
font-weight: 600;
94+
font-size: 22px;
95+
line-height: 27px;
96+
margin-top: 0px;
97+
color: #000000;
98+
}
99+
}
84100
}

‎src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.js‎

Lines changed: 1 addition & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -226,51 +226,6 @@ class DiscussionContent extends Component {
226226
onEditorChange={this.handleTinyEditorChange}
227227
/>
228228
</div>
229-
<div className="attached-images">
230-
<div className="images-title">Attached Images</div>
231-
<div
232-
style={{
233-
overflow: "hidden",
234-
marginLeft: "2",
235-
marginRight: "2",
236-
}}
237-
>
238-
{images.map((item, index) => {
239-
return (
240-
<div
241-
style={{
242-
boxSizing: "border-box",
243-
float: "left",
244-
margin: "2px",
245-
marginRight: "10px",
246-
overflow: "hidden",
247-
paddingBottom: "16%",
248-
position: "relative",
249-
width: `calc(25% - ${2 * 2}px)`,
250-
251-
"&:hover": {
252-
opacity: 0.9,
253-
},
254-
}}
255-
>
256-
<img
257-
onClick={this.toggleModal}
258-
src={item.source}
259-
style={{ maxWidth: "100%", position: "absolute" }}
260-
/>
261-
</div>
262-
);
263-
})}
264-
</div>
265-
266-
<ModalGateway>
267-
{imageModalOpen ? (
268-
<Modal onClose={this.toggleModal}>
269-
<Carousel views={this.state.images} />
270-
</Modal>
271-
) : null}
272-
</ModalGateway>
273-
</div>
274229
</div>
275230
<div className="comments">
276231
<DiscussionComments
@@ -282,6 +237,7 @@ class DiscussionContent extends Component {
282237
isAuthor={this.state.author === this.state.userId}
283238
author={this.state.author}
284239
handleComment={this.handleComment}
240+
images={this.state.images}
285241
/>
286242
</div>
287243
<RequestChanges

‎src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.scss‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
height: 100vh;
55
flex-direction: column;
66
.discussion-toppanel {
7-
flex-grow: 1;
7+
flex: 0.5;
8+
89
display: flex;
910
flex-direction: row;
1011
.discussion-title {
1112
flex-grow: 5;
12-
1313
.title-text {
1414
font-family: Inter;
1515
font-style: normal;
@@ -48,15 +48,14 @@
4848
}
4949
}
5050
.discussion-bottompanel {
51-
flex-grow: 4;
51+
flex: 4;
5252
display: flex;
5353

5454
.proposal-preview {
55-
margin-top: 20px;
5655
flex: 2;
5756
display: flex;
5857
flex-direction: column;
59-
max-height: 80vh;
58+
max-height: 85vh;
6059

6160
.proposal-text {
6261
flex: 4;

0 commit comments

Comments
 (0)