Add save function for settings

package.json

@@ -1,6 +1,6 @@
 {
   "name": "c13n-arc",
-  "homepage": "https://c13n-io.github.io/arc/",
+  "homepage": "./",
   "version": "0.0.2",
   "private": true,
   "dependencies": {

src/components/content-pages/chat-history.js

@@ -808,7 +808,7 @@ const ChatHistory = (props) => {
                   <p className="chat-history-feeModal-text">Received by you</p>
                   <Button
                     className="chat-history-feeModal-button"
-                    type="default"
+                    type="secondary"
                     onClick={() => {
                       setRawMessageInfoModalVisible(true);
                     }}

src/components/content-pages/user-settings.js

@@ -1,11 +1,22 @@
 import React, { useState } from "react";
 import { Button, Form, Divider, Switch, Select, Collapse } from "antd";
-import { LogoutOutlined } from "@ant-design/icons";
 import { GithubPicker } from "react-color";
 import "./user-settings.css";
 import theme from "../../style/theme";
 import { DoubleRightOutlined } from "@ant-design/icons";
 
+import {
+  saveAutomaticImageLoadingSetting,
+  saveSmoothAnimationsSetting,
+  saveSelectedCryptoUnit,
+  saveSelectedFiatUnit,
+  saveChatIdenticonsSetting,
+  saveChatLayoutSetting,
+  saveMyMessageColor,
+  saveOtherMessageColor,
+  saveDeveloperLogsSetting,
+} from "../../utils/settings";
+
 const messageColorsArray = [
   "black",
   "darkslategray",
@@ -69,11 +80,7 @@ const UserSettings = (props) => {
                     checked={!!props.automaticImageLoading}
                     className="user-settings-collapse"
                     onChange={(value) => {
-                      props.setAutomaticImageLoading(value);
-                      window.localStorage.setItem(
-                        "automaticImageLoadingSetting",
-                        value
-                      );
+                      saveAutomaticImageLoadingSetting(props.setAutomaticImageLoading, value);
                     }}
                   />
                   Allow automatic loading of externally linked images
@@ -83,11 +90,7 @@ const UserSettings = (props) => {
                     checked={!!props.smoothAnimations}
                     className="user-settings-collapse"
                     onChange={(value) => {
-                      props.setSmoothAnimations(value);
-                      window.localStorage.setItem(
-                        "smoothAnimationsSetting",
-                        value
-                      );
+                      saveSmoothAnimationsSetting(props.setSmoothAnimations, value);
                     }}
                   />
                   Enable smooth animations and transitions
@@ -97,11 +100,7 @@ const UserSettings = (props) => {
                     checked={!!props.chatIdenticons}
                     className="user-settings-collapse"
                     onChange={(value) => {
-                      props.setChatIdenticons(value);
-                      window.localStorage.setItem(
-                        "chatIdenticonsSetting",
-                        value
-                      );
+                      saveChatIdenticonsSetting(props.setChatIdenticons, value);
                     }}
                   />
                   Show user icons in chat messages
@@ -111,8 +110,7 @@ const UserSettings = (props) => {
                     defaultValue={`${props.chatLayout}`}
                     className="user-settings-formSelect"
                     onChange={(e) => {
-                      props.setChatLayout(e);
-                      window.localStorage.setItem("chatLayoutSetting", e);
+                      saveChatLayoutSetting(props.setChatLayout, e);
                     }}
                   >
                     <Select.Option value="normal">Normal</Select.Option>
@@ -129,20 +127,12 @@ const UserSettings = (props) => {
                     colors={messageColorsArray}
                     color={props.myMessageColor}
                     onChangeComplete={(color) => {
-                      props.setMyMessageColor(color.hex);
-                      window.localStorage.setItem(
-                        "myMessageColorSetting",
-                        color.hex
-                      );
+                      saveMyMessageColor(props.setMyMessageColor, color.hex);
                     }}
                   />
                   <Button
                     onClick={() => {
-                      props.setMyMessageColor("rgba(0, 0, 0, 0.0)");
-                      window.localStorage.setItem(
-                        "myMessageColorSetting",
-                        "rgba(0, 0, 0, 0.0)"
-                      );
+                      saveMyMessageColor(props.setMyMessageColor, "rgba(0, 0, 0, 0.0)");
                     }}
                   >
                     Transparent
@@ -156,20 +146,12 @@ const UserSettings = (props) => {
                     colors={messageColorsArray}
                     color={props.myMessageColor}
                     onChangeComplete={(color) => {
-                      props.setOtherMessageColor(color.hex);
-                      window.localStorage.setItem(
-                        "otherMessageColorSetting",
-                        color.hex
-                      );
+                      saveOtherMessageColor(props.setOtherMessageColor, color.hex);
                     }}
                   />
                   <Button
                     onClick={() => {
-                      props.setOtherMessageColor("rgba(0, 0, 0, 0.0)");
-                      window.localStorage.setItem(
-                        "otherMessageColorSetting",
-                        "rgba(0, 0, 0, 0.0)"
-                      );
+                      saveOtherMessageColor(props.setOtherMessageColor, "rgba(0, 0, 0, 0.0)");
                     }}
                   >
                     Transparent
@@ -180,11 +162,7 @@ const UserSettings = (props) => {
                     checked={!!props.developerLogs}
                     className="user-settings-collapse"
                     onChange={(value) => {
-                      props.setDeveloperLogs(value);
-                      window.localStorage.setItem(
-                        "developerLogsSetting",
-                        value
-                      );
+                      saveDeveloperLogsSetting(props.setDeveloperLogs, value);
                     }}
                   />
                   Developer Logs (Page refresh required)
@@ -196,11 +174,7 @@ const UserSettings = (props) => {
                     defaultValue={`${props.selectedCryptoUnit}`}
                     className="user-settings-formSelect"
                     onChange={(e) => {
-                      props.setSelectedCryptoUnit(e);
-                      window.localStorage.setItem(
-                        "selectedCryptoUnitSetting",
-                        e
-                      );
+                      saveSelectedCryptoUnit(props.setSelectedCryptoUnit, e);
                     }}
                   >
                     <Select.Option value="mBTC">mBTC</Select.Option>
@@ -214,8 +188,7 @@ const UserSettings = (props) => {
                     defaultValue={`${props.selectedFiatUnit}`}
                     className="user-settings-formSelect"
                     onChange={(e) => {
-                      props.setSelectedFiatUnit(e);
-                      window.localStorage.setItem("selectedFiatUnitSetting", e);
+                      setSelectedFiatUnit(props.setSelectedFiatUnit, e);
                     }}
                   >
                     <Select.Option value="EUR">EUR</Select.Option>

src/payload-protocol/parsers.js

@@ -6,14 +6,11 @@ import c13nLinkRef from "../components/content-pages/markdown/c13n-link-ref";
 import c13nText from "../components/content-pages/markdown/c13n-text";
 import c13nInlineCode from "../components/content-pages/markdown/c13n-inline-code";
 
-import ChatHistoryImage from "../components/content-pages/chat-history-image";
-
 import { issuePayreq, checkPayreq, satisfyPayreq } from "../utils/payreq/payreq-tracker";
 
 import { Button, List } from "antd";
 import { CheckOutlined } from "@ant-design/icons";
 
-import { downloadImage, cachedImages } from "../utils/lsat/download-image";
 import React from "react";
 import { sendPayreqPay } from "../utils/payreq/utils";
 

src/utils/settings.js

@@ -3,11 +3,21 @@ const loadAutomaticImageLoadingSetting = (setAutomaticImageLoading) => {
   setAutomaticImageLoading(res !== 'false');
 };
 
+const saveAutomaticImageLoadingSetting = (setAutomaticImageLoading, value) => {
+  window.localStorage.setItem('automaticImageLoadingSetting', value);
+  setAutomaticImageLoading(value);
+};
+
 const loadSmoothAnimationsSetting = (setSmoothAnimations) => {
   let res = window.localStorage.getItem('smoothAnimationsSetting');
   setSmoothAnimations(res !== 'false');
 };
 
+const saveSmoothAnimationsSetting = (setSmoothAnimations, value) => {
+  window.localStorage.setItem('smoothAnimationsSetting', value);
+  setSmoothAnimations(value);
+};
+
 const loadSelectedCryptoUnit = (setSelectedCryptoUnit) => {
   let res = window.localStorage.getItem('selectedCryptoUnitSetting');
   if (res === 'sat' || res === 'msat' || res === 'mBTC') {
@@ -17,6 +27,11 @@ const loadSelectedCryptoUnit = (setSelectedCryptoUnit) => {
   }
 };
 
+const saveSelectedCryptoUnit = (setSelectedCryptoUnit, value) => {
+  window.localStorage.setItem('selectedCryptoUnitSetting', value);
+  setSelectedCryptoUnit(value);
+};
+
 const loadSelectedFiatUnit = (setSelectedFiatUnit) => {
   let res = window.localStorage.getItem('selectedFiatUnitSetting');
   if (res === 'EUR' || res === 'USD') {
@@ -26,11 +41,21 @@ const loadSelectedFiatUnit = (setSelectedFiatUnit) => {
   }
 };
 
+const saveSelectedFiatUnit = (setSelectedFiatUnit, value) => {
+  window.localStorage.setItem('selectedFiatUnitSetting', value);
+  setSelectedFiatUnit(value);
+};
+
 const loadChatIdenticonsSetting = (setChatIdenticons) => {
   let res = window.localStorage.getItem('chatIdenticonsSetting');
   setChatIdenticons(res !== 'false');
 };
 
+const saveChatIdenticonsSetting = (setChatIdenticons, value) => {
+  window.localStorage.setItem('chatIdenticonsSetting', value);
+  setChatIdenticons(value);
+};
+
 const loadChatLayoutSetting = (setChatLayout) => {
   let res = window.localStorage.getItem('chatLayoutSetting');
   if (res === 'normal' || res === 'left' || res === 'right') {
@@ -40,6 +65,11 @@ const loadChatLayoutSetting = (setChatLayout) => {
   }
 };
 
+const saveChatLayoutSetting = (setChatLayout, value) => {
+  window.localStorage.setItem('chatLayoutSetting', value);
+  setChatLayout(value);
+};
+
 const loadMyMessageColor = (setMyMessageColor) => {
   let res = window.localStorage.getItem('myMessageColorSetting');
   if(res !== 'undefined' && res !== undefined && res !== null) {
@@ -49,6 +79,11 @@ const loadMyMessageColor = (setMyMessageColor) => {
   }
 };
 
+const saveMyMessageColor = (setMyMessageColor, value) => {
+  window.localStorage.setItem('myMessageColorSetting', value);
+  setMyMessageColor(value);
+};
+
 const loadOtherMessageColor = (setOtherMessageColor) => {
   let res = window.localStorage.getItem('otherMessageColorSetting');
   if(res !== 'undefined' && res !== undefined && res !== null) {
@@ -58,6 +93,11 @@ const loadOtherMessageColor = (setOtherMessageColor) => {
   }
 };
 
+const saveOtherMessageColor = (setOtherMessageColor, value) => {
+  window.localStorage.setItem('otherMessageColorSetting', value);
+  setOtherMessageColor(value);
+};
+
 const loadDeveloperLogsSetting = (setDeveloperLogs) => {
   let res = window.localStorage.getItem('developerLogsSetting');
   setDeveloperLogs(res === 'true');
@@ -67,6 +107,12 @@ const loadDeveloperLogsSetting = (setDeveloperLogs) => {
   }
 };
 
+const saveDeveloperLogsSetting = (setDeveloperLogs, value) => {
+  window.localStorage.setItem('developerLogsSetting', value);
+  setDeveloperLogs(value);
+};
+
+
 export {
   loadAutomaticImageLoadingSetting,
   loadSmoothAnimationsSetting,
@@ -76,5 +122,14 @@ export {
   loadChatLayoutSetting,
   loadMyMessageColor,
   loadOtherMessageColor,
-  loadDeveloperLogsSetting
+  loadDeveloperLogsSetting,
+  saveAutomaticImageLoadingSetting,
+  saveSmoothAnimationsSetting,
+  saveSelectedCryptoUnit,
+  saveSelectedFiatUnit,
+  saveChatIdenticonsSetting,
+  saveChatLayoutSetting,
+  saveMyMessageColor,
+  saveOtherMessageColor,
+  saveDeveloperLogsSetting
 };