Skip to content

Commit 5bc61c7

Browse files
fluid14fluid14
committed
add redirect after add article
1 parent 069177e commit 5bc61c7

14 files changed

+247
-56
lines changed

‎src/components/Map/Map.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import { Map, GoogleApiWrapper } from 'google-maps-react';
5+
6+
const mapStyles = {
7+
width: '100%',
8+
height: '400px',
9+
};
10+
11+
const MapWrap = styled.div`
12+
margin-top: 2em;
13+
height: 400px;
14+
width: 100%;
15+
16+
& div {
17+
height: 400px;
18+
}
19+
`;
20+
21+
const MapContainer = ({ google, lat, lng }) => (
22+
<MapWrap>
23+
<Map
24+
google={google}
25+
zoom={14}
26+
style={mapStyles}
27+
initialCenter={{
28+
lat: { lat },
29+
lng: { lng },
30+
}}
31+
/>
32+
</MapWrap>
33+
);
34+
35+
MapContainer.propTypes = {
36+
lat: PropTypes.string.isRequired,
37+
lng: PropTypes.number.isRequired,
38+
google: PropTypes.element.isRequired,
39+
};
40+
41+
export default GoogleApiWrapper({
42+
apiKey: 'api_key',
43+
})(MapContainer);

‎src/components/Preloader/PreloaderNewArticle.js

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React, { Component, useState, useEffect } from 'react';
2+
import styled, { css } from 'styled-components/macro';
3+
4+
const PreloaderWrap = styled.div`
5+
position: fixed;
6+
top: 0;
7+
left: 0;
8+
bottom: 0;
9+
right: 0;
10+
background-color: #fff;
11+
display: flex;
12+
justify-content: center;
13+
align-items: center;
14+
z-index: 99;
15+
opacity: 1;
16+
transition: 0.4s ease;
17+
`;
18+
19+
const PreloaderNewArticle = () => {
20+
return (
21+
<PreloaderWrap>
22+
<div className="spinner-border text-info" role="status">
23+
<span className="sr-only">Loading...</span>
24+
</div>
25+
</PreloaderWrap>
26+
);
27+
};
28+
export default PreloaderNewArticle;

‎src/views/NewArticleView.js

+12-11
Original file line numberDiff line numberDiff line change
@@ -29,26 +29,26 @@ const LayoutName = styled.p`
2929
`;
3030

3131
class NewArticleView extends Component {
32-
chooseRenderForm(id, articleId) {
32+
chooseRenderForm(id, articleId, history) {
3333
switch (id) {
3434
case 'gallery_page':
35-
return <GalleryForm edit={articleId} />;
35+
return <GalleryForm edit={articleId} history={history} />;
3636
case 'hero_page':
37-
return <HeroForm edit={articleId} />;
37+
return <HeroForm edit={articleId} history={history} />;
3838
case 'simple_page':
39-
return <SimpleTextForm edit={articleId} />;
39+
return <SimpleTextForm edit={articleId} history={history} />;
4040
case 'ilustrated_page':
41-
return <IlustratedArticleForm edit={articleId} />;
41+
return <IlustratedArticleForm edit={articleId} history={history} />;
4242
case 'big_slider_page':
43-
return <SliderForm edit={articleId} />;
43+
return <SliderForm edit={articleId} history={history} />;
4444
case 'article':
45-
return <ArticleForm edit={articleId} />;
45+
return <ArticleForm edit={articleId} history={history} />;
4646
case 'tiled_article_page':
47-
return <ArticleTilesForm edit={articleId} />;
47+
return <ArticleTilesForm edit={articleId} history={history} />;
4848
case 'bottom_tiled_page':
49-
return <ArticleBottomTileForm edit={articleId} />;
49+
return <ArticleBottomTileForm edit={articleId} history={history} />;
5050
default:
51-
return <ArticleForm edit={articleId} />;
51+
return <ArticleForm edit={articleId} history={history} />;
5252
}
5353
}
5454

@@ -77,6 +77,7 @@ class NewArticleView extends Component {
7777

7878
render() {
7979
const {
80+
history,
8081
match: {
8182
params: { id, articleId },
8283
},
@@ -97,7 +98,7 @@ class NewArticleView extends Component {
9798
)}
9899
<LayoutName>{this.formName(id)}</LayoutName>
99100
<Row>
100-
<Container>{this.chooseRenderForm(id, articleId)}</Container>
101+
<Container>{this.chooseRenderForm(id, articleId, history)}</Container>
101102
</Row>
102103
</StyledContainer>
103104
</WithoutHeroImg>

‎src/views/forms/ArticleBottomTileForm.js

+19-5
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,22 @@ import convertToBase64 from './convertToBase64';
88
import getArticle from '../templates/getArticle';
99
import editArticle from './editArticle';
1010
import StyledCard from '../../components/StyledCard/StyledCard';
11+
import PreloaderNewArticle from '../../components/Preloader/PreloaderNewArticle';
1112

1213
class ArticleBottomTileForm extends Component {
1314
state = {
15+
preloader: false,
1416
file: null,
1517
base64URL: [],
1618
article: {},
1719
};
1820

21+
showPreloader = () => {
22+
this.setState({
23+
preloader: true,
24+
});
25+
};
26+
1927
componentDidMount() {
2028
const { edit } = this.props;
2129
if (edit) {
@@ -69,8 +77,8 @@ class ArticleBottomTileForm extends Component {
6977
};
7078

7179
render() {
72-
const { edit } = this.props;
73-
const { article } = this.state;
80+
const { edit, history } = this.props;
81+
const { article, preloader } = this.state;
7482
console.log(article);
7583
return (
7684
<UserContextConsumer>
@@ -87,9 +95,9 @@ class ArticleBottomTileForm extends Component {
8795
data.image1 = this.state.base64URL[1];
8896
data.image2 = this.state.base64URL[2];
8997
if (edit) {
90-
editArticle(edit, pageType, data);
98+
editArticle(edit, pageType, data, history);
9199
} else {
92-
addArticle(id, pageType, data);
100+
addArticle(id, pageType, data, history);
93101
}
94102
setSubmitting(false);
95103
}}
@@ -222,9 +230,15 @@ class ArticleBottomTileForm extends Component {
222230
</StyledCard>
223231
</Col>
224232
<Col>
225-
<Button color="info" type="submit" disabled={isSubmitting}>
233+
<Button
234+
color="info"
235+
onClick={this.showPreloader}
236+
type="submit"
237+
disabled={isSubmitting}
238+
>
226239
Dodaj
227240
</Button>
241+
{preloader && <PreloaderNewArticle />}
228242
</Col>
229243
</Row>
230244
</form>

‎src/views/forms/ArticleForm.js

+19-5
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,22 @@ import convertToBase64 from './convertToBase64';
88
import getArticle from '../templates/getArticle';
99
import editArticle from './editArticle';
1010
import StyledCard from '../../components/StyledCard/StyledCard';
11+
import PreloaderNewArticle from '../../components/Preloader/PreloaderNewArticle';
1112

1213
class ArticleForm extends Component {
1314
state = {
15+
preloader: false,
1416
file: null,
1517
base64URL: [],
1618
article: {},
1719
};
1820

21+
showPreloader = () => {
22+
this.setState({
23+
preloader: true,
24+
});
25+
};
26+
1927
componentDidMount() {
2028
const { edit } = this.props;
2129
if (edit) {
@@ -69,8 +77,8 @@ class ArticleForm extends Component {
6977
};
7078

7179
render() {
72-
const { edit } = this.props;
73-
const { article } = this.state;
80+
const { edit, history } = this.props;
81+
const { article, preloader } = this.state;
7482
console.log(article);
7583
return (
7684
<UserContextConsumer>
@@ -89,9 +97,9 @@ class ArticleForm extends Component {
8997
data.image2 = base64URL[2];
9098
data.image3 = base64URL[3];
9199
if (edit) {
92-
editArticle(edit, pageType, data);
100+
editArticle(edit, pageType, data, history);
93101
} else {
94-
addArticle(id, pageType, data);
102+
addArticle(id, pageType, data, history);
95103
}
96104
setSubmitting(false);
97105
}}
@@ -211,9 +219,15 @@ class ArticleForm extends Component {
211219
</StyledCard>
212220
</Col>
213221
<Col>
214-
<Button color="info" type="submit" disabled={isSubmitting}>
222+
<Button
223+
color="info"
224+
onClick={this.showPreloader}
225+
type="submit"
226+
disabled={isSubmitting}
227+
>
215228
Dodaj
216229
</Button>
230+
{preloader && <PreloaderNewArticle />}
217231
</Col>
218232
</Row>
219233
</form>

‎src/views/forms/ArticleTilesForm.js

+19-5
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,11 @@ import convertToBase64 from './convertToBase64';
88
import getArticle from '../templates/getArticle';
99
import editArticle from './editArticle';
1010
import StyledCard from '../../components/StyledCard/StyledCard';
11+
import PreloaderNewArticle from '../../components/Preloader/PreloaderNewArticle';
1112

1213
class ArticleTilesForm extends Component {
1314
state = {
15+
preloader: false,
1416
file: null,
1517
base64URL: [],
1618
article: {},
@@ -23,6 +25,12 @@ class ArticleTilesForm extends Component {
2325
}
2426
}
2527

28+
showPreloader = () => {
29+
this.setState({
30+
preloader: true,
31+
});
32+
};
33+
2634
changeStateArticle = article => {
2735
this.setState({
2836
article,
@@ -75,8 +83,8 @@ class ArticleTilesForm extends Component {
7583
};
7684

7785
render() {
78-
const { edit } = this.props;
79-
const { article } = this.state;
86+
const { edit, history } = this.props;
87+
const { article, preloader } = this.state;
8088
console.log(article);
8189
return (
8290
<UserContextConsumer>
@@ -96,9 +104,9 @@ class ArticleTilesForm extends Component {
96104
data.tile_image2 = base64URL[3];
97105
data.tile_image3 = base64URL[4];
98106
if (edit) {
99-
editArticle(edit, pageType, data);
107+
editArticle(edit, pageType, data, history);
100108
} else {
101-
addArticle(id, pageType, data);
109+
addArticle(id, pageType, data, history);
102110
}
103111
setSubmitting(false);
104112
}}
@@ -257,9 +265,15 @@ class ArticleTilesForm extends Component {
257265
</StyledCard>
258266
</Col>
259267
<Col>
260-
<Button color="info" type="submit" disabled={isSubmitting}>
268+
<Button
269+
color="info"
270+
onClick={this.showPreloader}
271+
type="submit"
272+
disabled={isSubmitting}
273+
>
261274
Dodaj
262275
</Button>
276+
{preloader && <PreloaderNewArticle />}
263277
</Col>
264278
</Row>
265279
</form>

‎src/views/forms/GalleryForm.js

+19-5
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,22 @@ import convertToBase64 from './convertToBase64';
88
import getArticle from '../templates/getArticle';
99
import editArticle from './editArticle';
1010
import StyledCard from '../../components/StyledCard/StyledCard';
11+
import PreloaderNewArticle from '../../components/Preloader/PreloaderNewArticle';
1112

1213
class GalleryForm extends Component {
1314
state = {
15+
preloader: false,
1416
file: null,
1517
base64URL: [],
1618
article: {},
1719
};
1820

21+
showPreloader = () => {
22+
this.setState({
23+
preloader: true,
24+
});
25+
};
26+
1927
componentDidMount() {
2028
const { edit } = this.props;
2129
if (edit) {
@@ -79,8 +87,8 @@ class GalleryForm extends Component {
7987
};
8088

8189
render() {
82-
const { edit } = this.props;
83-
const { article } = this.state;
90+
const { edit, history } = this.props;
91+
const { article, preloader } = this.state;
8492
console.log(article);
8593
return (
8694
<UserContextConsumer>
@@ -107,9 +115,9 @@ class GalleryForm extends Component {
107115
data.image9 = base64URL[10];
108116
console.log(data);
109117
if (edit) {
110-
editArticle(edit, pageType, data);
118+
editArticle(edit, pageType, data, history);
111119
} else {
112-
addArticle(id, pageType, data);
120+
addArticle(id, pageType, data, history);
113121
}
114122
setSubmitting(false);
115123
}}
@@ -286,9 +294,15 @@ class GalleryForm extends Component {
286294
</StyledCard>
287295
</Col>
288296
<Col>
289-
<Button color="info" type="submit" disabled={isSubmitting}>
297+
<Button
298+
color="info"
299+
onClick={this.showPreloader}
300+
type="submit"
301+
disabled={isSubmitting}
302+
>
290303
Dodaj
291304
</Button>
305+
{preloader && <PreloaderNewArticle />}
292306
</Col>
293307
</Row>
294308
</form>

0 commit comments

Comments
 (0)