Settings onClick functionality

js/modules/signal.js

@@ -54,9 +54,6 @@ const {
 } = require('../../ts/components/DevicePairingDialog');
 const { AddServerDialog } = require('../../ts/components/AddServerDialog');
 
-const {
-  SessionSettings,
-} = require('../../ts/components/session/SessionSettings');
 const { SessionToast } = require('../../ts/components/session/SessionToast');
 const { SessionToggle } = require('../../ts/components/session/SessionToggle');
 const { SessionModal } = require('../../ts/components/session/SessionModal');
@@ -272,7 +269,6 @@ exports.setup = (options = {}) => {
     InviteFriendsDialog,
     GroupInvitation,
     BulkEdit,
-    SessionSettings,
     SessionToast,
     SessionToggle,
     SessionConfirm,

stylesheets/_session.scss

@@ -919,7 +919,6 @@ label {
 
   &-item {
     font-size: 15px;
-    font-weight: bold;
     color: $session-color-white;
     background-color: $session-shade-1;
 

ts/components/MainViewController.tsx

@@ -3,31 +3,64 @@ import ReactDOM from 'react-dom';
 
 import { SessionSettingListItem, SessionSettingType } from './session/settings/SessionSettingListItem';
 
-// interface State {
-// }
+import { SessionSettingCategory } from './session/LeftPaneSettingSection';
+import { SessionButtonColor } from './session/SessionButton';
 
-// interface Props {
 
-// }
 
-// export class LeftPane extends React.Component<Props, State> {
-//   public state = {
-//   };
+// Grab initial values from database on startup
+const localSettings = [
+    {
+        id: "typingIndicators",
+        title: "Typing Indicators",
+        description: "See and share when messages are being typed. This setting is optional and applies to all conversations.",
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.Privacy,
+        value: false,
+    },
+    {
+        id: "screenLock",
+        title: "Screen Lock",
+        description: "Unlock Loki Session using your password. Visit notification settings to customise.",
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.Privacy,
+        value: true,
+    },
+    {
+        id: "screenSecurity",
+        title: "Screen Security",
+        description: "Prevent Loki Session previews from appearing in desktop notifications.",
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.Privacy,
+        value: false,
+    },
+    {
+        id: "linkPreviews",
+        title: "Send Link Previews",
+        description: "Supported for imgur, Instagram, Pinterest, Reddit and YouTube.",
+        type: SessionSettingType.Toggle,
+        category: SessionSettingCategory.Privacy,
+        value: true,
+    },
+    {
+        id: "screenSecurity",
+        title: "Screen Security",
+        description: "Prevent Loki Session previews from appearing in desktop notifications.",
+        category: SessionSettingCategory.Privacy,
+        type: SessionSettingType.Toggle,
+        value: false,
+    },
+    {
+        id: "clearConversationHistory",
+        title: "Clear Conversation History",
+        category: SessionSettingCategory.Privacy,
+        type: SessionSettingType.Button,
+        value: false,
+        buttonText: 'Clear',
+        buttonColor: SessionButtonColor.Danger,
+    },
+];
 
-//   public constructor(props: any) {
-//     super(props);
-//   }
-
-
-//   public render(): JSX.Element {
-//     return (
-//       <div>
-//           Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis, pariatur dicta placeat corporis similique modi quod veritatis voluptatum impedit tempore voluptas nostrum magni aspernatur iure, labore ipsam odit possimus exercitationem?
-//       </div>
-//     );
-//   }
-
-// }
 
 export class MainViewController {
     public static renderMessageView() {
@@ -51,39 +84,42 @@ export class MainViewController {
     public static renderSettingsView() {
         const element = (
             <div className="session-settings-list">
-                <SessionSettingListItem
-                    title = "Typing Indicators"
-                    description = "See and share when messages are being typed. This setting is optional and applies to all conversations."
-                    type = { SessionSettingType.Toggle }
-                    value = { true }
-                />
-                <SessionSettingListItem
-                    title = "Screen Lock"
-                    description = "Unlock Loki Session using your password. Visit notification settings to customise."
-                    type = { SessionSettingType.Toggle }
-                    value = { false }
-                />
-                <SessionSettingListItem
-                    title = "Enable Screen Security"
-                    description = "Prevent Loki Session previews from appearing in the app switcher"
-                    type = { SessionSettingType.Toggle }
-                    value = { true }
-                />
-                <SessionSettingListItem
-                    title = "Send Link Previews"
-                    description = "Supported for imgur, Instagram, Pinterest, Reddit and YouTube."
-                    type = { SessionSettingType.Toggle }
-                    value = { true }
-                />
-                <SessionSettingListItem
-                    title = "Clear Conversation History"
-                    type = { SessionSettingType.Button }
-                    value = { false }
-                    onClick = { () => alert("Cleaaarred!") }
-                />
+                { localSettings.map(setting => {
+                    return (
+                        <SessionSettingListItem
+                            title = { setting.title }
+                            description = { setting.description }
+                            type = { setting.type }
+                            value = { setting.value }
+                            onClick = { () => {
+                                SettingsManager.updateSetting(setting);
+                            }}
+                            buttonText = { setting.buttonText || undefined }
+                            buttonColor = { setting.buttonColor || undefined }
+                        />
+                    );
+                }) }
             </div>
         );
         
         ReactDOM.render(element, document.getElementById('main-view'));
     }
+}
+
+
+export class SettingsManager {
+    public static updateSetting({ id, type, value } ) {
+        if (type === SessionSettingType.Toggle){
+            alert(`You clicked a toggle with ID: ${id}`);
+
+            // Manage toggle events 
+
+
+            return;
+        }
+
+        alert('you clicked something else');
+
+        return;
+    }
 }

ts/components/session/settings/SessionSettingListItem.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { SessionToggle } from '../SessionToggle';
-import { SessionButton, SessionButtonColor } from '../SessionButton';
+import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
+
 
 
 export enum SessionSettingType {
@@ -15,6 +16,8 @@ interface Props {
   type: SessionSettingType;
   value: boolean | string;
   onClick?: any;
+  buttonText?: string;
+  buttonColor?: SessionButtonColor;
 }
 
 export class SessionSettingListItem extends React.Component<Props> {
@@ -27,7 +30,7 @@ export class SessionSettingListItem extends React.Component<Props> {
 
 
   public render(): JSX.Element {
-    const { title, description, type, value, onClick } = this.props
+    const { title, description, type, value, onClick, buttonText, buttonColor } = this.props
 
     return (
       <div className="session-settings-item">
@@ -45,14 +48,17 @@ export class SessionSettingListItem extends React.Component<Props> {
 
         { type === SessionSettingType.Toggle && (
           <div className="session-sessings-item__selection">
-            <SessionToggle active={ Boolean(value) } />
+            <SessionToggle
+              active={ Boolean(value) }
+              onClick = { onClick }
+            />
           </div>
         )}
 
         { type === SessionSettingType.Button && (
           <SessionButton
-            text = "Clear"
-            buttonColor = {SessionButtonColor.Danger}
+            text = { buttonText }
+            buttonColor = { buttonColor }
             onClick = { onClick }
           />
         )}