From 90f0bf9641fa219d70e329f5684d991e43e359ce Mon Sep 17 00:00:00 2001
From: Bagas <priambudibagaskara@gmail.com>
Date: Mon, 2 Dec 2019 20:38:22 +0700
Subject: [PATCH 1/5] add Utils.js and refactor few line of codes on Profile &
EditProfile
---
assets/js/EditProfile.jsx | 21 ++-------------------
assets/js/ProfilePage.jsx | 19 ++++---------------
assets/js/Utils.js | 6 ++++++
3 files changed, 12 insertions(+), 34 deletions(-)
create mode 100644 assets/js/Utils.js
diff --git a/assets/js/EditProfile.jsx b/assets/js/EditProfile.jsx
index 289ecdaa..33c349bc 100644
--- a/assets/js/EditProfile.jsx
+++ b/assets/js/EditProfile.jsx
@@ -13,6 +13,7 @@ import Server from './lib/Server';
import Storage from './lib/Storage';
import ModalAlert from './components/ModalAlert';
import Dumper from './lib/Dumper';
+import { isFromGithubLinkValid, gotoLink } from './Utils';
export default class EditProfile extends React.Component {
static propTypes = {
@@ -97,9 +98,6 @@ export default class EditProfile extends React.Component {
this.handleCheckbox = this.handleCheckbox.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleFile = this.handleFile.bind(this);
- this.gotoLink = this.gotoLink.bind(this);
- this.gotoStudentResume = this.gotoStudentResume.bind(this);
- this.gotoStudentTranscript = this.gotoStudentTranscript.bind(this);
this.getProfile();
}
@@ -164,12 +162,6 @@ export default class EditProfile extends React.Component {
);
}
- isFromGithubLinkValid = () => {
- const github_link = this.state.form.github_url;
- if (github_link == null) return;
- return github_link.includes('https://github.com/');
- };
-
parseIndonesianDateFormat(dateIndex) {
const monthNameIndex = {
'01': 'Januari',
@@ -194,7 +186,7 @@ export default class EditProfile extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
- if (!this.isFromGithubLinkValid()) {
+ if (!isFromGithubLinkValid(this.state.form.github_url)) {
this.modalAlert.open(
'Pembaharuan profil gagal',
'Pastikan link github yang anda tulis benar.(Berpola : https://github.com/<username>',
@@ -258,15 +250,6 @@ export default class EditProfile extends React.Component {
this.setState({ form });
};
- gotoLink = (url) => {
- const win = window.open(url);
- win.focus();
- };
-
- gotoStudentResume = () => this.gotoLink(this.state.resume || '#');
-
- gotoStudentTranscript = () => this.gotoLink(`transkrip/${this.state.id}`);
-
updateForm(show) {
if (show) {
return (
diff --git a/assets/js/ProfilePage.jsx b/assets/js/ProfilePage.jsx
index 218bbc99..11d602be 100755
--- a/assets/js/ProfilePage.jsx
+++ b/assets/js/ProfilePage.jsx
@@ -16,6 +16,7 @@ import Server from './lib/Server';
import Storage from './lib/Storage';
import ModalAlert from './components/ModalAlert';
import Dumper from './lib/Dumper';
+import { isFromGithubLinkValid, gotoLink } from './Utils';
export default class ProfilePage extends React.Component {
static propTypes = {
@@ -104,7 +105,6 @@ export default class ProfilePage extends React.Component {
this.handleCheckbox = this.handleCheckbox.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleFile = this.handleFile.bind(this);
- this.gotoLink = this.gotoLink.bind(this);
this.gotoStudentResume = this.gotoStudentResume.bind(this);
this.gotoStudentTranscript = this.gotoStudentTranscript.bind(this);
this.getProfile();
@@ -179,12 +179,6 @@ export default class ProfilePage extends React.Component {
);
}
- isFromGithubLinkValid = () => {
- const github_link = this.state.form.github_url;
- if (github_link == null) return;
- return github_link.includes('https://github.com/');
- };
-
gitlabURL_is_valid = () => {
if (this.state.form.gitlab_url != null) {
return this.state.form.gitlab_url.includes('https://gitlab.com/');
@@ -239,7 +233,7 @@ export default class ProfilePage extends React.Component {
handleSubmit = (e) => {
e.preventDefault();
- if (!this.isFromGithubLinkValid()) {
+ if (!isFromGithubLinkValid(this.state.form.github_url)) {
this.modalAlert.open(
'Pembaharuan profil gagal',
'Pastikan link github yang anda tulis benar.(Berpola : https://github.com/<username>',
@@ -309,14 +303,9 @@ export default class ProfilePage extends React.Component {
this.setState({ form });
};
- gotoLink = (url) => {
- const win = window.open(url);
- win.focus();
- };
-
- gotoStudentResume = () => this.gotoLink(this.state.resume || '#');
+ gotoStudentResume = () => gotoLink(this.state.resume || '#');
- gotoStudentTranscript = () => this.gotoLink(`transkrip/${this.state.id}`);
+ gotoStudentTranscript = () => gotoLink(`transkrip/${this.state.id}`);
updateForm(show) {
if (show) {
diff --git a/assets/js/Utils.js b/assets/js/Utils.js
new file mode 100644
index 00000000..860ca4c0
--- /dev/null
+++ b/assets/js/Utils.js
@@ -0,0 +1,6 @@
+export const isFromGithubLinkValid = github_link => {
+ if (github_link == null) return;
+ return github_link.includes('https://github.com/');
+ };
+
+export const gotoLink = url => window.open(url).focus();
--
GitLab
From 1cd576c8dfec2cdec225884cd85fe1ba063ec009 Mon Sep 17 00:00:00 2001
From: Bagas <priambudibagaskara@gmail.com>
Date: Mon, 2 Dec 2019 20:54:30 +0700
Subject: [PATCH 2/5] aeextract modal
---
assets/js/components/ModalComponent.jsx | 20 ++++++++++++++++++++
assets/js/components/ModalSuccess.jsx | 22 +++++++++-------------
2 files changed, 29 insertions(+), 13 deletions(-)
create mode 100644 assets/js/components/ModalComponent.jsx
diff --git a/assets/js/components/ModalComponent.jsx b/assets/js/components/ModalComponent.jsx
new file mode 100644
index 00000000..8168a500
--- /dev/null
+++ b/assets/js/components/ModalComponent.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import {
+ Button, Header, Icon, Modal,
+} from 'semantic-ui-react';
+
+export const ModalComponent = (props) => (
+ <Modal open={props.open} basic size="small">
+ <Header icon={props.icon} content={props.header} />
+ <Modal.Content>
+ <p style={props.style}>{props.content}</p>
+ </Modal.Content>
+ <Modal.Actions>
+ <Button color="green" inverted onClick={props.onClick}>
+ <Icon name="checkmark" />
+ {' '}
+ OK
+ </Button>
+ </Modal.Actions>
+ </Modal>
+);
diff --git a/assets/js/components/ModalSuccess.jsx b/assets/js/components/ModalSuccess.jsx
index 36aa8722..4a438dbd 100644
--- a/assets/js/components/ModalSuccess.jsx
+++ b/assets/js/components/ModalSuccess.jsx
@@ -2,6 +2,7 @@ import React from 'react';
import {
Button, Header, Icon, Modal,
} from 'semantic-ui-react';
+import {ModalComponent} from "./ModalComponent";
export default class ModalSuccess extends React.Component {
constructor(props) {
@@ -41,19 +42,14 @@ export default class ModalSuccess extends React.Component {
render = () => {
const style = { whiteSpace: 'pre-wrap' };
return (
- <Modal open={this.state.open} basic size="small">
- <Header icon="checkmark sign" content={this.state.header} />
- <Modal.Content>
- <p style={style}>{this.state.content}</p>
- </Modal.Content>
- <Modal.Actions>
- <Button color="green" inverted onClick={this.close}>
- <Icon name="checkmark" />
- {' '}
-OK
- </Button>
- </Modal.Actions>
- </Modal>
+ <ModalComponent
+ open={this.state.open}
+ icon={"checkmark sign"}
+ header={this.state.header}
+ style={style}
+ content={this.state.content}
+ onClick={this.close}
+ />
);
};
}
--
GitLab
From 4598672b5c8f0a8d6a66d17273ca51fd3c69ce24 Mon Sep 17 00:00:00 2001
From: Bagas <priambudibagaskara@gmail.com>
Date: Mon, 2 Dec 2019 20:56:12 +0700
Subject: [PATCH 3/5] extract alert modal
---
assets/js/components/ModalAlert.jsx | 25 +++++++++----------------
assets/js/components/ModalSuccess.jsx | 3 ---
2 files changed, 9 insertions(+), 19 deletions(-)
diff --git a/assets/js/components/ModalAlert.jsx b/assets/js/components/ModalAlert.jsx
index af4b095f..324a92df 100755
--- a/assets/js/components/ModalAlert.jsx
+++ b/assets/js/components/ModalAlert.jsx
@@ -1,7 +1,5 @@
import React from 'react';
-import {
- Button, Header, Icon, Modal,
-} from 'semantic-ui-react';
+import {ModalComponent} from "./ModalComponent";
export default class ModalAlert extends React.Component {
constructor(props) {
@@ -46,19 +44,14 @@ export default class ModalAlert extends React.Component {
render = () => {
const style = { whiteSpace: 'pre-wrap' };
return (
- <Modal open={this.state.open} basic size="small">
- <Header icon="warning sign" content={this.state.header} />
- <Modal.Content>
- <p style={style}>{this.state.content}</p>
- </Modal.Content>
- <Modal.Actions>
- <Button color="green" inverted onClick={this.close}>
- <Icon name="checkmark" />
- {' '}
-OK
- </Button>
- </Modal.Actions>
- </Modal>
+ <ModalComponent
+ open={this.state.open}
+ icon={"warning sign"}
+ header={this.state.header}
+ style={style}
+ content={this.state.content}
+ onClick={this.close}
+ />
);
};
}
diff --git a/assets/js/components/ModalSuccess.jsx b/assets/js/components/ModalSuccess.jsx
index 4a438dbd..769b8b30 100644
--- a/assets/js/components/ModalSuccess.jsx
+++ b/assets/js/components/ModalSuccess.jsx
@@ -1,7 +1,4 @@
import React from 'react';
-import {
- Button, Header, Icon, Modal,
-} from 'semantic-ui-react';
import {ModalComponent} from "./ModalComponent";
export default class ModalSuccess extends React.Component {
--
GitLab
From 4e35047527c4307a0c6559caefd5220cb0e2b351 Mon Sep 17 00:00:00 2001
From: Bagas <priambudibagaskara@gmail.com>
Date: Mon, 2 Dec 2019 21:02:49 +0700
Subject: [PATCH 4/5] refactor modal
---
assets/js/components/ModalAlert.jsx | 17 +++--------------
assets/js/components/ModalSuccess.jsx | 13 +++----------
2 files changed, 6 insertions(+), 24 deletions(-)
diff --git a/assets/js/components/ModalAlert.jsx b/assets/js/components/ModalAlert.jsx
index 324a92df..8f9da9ab 100755
--- a/assets/js/components/ModalAlert.jsx
+++ b/assets/js/components/ModalAlert.jsx
@@ -6,9 +6,8 @@ export default class ModalAlert extends React.Component {
super(props);
/* istanbul ignore next */
this.state = {
- open: false, header: '', content: '', callback: () => {},
+ isOpen: false, header: '', content: '', callback: () => {},
};
- this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
@@ -26,18 +25,8 @@ export default class ModalAlert extends React.Component {
if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
};
- open = (
- header = this.state.header,
- content = this.state.content,
- callback = this.state.callback,
- ) => {
- this.setState({
- open: true, header, content, callback,
- });
- };
-
close = () => {
- this.setState({ open: false });
+ this.setState({ isOpen: false });
this.state.callback();
};
@@ -45,7 +34,7 @@ export default class ModalAlert extends React.Component {
const style = { whiteSpace: 'pre-wrap' };
return (
<ModalComponent
- open={this.state.open}
+ open={this.state.isOpen}
icon={"warning sign"}
header={this.state.header}
style={style}
diff --git a/assets/js/components/ModalSuccess.jsx b/assets/js/components/ModalSuccess.jsx
index 769b8b30..dcf3d498 100644
--- a/assets/js/components/ModalSuccess.jsx
+++ b/assets/js/components/ModalSuccess.jsx
@@ -6,9 +6,8 @@ export default class ModalSuccess extends React.Component {
super(props);
/* istanbul ignore next */
this.state = {
- open: false, header: '', content: '', callback: () => {},
+ isOpen: false, header: '', content: '', callback: () => {},
};
- this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
@@ -25,14 +24,8 @@ export default class ModalSuccess extends React.Component {
if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
};
- open = (header = this.state.header, content = this.state.content, callback = this.state.callback) => {
- this.setState({
- open: true, header, content, callback,
- });
- };
-
close = () => {
- this.setState({ open: false });
+ this.setState({ isOpen: false });
this.state.callback();
};
@@ -40,7 +33,7 @@ export default class ModalSuccess extends React.Component {
const style = { whiteSpace: 'pre-wrap' };
return (
<ModalComponent
- open={this.state.open}
+ open={this.state.isOpen}
icon={"checkmark sign"}
header={this.state.header}
style={style}
--
GitLab
From 3e93eae68732ca2cb3a82f64544cec852e839ef2 Mon Sep 17 00:00:00 2001
From: Bagas <priambudibagaskara@gmail.com>
Date: Mon, 2 Dec 2019 21:12:46 +0700
Subject: [PATCH 5/5] fix code modal
---
assets/js/components/ModalAlert.jsx | 17 ++++++++++++++---
assets/js/components/ModalSuccess.jsx | 16 +++++++++++++---
2 files changed, 27 insertions(+), 6 deletions(-)
diff --git a/assets/js/components/ModalAlert.jsx b/assets/js/components/ModalAlert.jsx
index 8f9da9ab..324a92df 100755
--- a/assets/js/components/ModalAlert.jsx
+++ b/assets/js/components/ModalAlert.jsx
@@ -6,8 +6,9 @@ export default class ModalAlert extends React.Component {
super(props);
/* istanbul ignore next */
this.state = {
- isOpen: false, header: '', content: '', callback: () => {},
+ open: false, header: '', content: '', callback: () => {},
};
+ this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
@@ -25,8 +26,18 @@ export default class ModalAlert extends React.Component {
if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
};
+ open = (
+ header = this.state.header,
+ content = this.state.content,
+ callback = this.state.callback,
+ ) => {
+ this.setState({
+ open: true, header, content, callback,
+ });
+ };
+
close = () => {
- this.setState({ isOpen: false });
+ this.setState({ open: false });
this.state.callback();
};
@@ -34,7 +45,7 @@ export default class ModalAlert extends React.Component {
const style = { whiteSpace: 'pre-wrap' };
return (
<ModalComponent
- open={this.state.isOpen}
+ open={this.state.open}
icon={"warning sign"}
header={this.state.header}
style={style}
diff --git a/assets/js/components/ModalSuccess.jsx b/assets/js/components/ModalSuccess.jsx
index dcf3d498..d9216143 100644
--- a/assets/js/components/ModalSuccess.jsx
+++ b/assets/js/components/ModalSuccess.jsx
@@ -6,8 +6,9 @@ export default class ModalSuccess extends React.Component {
super(props);
/* istanbul ignore next */
this.state = {
- isOpen: false, header: '', content: '', callback: () => {},
+ open: false, header: '', content: '', callback: () => {},
};
+ this.open = this.open.bind(this);
this.close = this.close.bind(this);
}
@@ -24,8 +25,17 @@ export default class ModalSuccess extends React.Component {
if (anotherModal > 0) document.body.classList.add('scrolling', 'dimmable', 'dimmed');
};
+ open = (header = this.state.header, content = this.state.content, callback = this.state.callback) => {
+ this.setState({
+ open: true,
+ header,
+ content,
+ callback,
+ });
+ };
+
close = () => {
- this.setState({ isOpen: false });
+ this.setState({ open: false });
this.state.callback();
};
@@ -33,7 +43,7 @@ export default class ModalSuccess extends React.Component {
const style = { whiteSpace: 'pre-wrap' };
return (
<ModalComponent
- open={this.state.isOpen}
+ open={this.state.open}
icon={"checkmark sign"}
header={this.state.header}
style={style}
--
GitLab