Commit d57c5e3a authored by Xavier Watkins's avatar Xavier Watkins
Browse files

Remove franklin dependency

parent 453e33fd
......@@ -7,12 +7,13 @@
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"axios": "^0.21.4",
"franklin-sites": "^0.0.164",
"jsonwebtoken": "^8.5.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-cookie": "^4.1.1",
"react-dom": "^17.0.2",
"react-markdown": "^7.0.1",
"react-modal": "^3.14.3",
"react-paginate": "^7.1.3",
"react-router-dom": "^5.3.0",
"react-scripts": "4.0.3",
......@@ -23,7 +24,7 @@
"web-vitals": "^1.0.1"
},
"scripts": {
"start": "react-scripts start",
"start": "PORT=39093 react-scripts start",
"build": "react-scripts build",
"build:fallback": "REACT_APP_READ_ONLY=true react-scripts build",
"test": "react-scripts test",
......
......@@ -2,52 +2,68 @@
Colour palette: GIFTs
*/
:root {
--main-color: #192B38;
--secondary-color:#22424B;
--tertiary-color: #2E5458;
--quart: #4E7367;
--quint: #7FA68C;
--main-color: #192b38;
--secondary-color: #22424b;
--tertiary-color: #2e5458;
--quart: #4e7367;
--quint: #7fa68c;
}
a {
color: #222;
}
dl dt a,
a.label,
.label,
a:hover,
a:focus,
a:active {
color: #2E5458;
}
h1 { color: #f7f7f7; }
/* h2 { color: rgb(0,124,130); }
color: #222;
}
dl dt a,
a.label,
.label,
a:hover,
a:focus,
a:active {
color: #2e5458;
}
h1 {
color: #f7f7f7;
}
/* h2 { color: rgb(0,124,130); }
h3 { color: #444444; } */
a.special { background-color: #7cd17c; }
.menu .active > a,
.tag,
.tabs-title > a:hover,
.button,
.button.primary {
background-color: #2E5458;
}
a.tag:hover { color: #fff; }
.tabs-title > a:hover,
.button.primary:hover,
.button.primary:focus { background: rgba(0,124,130,.9); }
.tabs-title > a:focus,
.tabs-title > a[aria-selected='true'] {
color: #fff;
background: #666; }
.masthead { background-color: #22424B; }
/* end */
a.special {
background-color: #7cd17c;
}
.menu .active > a,
.tag,
.tabs-title > a:hover,
.button,
.button.primary {
background-color: #2e5458;
}
a.tag:hover {
color: #fff;
}
.button.secondary {
background-color: #fff;
color: #2e5458;
}
.tabs-title > a:hover,
.button.primary:hover,
.button.primary:focus {
background: rgba(0, 124, 130, 0.9);
}
.tabs-title > a:focus,
.tabs-title > a[aria-selected="true"] {
color: #fff;
background: #666;
}
.masthead {
background-color: #22424b;
}
/* end */
.label {
padding: 0.33333rem 0.5rem;
......@@ -56,4 +72,4 @@ a {
.label.primary {
color: #fefefe;
}
\ No newline at end of file
}
......@@ -68,7 +68,7 @@ function Header(props) {
Feedback
</Link>
</li>
{process.env.REACT_APP_READ_ONLY ? null : loginLogoutLink}
{process.env.REACT_APP_READ_ONLY ? loginLogoutLink : null}
</ul>
</nav>
{/* <!-- /local-nav --> */}
......
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import React from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import Arrow from './Arrow';
import ReviewStatus from './ReviewStatus';
import Position from './Position';
import Arrow from "./Arrow";
import ReviewStatus from "./ReviewStatus";
import Position from "./Position";
import '../../styles/MappingHeader.scss';
import "../../styles/MappingHeader.scss";
const MappingHeader = (props) => {
const { mapping } = props;
const proteinExistenceValues = {
1: 'Evidence at protein level',
2: 'Evidence at transcript level',
3: 'Inferred from homology',
4: 'Predicted',
5: 'Uncertain',
1: "Evidence at protein level",
2: "Evidence at transcript level",
3: "Inferred from homology",
4: "Predicted",
5: "Uncertain",
};
return (
<div className="mapping-header">
<div className="mapping-ids">
<h2>
<Link
to={`//www.ensembl.org/id/${mapping.ensemblTranscript.enstId}`}
target="_blank"
rel="noopener noreferrer"
>
<ReviewStatus entryType={mapping.ensemblTranscript.select ? 'Ensembl' : ''} />
{`${mapping.ensemblTranscript.enstId}.${mapping.ensemblTranscript.enstVersion}`}
</Link>
{mapping.ensemblTranscript.enstVersion ? (
<Link
to={`//www.ensembl.org/id/${mapping.ensemblTranscript.enstId}`}
target="_blank"
rel="noopener noreferrer"
>
<ReviewStatus
entryType={mapping.ensemblTranscript.select ? "Ensembl" : ""}
/>
{`${mapping.ensemblTranscript.enstId}.${mapping.ensemblTranscript.enstVersion}`}
</Link>
) : (
mapping.ensemblTranscript.enstId
)}
</h2>
<div>
<strong>Release:</strong>
......@@ -40,7 +46,7 @@ const MappingHeader = (props) => {
<div>
<strong>MANE Select:</strong>
&nbsp;
{mapping.ensemblTranscript.select ? 'Yes' : 'No'}
{mapping.ensemblTranscript.select ? "Yes" : "No"}
</div>
<div>
<strong>Symbol:</strong>
......@@ -104,7 +110,7 @@ const MappingHeader = (props) => {
<div>
<strong>Canonical:</strong>
&nbsp;
{mapping.uniprotEntry.isCanonical ? 'Yes' : 'No'}
{mapping.uniprotEntry.isCanonical ? "Yes" : "No"}
</div>
<div>
<strong>Length:</strong>
......@@ -114,7 +120,7 @@ const MappingHeader = (props) => {
<div>
<strong>Ensembl derived:</strong>
&nbsp;
{mapping.uniprotEntry.ensemblDerived ? 'Yes' : 'No'}
{mapping.uniprotEntry.ensemblDerived ? "Yes" : "No"}
</div>
<div>
<strong>Protein existence:</strong>
......
import React, { useState, useEffect } from "react";
import React, { useState, useCallback } from "react";
import { withRouter } from "react-router-dom";
import PropTypes from "prop-types";
import axios from "axios";
import { withCookies } from "react-cookie";
import SimpleMED from "simplemde";
import {
Window,
WindowActionButton,
ModalBackdrop,
useModal,
} from "franklin-sites";
import ReactModal from "react-modal";
import SimpleMDE from "simplemde";
import SendNotificationUI from "../SendNotificationUI";
import "../../../../node_modules/simplemde/dist/simplemde.min.css";
import "../../../styles/CommentsAndStatusModal.scss";
ReactModal.setAppElement("#root");
const createId = (id, mapped) =>
`comments-${mapped ? "mapped" : "unmapped"}-${id}`;
......@@ -24,24 +21,6 @@ const onCommentTextChange = (id, textEditor) => {
localStorage.setItem(createId(id), text);
};
const createTextEditor = (id) => {
const element = document.getElementById("text-editor");
if (element === null) {
return null;
}
const textEditor = new SimpleMED({
element,
initialValue: localStorage.getItem(createId(id)) || "",
hideIcons: ["image"],
});
textEditor.codemirror.on("change", () => onCommentTextChange(id, textEditor));
return textEditor;
};
/* eslint-disable consistent-return */
const saveComment = (
id,
......@@ -115,143 +94,77 @@ const CommentsAndStatusModal = ({
const [selectedNotificationsLists, setSelectedNotificatoinsLists] = useState(
[]
);
useEffect(() => {
if (textEditor === null) {
textEditor = createTextEditor(id);
}
if (textEditor) {
const [displayModal, setDisplayModal] = useState(false);
const textEditorRef = useCallback(() => {
if (textEditorRef.current !== null) {
const textEditor = new SimpleMDE({
element: textEditorRef.current,
initialValue: localStorage.getItem(createId(id)) || "",
hideIcons: ["image"],
});
textEditor.codemirror.on("change", () =>
onCommentTextChange(id, textEditor)
);
textEditor.render(document.getElementById("text-editor"));
textEditor.value(localStorage.getItem(createId(id)) || "");
}
});
const { displayModal, setDisplayModal, Modal } = useModal(
ModalBackdrop,
DialogWindow
);
}, [id]);
if (!isLoggedIn) {
return null;
}
const userToken = cookies.get("userToken");
let textEditor = null;
const modalWindowButtons = [
<WindowActionButton
text="Cancel"
key="window-action-cancel"
onClick={() => {
setSelectedNotificatoinsLists([]);
// eslint-disable-next-line no-use-before-define
setDisplayModal(false);
}}
/>,
<WindowActionButton
text="Submit"
key="window-action-send"
onClick={() => {
const addCommentSuccess = () => {
console.log("comment was added successfully.");
textEditor.value("");
setSelectedNotificatoinsLists([]);
afterSaveCallback(id, isLoggedIn);
localStorage.removeItem(createId(id));
};
const addCommentFail = (e) => {
console.log("add comment was failed with an error:", e);
};
saveComment(
id,
textEditor,
selectedNotificationsLists,
userToken,
addCommentSuccess,
addCommentFail,
commentsApiUri
);
if (originalMappingStatus !== mappingStatus) {
const statusUpdateSuccess = () => {
console.log("status was updated successfully.");
};
const statusUpdateFail = (e) => {
console.log("status update was failed with an error:", e);
};
updateStatus(
id,
mappingStatus,
selectedNotificationsLists,
userToken,
statusUpdateSuccess,
statusUpdateFail,
statusApiUri
);
}
setSelectedNotificatoinsLists([]);
// eslint-disable-next-line no-use-before-define
setDisplayModal(false);
}}
primary
/>,
];
const DialogWindow = ({ className, handleExitModal }) => (
<Window
width="50vw"
height="40vh"
title="Comments and Status Change"
withHeaderCloseButton
onWindowOpen={() => null}
onWindowClose={() => {
setSelectedNotificatoinsLists([]);
handleExitModal();
}}
withShadow
key="comment-and-status-window"
actionButtons={modalWindowButtons}
className={className}
>
<div className="row small-12">
<div className="small-4 column">Notifications:</div>
<div className="small-8 column">
<SendNotificationUI
options={notificationsList}
selectedOption={selectedNotificationsLists}
onChange={(values) => setSelectedNotificatoinsLists(values)}
/>
</div>
</div>
<div className="row small-12">
<div className="small-4 column">Status:</div>
<div className="small-8 column">{statusChangeControl}</div>
</div>
<div className="row small-12">
<div className="column">
<div>Comments:</div>
<textarea id="text-editor" />
</div>
</div>
</Window>
);
const handleSaveModal = () => {
const addCommentSuccess = () => {
console.log("comment was added successfully.");
textEditor.value("");
setSelectedNotificatoinsLists([]);
afterSaveCallback(id, isLoggedIn);
localStorage.removeItem(createId(id));
};
const addCommentFail = (e) => {
console.log("add comment was failed with an error:", e);
};
saveComment(
id,
textEditor,
selectedNotificationsLists,
userToken,
addCommentSuccess,
addCommentFail,
commentsApiUri
);
if (originalMappingStatus !== mappingStatus) {
const statusUpdateSuccess = () => {
console.log("status was updated successfully.");
};
const statusUpdateFail = (e) => {
console.log("status update was failed with an error:", e);
};
updateStatus(
id,
mappingStatus,
selectedNotificationsLists,
userToken,
statusUpdateSuccess,
statusUpdateFail,
statusApiUri
);
}
DialogWindow.propTypes = {
className: PropTypes.string,
handleExitModal: PropTypes.func.isRequired,
setSelectedNotificatoinsLists([]);
// eslint-disable-next-line no-use-before-define
setDisplayModal(false);
};
DialogWindow.defaultProps = {
className: null,
};
const userToken = cookies.get("userToken");
let textEditor = null;
return (
<div className="comments-section">
......@@ -265,9 +178,52 @@ const CommentsAndStatusModal = ({
Comment / Change Status
</button>
{displayModal && (
<Modal handleExitModal={() => setDisplayModal(false)} />
)}
<ReactModal
isOpen={displayModal}
contentLabel="Comments and Status Change"
>
<div className="row small-12">
<div className="small-4 column">Notifications:</div>
<div className="small-8 column">
<SendNotificationUI
options={notificationsList}
selectedOption={selectedNotificationsLists}
onChange={(values) => setSelectedNotificatoinsLists(values)}
/>
</div>
</div>
<div className="row small-12">
<div className="small-4 column">Status:</div>
<div className="small-8 column">{statusChangeControl}</div>
</div>
<div className="row small-12">
<div className="column">
<div>Comments:</div>
<textarea ref={textEditorRef} />
</div>
</div>
<button
type="button"
className="button secondary"
onClick={() => {
setSelectedNotificatoinsLists([]);
// eslint-disable-next-line no-use-before-define
setDisplayModal(false);
}}
>
Cancel
</button>
<button
type="button"
className="button primary"
onClick={handleSaveModal}
>
Submit
</button>
</ReactModal>
</div>
</div>
</div>
......
// import { Window } from "franklin-sites";
// import React from "react";
// import SendNotificationUI from "../SendNotificationUI";
// const DialogWindow = ({ className, handleExitModal }) => (
// <Window
// width="50vw"
// height="40vh"
// title="Comments and Status Change"
// withHeaderCloseButton
// onWindowOpen={() => null}
// onWindowClose={() => {
// setSelectedNotificatoinsLists([]);
// handleExitModal();
// }}
// withShadow
// key="comment-and-status-window"
// actionButtons={modalWindowButtons}
// className={className}
// >
// </Window>
// );
// DialogWindow.propTypes = {
// className: checkPropTypes.string,
// handleExitModal: PropTypes.func.isRequired,
// };
// DialogWindow.defaultProps = {
// className: null,
// };
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment