feat: redo of message UI & widget order experiment

src/components/modals/main/settings/sections/Message.jsx

@@ -1,6 +1,6 @@
 import variables from 'modules/variables';
 import { PureComponent } from 'react';
-import { MdCancel, MdAdd } from 'react-icons/md';
+import { MdCancel, MdAdd, MdOutlineTextsms } from 'react-icons/md';
 import { toast } from 'react-toastify';
 import { TextareaAutosize } from '@mui/material';
 import SettingsItem from '../SettingsItem';
@@ -79,7 +79,7 @@ export default class Message extends PureComponent {
             {this.getMessage('modals.main.settings.sections.message.add')} <MdAdd />
           </button>
         </SettingsItem>
-        <table style={{ width: '100%' }}>
+        {/*<table style={{ width: '100%' }}>
           <tr>
             <th>{this.getMessage('modals.main.settings.sections.message.messages')}</th>
             <th>{this.getMessage('modals.main.settings.sections.quote.custom_buttons')}</th>
@@ -107,7 +107,56 @@ export default class Message extends PureComponent {
             </tr>
           ))}
         </table>
-        <br />
+            */}
+        <div className="messagesContainer">
+          {this.state.messages.map((_url, index) => (
+            <div className="messageMap">
+              <div>
+                <div className="icon">
+                  <MdOutlineTextsms />
+                </div>
+                <div className="messageText">
+                  <span className="subtitle">
+                    {this.getMessage('modals.main.settings.sections.message.title')}
+                  </span>
+                  <TextareaAutosize
+                    value={this.state.messages[index]}
+                    placeholder={this.getMessage('modals.main.settings.sections.message.title')}
+                    onChange={(e) => this.message(e, true, index)}
+                    varient="outlined"
+                  />
+                </div>
+              </div>
+              <div>
+                <div className="messageAction">
+                  <button
+                    className="deleteButton"
+                    onClick={() => this.modifyMessage('remove', index)}
+                  >
+                    <MdCancel />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+        {this.state.messages.length === 0 ? (
+          <div className="photosEmpty">
+          <div className="emptyNewMessage">
+            <MdOutlineTextsms />
+            <span className="title">
+              No messages
+            </span>
+            <span className="subtitle">
+              Go ahead and add some.
+            </span>
+            <button onClick={() => this.modifyMessage('add')}>
+            {this.getMessage('modals.main.settings.sections.message.add')}
+              <MdAdd />
+            </button>
+          </div>
+        </div>
+        ) : null}
       </>
     );
   }

src/components/modals/main/settings/sections/Overview.jsx

@@ -0,0 +1,128 @@
+import variables from 'modules/variables';
+import { PureComponent } from 'react';
+import { MdOutlineDragIndicator } from 'react-icons/md';
+import { sortableContainer, sortableElement } from 'react-sortable-hoc';
+import { toast } from 'react-toastify';
+import Greeting from '../../../../widgets/greeting/Greeting';
+
+import EventBus from 'modules/helpers/eventbus';
+
+const getMessage = (text) => variables.language.getMessage(variables.languagecode, text);
+const widget_name = {
+  greeting: getMessage('modals.main.settings.sections.greeting.title'),
+  time: getMessage('modals.main.settings.sections.time.title'),
+  quicklinks: getMessage('modals.main.settings.sections.quicklinks.title'),
+  quote: getMessage('modals.main.settings.sections.quote.title'),
+  date: getMessage('modals.main.settings.sections.date.title'),
+  message: getMessage('modals.main.settings.sections.message.title'),
+  reminder: 'reminder',
+};
+
+const SortableItem = sortableElement(({ value }) => (
+  <li className="sortableItem">
+    {widget_name[value]}
+    <MdOutlineDragIndicator />
+  </li>
+));
+
+const SortableContainer = sortableContainer(({ children }) => (
+  <ul className="sortablecontainer">{children}</ul>
+));
+
+export default class OrderSettings extends PureComponent {
+  constructor() {
+    super();
+    this.state = {
+      items: JSON.parse(localStorage.getItem('order')),
+    };
+  }
+
+  arrayMove(array, oldIndex, newIndex) {
+    const result = Array.from(array);
+    const [removed] = result.splice(oldIndex, 1);
+    result.splice(newIndex, 0, removed);
+
+    return result;
+  }
+
+  onSortEnd = ({ oldIndex, newIndex }) => {
+    this.setState({
+      items: this.arrayMove(this.state.items, oldIndex, newIndex),
+    });
+  };
+
+  reset = () => {
+    localStorage.setItem(
+      'order',
+      JSON.stringify(['greeting', 'time', 'quicklinks', 'quote', 'date', 'message', 'reminder']),
+    );
+
+    this.setState({
+      items: JSON.parse(localStorage.getItem('order')),
+    });
+
+    toast(getMessage('toasts.reset'));
+  };
+
+  enabled = (setting) => {
+    switch (setting) {
+      case 'quicklinks':
+        return localStorage.getItem('quicklinksenabled') === 'true';
+      default:
+        return localStorage.getItem(setting) === 'true';
+    }
+  };
+
+  componentDidUpdate() {
+    localStorage.setItem('order', JSON.stringify(this.state.items));
+    variables.stats.postEvent('setting', 'Widget order');
+    EventBus.dispatch('refresh', 'widgets');
+  }
+
+  render() {
+    return (
+      <>
+        <span className="mainTitle">
+        {getMessage('modals.main.marketplace.product.overview')}
+        </span>
+        {/*<span className="title">{getMessage('modals.main.marketplace.product.overview')}</span>
+        <span className="link" onClick={this.reset}>
+          {getMessage('modals.main.settings.buttons.reset')}
+    </span>*/}
+        <div className="overviewGrid">
+          <div>
+            <span className='title'>Preview</span>
+            <div className='tabPreview'>
+                <div className="previewItem">
+              {this.state.items.map((value, index) => {
+                if (!this.enabled(value)) {
+                  return null;
+                }
+
+                return <div className="previewItem" key={`item-${value}`} index={index} > {value}</div>;
+              })}
+              </div>
+            </div>
+          </div>
+          <div>
+          <span className='title'>{getMessage('modals.main.settings.sections.order.title')}</span>
+            <SortableContainer
+              onSortEnd={this.onSortEnd}
+              lockAxis="y"
+              lockToContainerEdges
+              disableAutoscroll
+            >
+              {this.state.items.map((value, index) => {
+                if (!this.enabled(value)) {
+                  return null;
+                }
+
+                return <SortableItem key={`item-${value}`} index={index} value={value} />;
+              })}
+            </SortableContainer>
+          </div>
+        </div>
+      </>
+    );
+  }
+}