Skip to content

Commit e1dae78

Browse files
nataliauvarovanataliauvarova
authored
Merge pull request #1213 from nataliauvarova/func_components
Func components
2 parents eefd61a + cfb4753 commit e1dae78

File tree

14 files changed

+1489
-1694
lines changed

14 files changed

+1489
-1694
lines changed

‎src/components/ConfirmModal/index.js‎

Lines changed: 20 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,32 @@
1-
import React from "react";
1+
import React, { useContext } from "react";
22
import { connect } from "react-redux";
33
import { Confirm } from "semantic-ui-react";
44
import { branch, compose, renderNothing } from "recompose";
55
import { bindActionCreators } from "redux";
66

77
import { closeModal } from "ducks/confirm";
8+
import TranslationContext from "Layout/TranslationContext";
89

9-
class ConfirmModal extends React.Component {
10-
constructor(props) {
11-
super(props);
12-
this.handleConfirm = this.handleConfirm.bind(this);
13-
}
10+
const ConfirmModal = ({ callback, closeModal, content, buttonConfirm, buttonCancel }) => {
11+
const getTranslation = useContext(TranslationContext);
1412

15-
handleConfirm() {
16-
this.props.callback();
17-
this.props.closeModal();
18-
}
13+
const handleConfirm = () => {
14+
callback();
15+
closeModal();
16+
};
1917

20-
render() {
21-
return (
22-
<Confirm
23-
content={this.props.content}
24-
onCancel={this.props.closeModal}
25-
onConfirm={this.handleConfirm}
26-
open={true}
27-
className="lingvo-confirm"
28-
/>
29-
);
30-
}
31-
}
18+
return (
19+
<Confirm
20+
content={content}
21+
onCancel={closeModal}
22+
onConfirm={handleConfirm}
23+
open={true}
24+
className="lingvo-confirm"
25+
confirmButton={buttonConfirm || "OK"}
26+
cancelButton={buttonCancel || getTranslation("Cancel")}
27+
/>
28+
);
29+
};
3230

3331
export default compose(
3432
connect(

‎src/components/CreateOrganizationModal/index.js‎

Lines changed: 43 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useCallback, useState, useContext } from "react";
22
import { connect } from "react-redux";
33
import { Button, Modal } from "semantic-ui-react";
44
import { gql } from "@apollo/client";
@@ -12,35 +12,23 @@ import Translations from "components/Translation2";
1212
import { closeModal as closeCreateOrganizationModal } from "ducks/createOrganization";
1313
import TranslationContext from "Layout/TranslationContext";
1414
import { organizationsQuery } from "pages/Organizations";
15-
import { compositeIdToString } from "utils/compositeId";
1615

1716
import "./style.scss";
1817

19-
class CreateOrganizationModal extends React.Component {
20-
constructor(props) {
21-
super(props);
22-
this.state = {
23-
translations: [],
24-
translations_about: []
25-
};
18+
const CreateOrganizationModal = ({ visible, closeCreateOrganizationModal, createOrganization }) => {
19+
const getTranslation = useContext(TranslationContext);
2620

27-
this.saveOrganization = this.saveOrganization.bind(this);
28-
this.isSaveDisabled = this.isSaveDisabled.bind(this);
29-
}
30-
31-
isSaveDisabled() {
32-
return (
33-
this.state.translations.length === 0 ||
34-
every(this.state.translations, translation => translation.content.length === 0)
35-
);
36-
}
21+
const [translations, setTranslations] = useState([]);
22+
const [translationsAbout, setTranslationsAbout] = useState([]);
3723

38-
saveOrganization() {
39-
const { createOrganization, closeCreateOrganizationModal } = this.props;
24+
const isSaveDisabled = useCallback(() => {
25+
return translations.length === 0 || every(translations, translation => translation.content.length === 0);
26+
}, [translations]);
4027

41-
const translationAtoms = this.state.translations.map(t => ({ locale_id: t.localeId, content: t.content }));
28+
const saveOrganization = useCallback(() => {
29+
const translationAtoms = translations.map(t => ({ locale_id: t.localeId, content: t.content }));
4230

43-
const translationAtomsAbout = this.state.translations_about.map(t => ({
31+
const translationAtomsAbout = translationsAbout.map(t => ({
4432
locale_id: t.localeId,
4533
content: t.content
4634
}));
@@ -56,46 +44,41 @@ class CreateOrganizationModal extends React.Component {
5644
}).then(({ data }) => {
5745
closeCreateOrganizationModal();
5846
});
59-
}
47+
}, [translations, translationsAbout]);
6048

61-
render() {
62-
const { visible, closeCreateOrganizationModal } = this.props;
63-
64-
if (!visible) {
65-
return null;
66-
}
67-
68-
return (
69-
<Modal closeIcon onClose={closeCreateOrganizationModal} dimmer open className="lingvo-modal2">
70-
<Modal.Header>{this.context("New organization")}</Modal.Header>
71-
72-
<Modal.Content>
73-
<h4 className="lingvo-org-translation__header">{this.context("Organization name")}</h4>
74-
<Translations onChange={translations => this.setState({ translations })} />
75-
76-
<h4 className="lingvo-org-translation__header">{this.context("About the organization")}</h4>
77-
<Translations onChange={translations_about => this.setState({ translations_about })} textArea={true} />
78-
</Modal.Content>
79-
80-
<Modal.Actions>
81-
<Button
82-
content={this.context("Save")}
83-
onClick={this.saveOrganization}
84-
disabled={this.isSaveDisabled()}
85-
className="lingvo-button-violet"
86-
/>
87-
<Button
88-
content={this.context("Cancel")}
89-
onClick={closeCreateOrganizationModal}
90-
className="lingvo-button-basic-black"
91-
/>
92-
</Modal.Actions>
93-
</Modal>
94-
);
49+
if (!visible) {
50+
return null;
9551
}
96-
}
9752

98-
CreateOrganizationModal.contextType = TranslationContext;
53+
return (
54+
<Modal closeIcon onClose={closeCreateOrganizationModal} dimmer open className="lingvo-modal2">
55+
<Modal.Header>{getTranslation("New organization")}</Modal.Header>
56+
57+
<Modal.Content>
58+
<h4 className="lingvo-org-translation__header">{getTranslation("Organization name")}</h4>
59+
<Translations onChange={translations => setTranslations(translations)} />
60+
61+
<h4 className="lingvo-org-translation__header">{getTranslation("About the organization")}</h4>
62+
<Translations onChange={translationsAbout => setTranslationsAbout(translationsAbout)} textArea={true} />
63+
</Modal.Content>
64+
65+
<Modal.Actions>
66+
<Button
67+
content={getTranslation("Save")}
68+
onClick={saveOrganization}
69+
disabled={isSaveDisabled()}
70+
className="lingvo-button-violet"
71+
/>
72+
73+
<Button
74+
content={getTranslation("Cancel")}
75+
onClick={closeCreateOrganizationModal}
76+
className="lingvo-button-basic-black"
77+
/>
78+
</Modal.Actions>
79+
</Modal>
80+
);
81+
};
9982

10083
CreateOrganizationModal.propTypes = {
10184
closeCreateOrganizationModal: PropTypes.func.isRequired,

‎src/components/Grants/GrantsList.js‎

Lines changed: 58 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import React, { useContext } from "react";
22
import { Button, Table } from "semantic-ui-react";
33
import { graphql } from "@apollo/client/react/hoc";
44
import PropTypes from "prop-types";
@@ -18,85 +18,73 @@ function dateFormat(timestamp) {
1818
.padStart(2, "0")}.${date.getUTCDate().toString().padStart(2, "0")}`;
1919
}
2020

21-
class GrantsList extends React.Component {
22-
constructor(props) {
23-
super(props);
24-
this.joinGrant = this.joinGrant.bind(this);
25-
this.isOwner = this.isOwner.bind(this);
26-
}
21+
const GrantsList = ({ createGrantPermission, data }) => {
22+
const getTranslation = useContext(TranslationContext);
2723

28-
joinGrant(grant) {
29-
const { createGrantPermission } = this.props;
24+
const joinGrant = grant => {
3025
createGrantPermission({
3126
variables: { grantId: grant.id }
3227
}).then(() => {
33-
window.logger.suc(this.context("Request has been sent to the grant's owner."));
28+
window.logger.suc(getTranslation("Request has been sent to the grant's owner."));
3429
});
35-
}
30+
};
3631

37-
isOwner(grant) {
38-
const {
39-
data: { user }
40-
} = this.props;
32+
const isOwner = grant => {
33+
const { user } = data;
4134
return !!grant.owners.find(u => user && user.id === u.id);
42-
}
35+
};
4336

44-
render() {
45-
const { data } = this.props;
46-
const { grants } = data;
37+
const { grants } = data;
4738

48-
return (
49-
<div style={{ overflowY: "auto" }}>
50-
<Table celled padded>
51-
<Table.Header>
52-
<Table.Row>
53-
<Table.HeaderCell>{this.context("Grant Issuer")}</Table.HeaderCell>
54-
<Table.HeaderCell>{this.context("Grant")}</Table.HeaderCell>
55-
<Table.HeaderCell>{this.context("Issuer URL")}</Table.HeaderCell>
56-
<Table.HeaderCell>{this.context("Grant URL")}</Table.HeaderCell>
57-
<Table.HeaderCell>{this.context("Grant Number")}</Table.HeaderCell>
58-
<Table.HeaderCell>{this.context("Begin")}</Table.HeaderCell>
59-
<Table.HeaderCell>{this.context("End")}</Table.HeaderCell>
60-
<Table.HeaderCell>{this.context("Owners")}</Table.HeaderCell>
61-
<Table.HeaderCell />
39+
return (
40+
<div style={{ overflowY: "auto" }}>
41+
<Table celled padded>
42+
<Table.Header>
43+
<Table.Row>
44+
<Table.HeaderCell>{getTranslation("Grant Issuer")}</Table.HeaderCell>
45+
<Table.HeaderCell>{getTranslation("Grant")}</Table.HeaderCell>
46+
<Table.HeaderCell>{getTranslation("Issuer URL")}</Table.HeaderCell>
47+
<Table.HeaderCell>{getTranslation("Grant URL")}</Table.HeaderCell>
48+
<Table.HeaderCell>{getTranslation("Grant Number")}</Table.HeaderCell>
49+
<Table.HeaderCell>{getTranslation("Begin")}</Table.HeaderCell>
50+
<Table.HeaderCell>{getTranslation("End")}</Table.HeaderCell>
51+
<Table.HeaderCell>{getTranslation("Owners")}</Table.HeaderCell>
52+
<Table.HeaderCell />
53+
</Table.Row>
54+
</Table.Header>
55+
<Table.Body>
56+
{grants.map(grant => (
57+
<Table.Row key={grant.id}>
58+
<Table.Cell>{T(grant.issuer_translations)}</Table.Cell>
59+
<Table.Cell>{T(grant.translations)}</Table.Cell>
60+
<Table.Cell className="lingvo-column-issuer-url">
61+
<a href={grant.issuer_url}>{grant.issuer_url}</a>
62+
</Table.Cell>
63+
<Table.Cell className="lingvo-column-grant-url">
64+
<a href={grant.grant_url}>{grant.grant_url}</a>
65+
</Table.Cell>
66+
<Table.Cell>{grant.grant_number}</Table.Cell>
67+
<Table.Cell>{dateFormat(grant.begin)}</Table.Cell>
68+
<Table.Cell>{dateFormat(grant.end)}</Table.Cell>
69+
<Table.Cell>
70+
{grant.owners.map(owner => (
71+
<div key={owner.id}>{owner.name}</div>
72+
))}
73+
</Table.Cell>
74+
<Table.Cell>
75+
{!isOwner(grant) && (
76+
<Button positive onClick={() => joinGrant(grant)}>
77+
{getTranslation("Join")}
78+
</Button>
79+
)}
80+
</Table.Cell>
6281
</Table.Row>
63-
</Table.Header>
64-
<Table.Body>
65-
{grants.map(grant => (
66-
<Table.Row key={grant.id}>
67-
<Table.Cell>{T(grant.issuer_translations)}</Table.Cell>
68-
<Table.Cell>{T(grant.translations)}</Table.Cell>
69-
<Table.Cell className="lingvo-column-issuer-url">
70-
<a href={grant.issuer_url}>{grant.issuer_url}</a>
71-
</Table.Cell>
72-
<Table.Cell className="lingvo-column-grant-url">
73-
<a href={grant.grant_url}>{grant.grant_url}</a>
74-
</Table.Cell>
75-
<Table.Cell>{grant.grant_number}</Table.Cell>
76-
<Table.Cell>{dateFormat(grant.begin)}</Table.Cell>
77-
<Table.Cell>{dateFormat(grant.end)}</Table.Cell>
78-
<Table.Cell>
79-
{grant.owners.map(owner => (
80-
<div key={owner.id}>{owner.name}</div>
81-
))}
82-
</Table.Cell>
83-
<Table.Cell>
84-
{!this.isOwner(grant) && (
85-
<Button positive onClick={() => this.joinGrant(grant)}>
86-
{this.context("Join")}
87-
</Button>
88-
)}
89-
</Table.Cell>
90-
</Table.Row>
91-
))}
92-
</Table.Body>
93-
</Table>
94-
</div>
95-
);
96-
}
97-
}
98-
99-
GrantsList.contextType = TranslationContext;
82+
))}
83+
</Table.Body>
84+
</Table>
85+
</div>
86+
);
87+
};
10088

10189
GrantsList.propTypes = {
10290
data: PropTypes.shape({

0 commit comments

Comments
 (0)