From a49db05eb9098d69dea1031d876696d6d8ade949 Mon Sep 17 00:00:00 2001
From: Jeremie Pardou-Piquemal <571533+jrmi@users.noreply.github.com>
Date: Thu, 15 Dec 2022 22:02:51 +0100
Subject: [PATCH] Refactor Welcome

---
 client/src/components/Welcome/index.jsx | 64 +++++++++++--------------
 1 file changed, 27 insertions(+), 37 deletions(-)

diff --git a/client/src/components/Welcome/index.jsx b/client/src/components/Welcome/index.jsx
index c217d72..030939d 100644
--- a/client/src/components/Welcome/index.jsx
+++ b/client/src/components/Welcome/index.jsx
@@ -1,47 +1,37 @@
-import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import RoomLink from '@/components/RoomLink';
 
-class Welcome extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      roomUrl: `https://darkwire.io/${props.roomId}`,
-    };
-  }
-
-  render() {
-    return (
+const Welcome = ({ roomId, translations, close }) => {
+  return (
+    <div>
       <div>
+        v2.0 is a complete rewrite and includes several new features. Here are some highlights:
+        <ul className="native">
+          <li>Support on all modern browsers (Chrome, Firefox, Safari, Safari iOS, Android)</li>
+          <li>Slash commands (/nick, /me, /clear)</li>
+          <li>Room owners can lock the room, preventing anyone else from joining</li>
+          <li>Front-end rewritten in React.js and Redux</li>
+          <li>Send files up to 4 MB</li>
+        </ul>
         <div>
-          v2.0 is a complete rewrite and includes several new features. Here are some highlights:
-          <ul className="native">
-            <li>Support on all modern browsers (Chrome, Firefox, Safari, Safari iOS, Android)</li>
-            <li>Slash commands (/nick, /me, /clear)</li>
-            <li>Room owners can lock the room, preventing anyone else from joining</li>
-            <li>Front-end rewritten in React.js and Redux</li>
-            <li>Send files up to 4 MB</li>
-          </ul>
-          <div>
-            You can learn more{' '}
-            <a href="https://github.com/darkwire/darkwire.io" target="_blank" rel="noopener noreferrer">
-              here
-            </a>
-            .
-          </div>
-        </div>
-        <br />
-        <p className="mb-2">Others can join this room using the following URL:</p>
-        <RoomLink roomId={this.props.roomId} translations={this.props.translations} />
-        <div className="react-modal-footer">
-          <button className="btn btn-primary btn-lg" onClick={this.props.close}>
-            {this.props.translations.welcomeModalCTA}
-          </button>
+          You can learn more{' '}
+          <a href="https://github.com/darkwire/darkwire.io" target="_blank" rel="noopener noreferrer">
+            here
+          </a>
+          .
         </div>
       </div>
-    );
-  }
-}
+      <br />
+      <p className="mb-2">Others can join this room using the following URL:</p>
+      <RoomLink roomId={roomId} translations={translations} />
+      <div className="react-modal-footer">
+        <button className="btn btn-primary btn-lg" onClick={close}>
+          {translations.welcomeModalCTA}
+        </button>
+      </div>
+    </div>
+  );
+};
 
 Welcome.propTypes = {
   roomId: PropTypes.string.isRequired,