refactor(widgets): Continue move to feature based organisation

src/features/message/Message.jsx

@@ -0,0 +1,45 @@
+import { useState, useEffect, useRef } from 'react';
+import EventBus from 'utils/eventbus';
+import './message.scss';
+
+const Message = () => {
+  const [messageText, setMessageText] = useState('');
+  const [display, setDisplay] = useState('none');
+  const [fontSize, setFontSize] = useState('1em');
+  const message = useRef();
+
+  useEffect(() => {
+    const handleRefresh = (data) => {
+      if (data === 'message') {
+        const messageSetting = localStorage.getItem('message');
+        const zoomMessage = localStorage.getItem('zoomMessage');
+        setDisplay(messageSetting === 'false' ? 'none' : 'block');
+        setFontSize(`${1 * Number((zoomMessage || 100) / 100)}em`);
+      }
+    };
+
+    const messages = JSON.parse(localStorage.getItem('messages')) || [];
+    if (messages.length > 0) {
+      setMessageText(messages[Math.floor(Math.random() * messages.length)]);
+      setDisplay('block');
+    }
+
+    EventBus.on('refresh', handleRefresh);
+    return () => {
+      EventBus.off('refresh');
+    };
+  }, []);
+
+  return (
+    <h2 className="message" ref={message} style={{ display, fontSize }}>
+      {messageText.split('\\n').map((item) => (
+        <span key={item}>
+          {item}
+          <br />
+        </span>
+      ))}
+    </h2>
+  );
+};
+
+export { Message as default, Message };

src/features/message/index.jsx

@@ -0,0 +1,2 @@
+export * from './Message';
+export * from './options';

src/features/message/message.scss

@@ -0,0 +1,6 @@
+.message {
+  cursor: default;
+  margin: 0;
+  user-select: none;
+  font-size: 1em;
+}

src/features/message/options/MessageOptions.jsx

@@ -0,0 +1,145 @@
+import variables from 'config/variables';
+import { PureComponent } from 'react';
+import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
+import { toast } from 'react-toastify';
+import { TextareaAutosize } from '@mui/material';
+
+import { Header, Row, Content, Action, PreferencesWrapper } from 'components/Layout/Settings';
+import { Button } from 'components/Elements';
+import EventBus from 'utils/eventbus';
+
+class MessageOptions extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      messages: JSON.parse(localStorage.getItem('messages')) || [],
+    };
+  }
+
+  reset = () => {
+    localStorage.setItem('messages', '[]');
+    this.setState({
+      messages: [],
+    });
+    toast(variables.getMessage(this.languagecode, 'toasts.reset'));
+    EventBus.emit('refresh', 'message');
+  };
+
+  modifyMessage(type, index) {
+    const messages = this.state.messages;
+    if (type === 'add') {
+      messages.push('');
+    } else {
+      messages.splice(index, 1);
+    }
+
+    this.setState({
+      messages,
+    });
+    this.forceUpdate();
+
+    localStorage.setItem('messages', JSON.stringify(messages));
+  }
+
+  message(e, text, index) {
+    const result = text === true ? e.target.value : e.target.result;
+
+    const messages = this.state.messages;
+    messages[index] = result;
+    this.setState({
+      messages,
+    });
+    this.forceUpdate();
+
+    localStorage.setItem('messages', JSON.stringify(messages));
+    document.querySelector('.reminder-info').style.display = 'flex';
+    localStorage.setItem('showReminder', true);
+  }
+
+  render() {
+    const MESSAGE_SECTION = 'modals.main.settings.sections.message';
+
+    return (
+      <>
+        <Header
+          title={variables.getMessage(`${MESSAGE_SECTION}.title`)}
+          setting="message"
+          category="message"
+          element=".message"
+          zoomSetting="zoomMessage"
+          visibilityToggle={true}
+        />
+        <PreferencesWrapper setting="message" visibilityToggle={true} zoomSetting="zoomMessage">
+          <Row final={true}>
+            <Content title={variables.getMessage(`${MESSAGE_SECTION}.messages`)} />
+            <Action>
+              <Button
+                type="settings"
+                onClick={() => this.modifyMessage('add')}
+                icon={<MdAdd />}
+                label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
+              />
+            </Action>
+          </Row>
+          <div className="messagesContainer">
+            {this.state.messages.map((_url, index) => (
+              <div className="messageMap" key={index}>
+                <div className="flexGrow">
+                  <div className="icon">
+                    <MdOutlineTextsms />
+                  </div>
+                  <div className="messageText">
+                    <span className="subtitle">
+                      {variables.getMessage(`${MESSAGE_SECTION}.title`)}
+                    </span>
+                    <TextareaAutosize
+                      value={this.state.messages[index]}
+                      placeholder={variables.getMessage(
+                        'modals.main.settings.sections.message.content',
+                      )}
+                      onChange={(e) => this.message(e, true, index)}
+                      varient="outlined"
+                      style={{ padding: '0' }}
+                    />
+                  </div>
+                </div>
+                <div>
+                  <div className="messageAction">
+                    <button
+                      className="deleteButton"
+                      onClick={() => this.modifyMessage('remove', index)}
+                    >
+                      {variables.getMessage('modals.main.marketplace.product.buttons.remove')}
+                      <MdCancel />
+                    </button>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+          {this.state.messages.length === 0 && (
+            <div className="photosEmpty">
+              <div className="emptyNewMessage">
+                <MdOutlineTextsms />
+                <span className="title">
+                  {variables.getMessage(`${MESSAGE_SECTION}.no_messages`)}
+                </span>
+                <span className="subtitle">
+                  {variables.getMessage(`${MESSAGE_SECTION}.add_some`)}
+                </span>
+                <Button
+                  type="settings"
+                  onClick={() => this.modifyMessage('add')}
+                  icon={<MdAdd />}
+                  label={variables.getMessage(`${MESSAGE_SECTION}.add`)}
+                />
+              </div>
+            </div>
+          )}
+        </PreferencesWrapper>
+      </>
+    );
+  }
+}
+
+export { MessageOptions as default, MessageOptions };

src/features/message/options/index.jsx

@@ -0,0 +1 @@
+export * from './MessageOptions';