harmacist/darkwire.io
1
0
Fork 0
mirror of https://github.com/darkwire/darkwire.io.git synced 2025-07-26 13:34:40 +00:00
Code Issues Projects Releases Wiki Activity

Refactor small components

Browse Source
This commit is contained in:
Jeremie Pardou-Piquemal 2022-12-15 22:24:01 +01:00
parent a49db05eb9
commit bbbe0f5e2d
8 changed files with 478 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

170
client/src/components/About/index.jsx
View File

@ -6,32 +6,22 @@ import { COMMIT_SHA } from '@/config/env';
import apiUrlGenerator from '@/api/generator';
import styles from './styles.module.scss';
class About extends Component {
constructor(props) {
super(props);
this.state = {
roomId: props.roomId,
abuseReported: false,
const About = ({ roomId: roomIdProp }) => {
const [roomId, setRoomId] = React.useState(roomIdProp);
const [abuseReported, setAbuseReported] = React.useState(false);
const handleUpdateRoomId = evt => {
setRoomId(evt.target.value);
};
}
handleUpdateRoomId(evt) {
this.setState({
roomId: evt.target.value,
});
}
handleReportAbuse(evt) {
const handleReportAbuse = evt => {
evt.preventDefault();
fetch(`${apiUrlGenerator('abuse')}/${this.state.roomId}`, {
fetch(`${apiUrlGenerator('abuse')}/${roomId}`, {
method: 'POST',
});
this.setState({
abuseReported: true,
});
}
setAbuseReported(true);
};
render() {
return (
<div className={styles.base}>
<div className={styles.links}>
@ -96,8 +86,8 @@ class About extends Component {
<h4>Report Abuse</h4>
<p>
We encourage you to report problematic content to us. Please keep in mind that to help ensure the safety,
confidentiality and security of your messages, we do not have the contents of messages available to us,
which limits our ability to verify the report and take action.
confidentiality and security of your messages, we do not have the contents of messages available to us, which
limits our ability to verify the report and take action.
</p>
<p>
When needed, you can take a screenshot of the content and share it, along with any available contact info,
@ -106,15 +96,15 @@ class About extends Component {
<p>
To report any content, email us at abuse[at]darkwire.io or submit the room ID below to report anonymously.
</p>
<form onSubmit={this.handleReportAbuse.bind(this)}>
{this.state.abuseReported && <div>Thank you!</div>}
<form onSubmit={handleReportAbuse}>
{abuseReported && <div>Thank you!</div>}
<div>
<div className="input-group">
<input
className="form-control"
placeholder="Room ID"
onChange={this.handleUpdateRoomId.bind(this)}
value={this.state.roomId}
onChange={handleUpdateRoomId}
value={roomId}
type="text"
/>
<div className="input-group-append">
@ -142,31 +132,30 @@ class About extends Component {
<h4>Acceptable Use Policy</h4>
<p>
This Acceptable Use Policy (this “Policy”) describes prohibited uses of the web services offered by Darkwire
and its affiliates (the “Services”) and the website located at https://darkwire.io (the “Darkwire Site”).
The examples described in this Policy are not exhaustive. We may modify this Policy at any time by posting a
and its affiliates (the “Services”) and the website located at https://darkwire.io (the “Darkwire Site”). The
examples described in this Policy are not exhaustive. We may modify this Policy at any time by posting a
revised version on the Darkwire Site. By using the Services or accessing the Darkwire Site, you agree to the
latest version of this Policy. If you violate the Policy or authorize or help others to do so, we may
suspend or terminate your use of the Services.
latest version of this Policy. If you violate the Policy or authorize or help others to do so, we may suspend
or terminate your use of the Services.
</p>
<strong>No Illegal, Harmful, or Offensive Use or Content</strong>
<p>
You may not use, or encourage, promote, facilitate or instruct others to use, the Services or Darkwire Site
for any illegal, harmful, fraudulent, infringing or offensive use, or to transmit, store, display,
distribute or otherwise make available content that is illegal, harmful, fraudulent, infringing or
offensive. Prohibited activities or content include:
for any illegal, harmful, fraudulent, infringing or offensive use, or to transmit, store, display, distribute
or otherwise make available content that is illegal, harmful, fraudulent, infringing or offensive. Prohibited
activities or content include:
</p>
<ul>
<li>
<strong>Illegal, Harmful or Fraudulent Activities.</strong> Any activities that are illegal, that violate
the rights of others, or that may be harmful to others, our operations or reputation, including
disseminating, promoting or facilitating child pornography, offering or disseminating fraudulent goods,
services, schemes, or promotions, make-money-fast schemes, ponzi and pyramid schemes, phishing, or
pharming.
services, schemes, or promotions, make-money-fast schemes, ponzi and pyramid schemes, phishing, or pharming.
</li>
<li>
<strong>Infringing Content.</strong> Content that infringes or misappropriates the intellectual property
or proprietary rights of others.
<strong>Infringing Content.</strong> Content that infringes or misappropriates the intellectual property or
proprietary rights of others.
</li>
<li>
@ -184,13 +173,12 @@ class About extends Component {
<strong>No Security Violations</strong>
<br />
You may not use the Services to violate the security or integrity of any network, computer or communications
system, software application, or network or computing device (each, a “System”). Prohibited activities
include:
system, software application, or network or computing device (each, a “System”). Prohibited activities include:
<ul>
<li>
<strong>Unauthorized Access.</strong> Accessing or using any System without permission, including
attempting to probe, scan, or test the vulnerability of a System or to breach any security or
authentication measures used by a System.
<strong>Unauthorized Access.</strong> Accessing or using any System without permission, including attempting
to probe, scan, or test the vulnerability of a System or to breach any security or authentication measures
used by a System.
</li>
<li>
@ -205,8 +193,8 @@ class About extends Component {
</ul>
<strong>No Network Abuse</strong>
<br />
You may not make network connections to any users, hosts, or networks unless you have permission to
communicate with them. Prohibited activities include:
You may not make network connections to any users, hosts, or networks unless you have permission to communicate
with them. Prohibited activities include:
<ul>
<li>
<strong>Monitoring or Crawling.</strong> Monitoring or crawling of a System that impairs or disrupts the
@ -219,9 +207,9 @@ class About extends Component {
</li>
<li>
<strong>Intentional Interference.</strong> Interfering with the proper functioning of any System,
including any deliberate attempt to overload a system by mail bombing, news bombing, broadcast attacks, or
flooding techniques.
<strong>Intentional Interference.</strong> Interfering with the proper functioning of any System, including
any deliberate attempt to overload a system by mail bombing, news bombing, broadcast attacks, or flooding
techniques.
</li>
<li>
@ -230,21 +218,21 @@ class About extends Component {
</li>
<li>
<strong>Avoiding System Restrictions.</strong> Using manual or electronic means to avoid any use
limitations placed on a System, such as access and storage restrictions.
<strong>Avoiding System Restrictions.</strong> Using manual or electronic means to avoid any use limitations
placed on a System, such as access and storage restrictions.
</li>
</ul>
<strong>No E-Mail or Other Message Abuse</strong>
<br />
You will not distribute, publish, send, or facilitate the sending of unsolicited mass e-mail or other
messages, promotions, advertising, or solicitations (like “spam”), including commercial advertising and
informational announcements. You will not alter or obscure mail headers or assume a sender’s identity without
the sender’s explicit permission. You will not collect replies to messages sent from another internet service
provider if those messages violate this Policy or the acceptable use policy of that provider.
You will not distribute, publish, send, or facilitate the sending of unsolicited mass e-mail or other messages,
promotions, advertising, or solicitations (like “spam”), including commercial advertising and informational
announcements. You will not alter or obscure mail headers or assume a sender’s identity without the sender’s
explicit permission. You will not collect replies to messages sent from another internet service provider if
those messages violate this Policy or the acceptable use policy of that provider.
<strong>Our Monitoring and Enforcement</strong>
<br />
We reserve the right, but do not assume the obligation, to investigate any violation of this Policy or misuse
of the Services or Darkwire Site. We may:
We reserve the right, but do not assume the obligation, to investigate any violation of this Policy or misuse of
the Services or Darkwire Site. We may:
<ul>
<li>investigate violations of this Policy or misuse of the Services or Darkwire Site; or</li>
<li>
@ -253,17 +241,17 @@ class About extends Component {
</li>
<li>
We may report any activity that we suspect violates any law or regulation to appropriate law enforcement
officials, regulators, or other appropriate third parties. Our reporting may include disclosing
appropriate customer information. We also may cooperate with appropriate law enforcement agencies,
regulators, or other appropriate third parties to help with the investigation and prosecution of illegal
conduct by providing network and systems information related to alleged violations of this Policy.
officials, regulators, or other appropriate third parties. Our reporting may include disclosing appropriate
customer information. We also may cooperate with appropriate law enforcement agencies, regulators, or other
appropriate third parties to help with the investigation and prosecution of illegal conduct by providing
network and systems information related to alleged violations of this Policy.
</li>
</ul>
Reporting of Violations of this Policy
<br />
If you become aware of any violation of this Policy, you will immediately notify us and provide us with
assistance, as requested, to stop or remedy the violation. To report any violation of this Policy, please
follow our abuse reporting process.
assistance, as requested, to stop or remedy the violation. To report any violation of this Policy, please follow
our abuse reporting process.
</section>
<section id="terms">
@ -289,9 +277,9 @@ class About extends Component {
<p>
Darkwire has no control over, and assumes no responsibility for, the content, privacy policies, or practices
of any third party web sites or services. You further acknowledge and agree that Darkwire shall not be
responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or
in connection with use of or reliance on any such content, goods or services available on or through any
such web sites or services.
responsible or liable, directly or indirectly, for any damage or loss caused or alleged to be caused by or in
connection with use of or reliance on any such content, goods or services available on or through any such web
sites or services.
</p>
<p>
We strongly advise you to read the terms and conditions and privacy policies of any third-party web sites or
@ -313,11 +301,10 @@ class About extends Component {
regard to its conflict of law provisions.
</p>
<p>
Our failure to enforce any right or provision of these Terms will not be considered a waiver of those
rights. If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining
provisions of these Terms will remain in effect. These Terms constitute the entire agreement between us
regarding our Service, and supersede and replace any prior agreements we might have between us regarding the
Service.
Our failure to enforce any right or provision of these Terms will not be considered a waiver of those rights.
If any provision of these Terms is held to be invalid or unenforceable by a court, the remaining provisions of
these Terms will remain in effect. These Terms constitute the entire agreement between us regarding our
Service, and supersede and replace any prior agreements we might have between us regarding the Service.
</p>
</section>
@ -328,8 +315,8 @@ class About extends Component {
&nbsp;Proceed with caution and always confirm recipients beforre starting a chat session.
</p>
<p>
Please also note that <strong>ALL CHATROOMS</strong> are public. &nbsp;Anyone can guess your room URL. If
you need a more-private room, use the lock feature or set the URL manually by entering a room ID after
Please also note that <strong>ALL CHATROOMS</strong> are public. &nbsp;Anyone can guess your room URL. If you
need a more-private room, use the lock feature or set the URL manually by entering a room ID after
&quot;darkwire.io/&quot;.
</p>
<br />
@ -340,17 +327,17 @@ class About extends Component {
WARRANTIES OF ANY KIND. TO THE FULLEST EXTENT PERMITTED BY LAW, Darkwire SPECIFICALLY DISCLAIMS ALL
WARRANTIES AND CONDITIONS OF ANY KIND, INCLUDING ALL IMPLIED WARRANTIES AND CONDITIONS OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE, TITLE AND NONINFRINGEMENT FOR OUR WEBSITE AND ANY CONTRACTS AND SERVICES
YOU PURCHASE THROUGH IT. Darkwire SHALL NOT HAVE ANY LIABILITY OR RESPONSIBILITY FOR ANY ERRORS OR
OMISSIONS IN THE CONTENT OF OUR WEBSITE, FOR CONTRACTS OR SERVICES SOLD THROUGH OUR WEBSITE, FOR YOUR
ACTION OR INACTION IN CONNECTION WITH OUR WEBSITE OR FOR ANY DAMAGE TO YOUR COMPUTER OR DATA OR ANY OTHER
DAMAGE YOU MAY INCUR IN CONNECTION WITH OUR WEBSITE. YOUR USE OF OUR WEBSITE AND ANY CONTRACTS OR SERVICES
ARE AT YOUR OWN RISK. IN NO EVENT SHALL EITHER Darkwire OR THEIR AGENTS BE LIABLE FOR ANY DIRECT,
INDIRECT, PUNITIVE, INCIDENTAL, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF OR IN ANY WAY CONNECTED
WITH THE USE OF OUR WEBSITE, CONTRACTS AND SERVICES PURCHASED THROUGH OUR WEBSITE, THE DELAY OR INABILITY
TO USE OUR WEBSITE OR OTHERWISE ARISING IN CONNECTION WITH OUR WEBSITE, CONTRACTS OR RELATED SERVICES,
WHETHER BASED ON CONTRACT, TORT, STRICT LIABILITY OR OTHERWISE, EVEN IF ADVISED OF THE POSSIBILITY OF ANY
SUCH DAMAGES. IN NO EVENT SHALL Darkwire’s LIABILITY FOR ANY DAMAGE CLAIM EXCEED THE AMOUNT PAID BY YOU TO
Darkwire FOR THE TRANSACTION GIVING RISE TO SUCH DAMAGE CLAIM.
YOU PURCHASE THROUGH IT. Darkwire SHALL NOT HAVE ANY LIABILITY OR RESPONSIBILITY FOR ANY ERRORS OR OMISSIONS
IN THE CONTENT OF OUR WEBSITE, FOR CONTRACTS OR SERVICES SOLD THROUGH OUR WEBSITE, FOR YOUR ACTION OR
INACTION IN CONNECTION WITH OUR WEBSITE OR FOR ANY DAMAGE TO YOUR COMPUTER OR DATA OR ANY OTHER DAMAGE YOU
MAY INCUR IN CONNECTION WITH OUR WEBSITE. YOUR USE OF OUR WEBSITE AND ANY CONTRACTS OR SERVICES ARE AT YOUR
OWN RISK. IN NO EVENT SHALL EITHER Darkwire OR THEIR AGENTS BE LIABLE FOR ANY DIRECT, INDIRECT, PUNITIVE,
INCIDENTAL, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF OR IN ANY WAY CONNECTED WITH THE USE OF OUR
WEBSITE, CONTRACTS AND SERVICES PURCHASED THROUGH OUR WEBSITE, THE DELAY OR INABILITY TO USE OUR WEBSITE OR
OTHERWISE ARISING IN CONNECTION WITH OUR WEBSITE, CONTRACTS OR RELATED SERVICES, WHETHER BASED ON CONTRACT,
TORT, STRICT LIABILITY OR OTHERWISE, EVEN IF ADVISED OF THE POSSIBILITY OF ANY SUCH DAMAGES. IN NO EVENT
SHALL Darkwire’s LIABILITY FOR ANY DAMAGE CLAIM EXCEED THE AMOUNT PAID BY YOU TO Darkwire FOR THE
TRANSACTION GIVING RISE TO SUCH DAMAGE CLAIM.
</strong>
</p>
<p>
@ -369,8 +356,8 @@ class About extends Component {
<p>
<strong>
YOU AGREE THAT ALL TIMES, YOU WILL LOOK TO ATTORNEYS FROM WHOM YOU PURCHASE SERVICES FOR ANY CLAIMS OF ANY
NATURE, INCLUDING LOSS, DAMAGE, OR WARRANTY. Darkwire AND THEIR RESPECTIVE AFFILIATES MAKE NO
REPRESENTATION OR GUARANTEES ABOUT ANY CONTRACTS AND SERVICES OFFERED THROUGH OUR WEBSITE.
NATURE, INCLUDING LOSS, DAMAGE, OR WARRANTY. Darkwire AND THEIR RESPECTIVE AFFILIATES MAKE NO REPRESENTATION
OR GUARANTEES ABOUT ANY CONTRACTS AND SERVICES OFFERED THROUGH OUR WEBSITE.
</strong>
</p>
<p>
@ -381,15 +368,15 @@ class About extends Component {
</p>
<strong>Indemnification</strong>
<p>
You agree to defend, indemnify and hold Darkwire harmless from and against any and all claims, damages,
costs and expenses, including attorneys' fees, arising from or related to your use of our Website or any
Contracts or Services you purchase through it.
You agree to defend, indemnify and hold Darkwire harmless from and against any and all claims, damages, costs
and expenses, including attorneys' fees, arising from or related to your use of our Website or any Contracts
or Services you purchase through it.
</p>
<strong>Changes</strong>
<p>
We reserve the right, at our sole discretion, to modify or replace these Terms at any time. If a revision is
material we will try to provide at least 30 days notice prior to any new terms taking effect. What
constitutes a material change will be determined at our sole discretion.
material we will try to provide at least 30 days notice prior to any new terms taking effect. What constitutes
a material change will be determined at our sole discretion.
</p>
<p>
By continuing to access or use our Service after those revisions become effective, you agree to be bound by
@ -441,8 +428,7 @@ class About extends Component {
</section>
</div>
);
}
}
};
About.propTypes = {
roomId: PropTypes.string.isRequired,

10
client/src/components/Connecting/index.jsx
View File

@ -1,7 +1,5 @@
import React, { Component } from 'react';
export default class Connecting extends Component {
render() {
const Connecting = () => {
return <div>Please wait while we secure a connection to Darkwire...</div>;
}
}
};
export default Connecting;

2
client/src/components/Home/Home.jsx
View File

@ -316,7 +316,7 @@ const User = ({ createUser, username, ...rest }) => {
setLoaded(true);
};
if (!loaded && !loading.current) {
if (!loaded) {
loading.current = true;
createUserLocal();
}

13
client/src/components/Message/index.jsx
View File

@ -1,19 +1,17 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import Linkify from 'react-linkify';
import Username from '@/components/Username';
class Message extends Component {
render() {
const msg = decodeURI(this.props.message);
const Message = ({ message, timestamp, sender }) => {
const msg = decodeURI(message);
return (
<div>
<div className="chat-meta">
<Username username={this.props.sender} />
<span className="muted timestamp">{moment(this.props.timestamp).format('LT')}</span>
<Username username={sender} />
<span className="muted timestamp">{moment(timestamp).format('LT')}</span>
</div>
<div className="chat">
<Linkify
@ -27,8 +25,7 @@ class Message extends Component {
</div>
</div>
);
}
}
};
Message.propTypes = {
sender: PropTypes.string.isRequired,

27
client/src/components/RoomLink/index.jsx
View File

@ -4,15 +4,10 @@ import { Copy } from 'react-feather';
import Clipboard from 'clipboard';
import $ from 'jquery';
class RoomLink extends Component {
constructor(props) {
super(props);
this.state = {
roomUrl: `${window.location.origin}/${props.roomId}`,
};
}
const RoomLink = ({ roomId, translations }) => {
const roomUrl = `${window.location.origin}/${roomId}`;
componentDidMount() {
React.useEffect(() => {
const clip = new Clipboard('.copy-room');
clip.on('success', () => {
@ -27,26 +22,25 @@ class RoomLink extends Component {
trigger: 'manual',
});
});
}
componentWillUnmount() {
return () => {
if ($('.copy-room').tooltip) $('.copy-room').tooltip('hide');
}
};
}, []);
render() {
return (
<form>
<div className="form-group">
<div className="input-group">
<input id="room-url" className="form-control" type="text" readOnly value={this.state.roomUrl} />
<input id="room-url" className="form-control" type="text" readOnly value={roomUrl} />
<div className="input-group-append">
<button
className="copy-room btn btn-secondary"
type="button"
data-toggle="tooltip"
data-placement="bottom"
data-clipboard-text={this.state.roomUrl}
title={this.props.translations.copyButtonTooltip}
data-clipboard-text={roomUrl}
title={translations.copyButtonTooltip}
>
<Copy />
</button>
@ -55,8 +49,7 @@ class RoomLink extends Component {
</div>
</form>
);
}
}
};
RoomLink.propTypes = {
roomId: PropTypes.string.isRequired,

10
client/src/components/RoomLocked/index.jsx
View File

@ -1,7 +1,5 @@
import React, { Component } from 'react';
const RoomLocked = ({ modalContent }) => {
return <div>{modalContent}</div>;
};
export default class RoomLocked extends Component {
render() {
return <div>{this.props.modalContent}</div>;
}
}
export default RoomLocked;

20
client/src/components/T/T.jsx
View File

@ -1,4 +1,3 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
@ -6,24 +5,25 @@ import { getTranslations } from '@/i18n';
const regex = /{(.*?)}/g;
class T extends Component {
render() {
const t = getTranslations(this.props.language);
const T = ({ language, path, data }) => {
const t = getTranslations(language);
const englishT = getTranslations('en');
const str = _.get(t, this.props.path, '') || _.get(englishT, this.props.path, '');
const str = _.get(t, path, '') || _.get(englishT, path, '');
let string = str.split(regex);
if (this.props.data) {
// Data for string interpolation
if (data) {
string = string.map(word => {
if (this.props.data[word]) {
return this.props.data[word];
if (data[word]) {
return data[word];
}
return word;
});
return <span>{string}</span>;
}
return string;
}
}
};
T.propTypes = {
path: PropTypes.string.isRequired,

11
client/src/components/Username/index.jsx
View File

@ -1,16 +1,13 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import randomColor from 'randomcolor';
class Username extends Component {
render() {
const Username = ({ username }) => {
return (
<span className="username" style={{ color: randomColor({ seed: this.props.username, luminosity: 'light' }) }}>
{this.props.username}
<span className="username" style={{ color: randomColor({ seed: username, luminosity: 'light' }) }}>
{username}
</span>
);
}
}
};
Username.propTypes = {
username: PropTypes.string.isRequired,