From 32245d8ff7e338aab90e6dafe6bba326b9ef66aa Mon Sep 17 00:00:00 2001 From: Jack Humphries Date: Tue, 25 May 2021 21:48:26 +0100 Subject: [PATCH] Added toasts, removed twitter and fixed some graphical bugs.. --- package-lock.json | 57 ++++++++++++++++++++--- package.json | 4 +- src/App.css | 46 ++++++++++++++++++ src/App.js | 67 +++++++++++++++++++++------ src/components/InitialPage.js | 17 ++++++- src/components/Settings.js | 29 ++++++++++++ src/components/WelcomePage.js | 1 + src/components/styles/WelcomePage.css | 9 ++++ src/electron.js | 2 + 9 files changed, 210 insertions(+), 22 deletions(-) diff --git a/package-lock.json b/package-lock.json index 68c36c4..f1bb2cf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "socially-react", - "version": "0.1.0", + "name": "socially", + "version": "1.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "socially-react", - "version": "0.1.0", + "name": "socially", + "version": "1.0.0", "license": "GPL-3.0-only", "dependencies": { "@electron/remote": "^1.1.0", @@ -14,13 +14,15 @@ "@fortawesome/free-brands-svg-icons": "^5.15.3", "@fortawesome/free-solid-svg-icons": "^5.15.3", "@fortawesome/react-fontawesome": "^0.1.14", - "electron": "^12.0.2", "electron-json-config": "^1.5.3", "react": "^17.0.2", + "react-detect-offline": "^2.4.4", "react-dom": "^17.0.2", - "react-scripts": "^4.0.3" + "react-scripts": "^4.0.3", + "react-toastify": "^7.0.4" }, "devDependencies": { + "electron": "^12.0.2", "electron-builder": "^22.10.5" } }, @@ -5346,6 +5348,14 @@ "mimic-response": "^1.0.0" } }, + "node_modules/clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -16417,6 +16427,11 @@ "node": ">=10" } }, + "node_modules/react-detect-offline": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/react-detect-offline/-/react-detect-offline-2.4.4.tgz", + "integrity": "sha512-pdlTxMW9lPcTCW0QUK8FRgcNo/SRmCGrABLVSuAG91ELeTPOEFWj81dcf6sJ3IpDKdYaalbPUrw722/AmMMJOw==" + }, "node_modules/react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -16708,6 +16723,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/react-toastify": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-7.0.4.tgz", + "integrity": "sha512-Rol7+Cn39hZp5hQ/k6CbMNE2CKYV9E5OQdC/hBLtIQU2xz7DdAm7xil4NITQTHR6zEbE5RVFbpgSwTD7xRGLeQ==", + "dependencies": { + "clsx": "^1.1.1" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/read-config-file": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-6.0.0.tgz", @@ -26506,6 +26533,11 @@ "mimic-response": "^1.0.0" } }, + "clsx": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz", + "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==" + }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -35499,6 +35531,11 @@ "whatwg-fetch": "^3.4.1" } }, + "react-detect-offline": { + "version": "2.4.4", + "resolved": "https://registry.npmjs.org/react-detect-offline/-/react-detect-offline-2.4.4.tgz", + "integrity": "sha512-pdlTxMW9lPcTCW0QUK8FRgcNo/SRmCGrABLVSuAG91ELeTPOEFWj81dcf6sJ3IpDKdYaalbPUrw722/AmMMJOw==" + }, "react-dev-utils": { "version": "11.0.4", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", @@ -35702,6 +35739,14 @@ } } }, + "react-toastify": { + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-7.0.4.tgz", + "integrity": "sha512-Rol7+Cn39hZp5hQ/k6CbMNE2CKYV9E5OQdC/hBLtIQU2xz7DdAm7xil4NITQTHR6zEbE5RVFbpgSwTD7xRGLeQ==", + "requires": { + "clsx": "^1.1.1" + } + }, "read-config-file": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-6.0.0.tgz", diff --git a/package.json b/package.json index e274cd9..003c84e 100644 --- a/package.json +++ b/package.json @@ -15,8 +15,10 @@ "@fortawesome/react-fontawesome": "^0.1.14", "electron-json-config": "^1.5.3", "react": "^17.0.2", + "react-detect-offline": "^2.4.4", "react-dom": "^17.0.2", - "react-scripts": "^4.0.3" + "react-scripts": "^4.0.3", + "react-toastify": "^7.0.4" }, "scripts": { "react": "react-scripts start", diff --git a/src/App.css b/src/App.css index 651bb8d..f2b67b3 100644 --- a/src/App.css +++ b/src/App.css @@ -8,10 +8,12 @@ .webview { height: calc(100vh - 32px); transition: 0.2s; + z-index: 500; } .webviewNative { height: 100vh; + z-index: 500; } .hidden { @@ -43,3 +45,47 @@ .fade-out { animation: fadeout 1s; } + +.offlineView { + z-index: 1; + height: calc(100vh - 32px); + background-color: #f1f1f1; + position: fixed; + width: 100% !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.offlineViewNative { + z-index: 1; + height: calc(100vh - 32px); + background-color: #f1f1f1; + position: fixed; + width: 100% !important; + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} + +.offlineText { + color: #343434; + font-size: 1rem; + width: 50%; + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + align-items: center; + user-select: none; + padding-right: 5vw; + padding-bottom: 5vh; +} + +.offlineIcon { + max-height: 64px; +} diff --git a/src/App.js b/src/App.js index 1ed65b6..c017e24 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import "./App.css"; import Sidebar from "./components/Sidebar"; import SidebarBtn from "./components/SidebarBtn"; @@ -8,7 +8,6 @@ import { faWhatsapp, faFacebookMessenger, faInstagram, - faTwitter, faSlack, faLinkedin, faTelegram, @@ -17,6 +16,9 @@ import { faCog } from "@fortawesome/free-solid-svg-icons"; import Settings from "./components/Settings"; import InitialPage from "./components/InitialPage"; import WelcomePage from "./components/WelcomePage"; +import { ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; +import { Detector } from "react-detect-offline"; /* eslint-disable */ @@ -41,12 +43,6 @@ function App() { icon: faInstagram, isEnabled: socially.appdata.isEnabled("instagram") ?? false, }); - const [twitterSocial, setTwitterSocial] = useState({ - name: "twitter", - url: "https://twitter.com/", - icon: faTwitter, - isEnabled: socially.appdata.isEnabled("twitter") ?? false, - }); const [telegramSocial, setTelegramSocial] = useState({ name: "telegram", url: "https://web.telegram.org/#/login", @@ -82,11 +78,6 @@ function App() { ...socials.instagram, isEnabled: d, }), - twitter: (d) => - setTwitterSocial({ - ...socials.twitter, - isEnabled: d, - }), telegram: (d) => setTelegramSocial({ ...socials.telegram, @@ -109,7 +100,6 @@ function App() { whatsapp: whatsappSocial, messenger: messengerSocial, instagram: instagramSocial, - twitter: twitterSocial, telegram: telegramSocial, slack: slackSocial, linkedin: linkedinSocial, @@ -144,6 +134,17 @@ function App() { if (!isSetup) { return (
+ {titlebar} <> @@ -158,6 +159,17 @@ function App() { } else { return (
+ {titlebar} @@ -189,6 +201,33 @@ function App() { nativeTitlebar ? { paddingTop: "0px" } : { paddingTop: "32px" } } > + ( +
+
+ + + +
+ You are not connected to the internet. Please reconnect to use + Socially. +
+
+ )} + /> + {sidebarEnumerate().map((obj, i) => { if (obj.useragent) { return ( diff --git a/src/components/InitialPage.js b/src/components/InitialPage.js index e1576e1..adb325a 100644 --- a/src/components/InitialPage.js +++ b/src/components/InitialPage.js @@ -1,7 +1,22 @@ -import React from "react"; +import React, { useEffect } from "react"; +import { toast } from "react-toastify"; import "./styles/InitialPage.css"; export default function InitialPage(props) { + useEffect(() => { + if (props.isActive) { + toast.dark("Socially is now setup!", { + position: "bottom-right", + autoClose: 5000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + }); + } + }, []); + return (

Welcome to Socially!

diff --git a/src/components/Settings.js b/src/components/Settings.js index 8dad99f..098f23f 100644 --- a/src/components/Settings.js +++ b/src/components/Settings.js @@ -1,5 +1,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import React from "react"; +import { toast } from "react-toastify"; import "./styles/Settings.css"; /* eslint-disable */ @@ -22,9 +23,37 @@ export default function Settings(props) { console.log("before:" + obj.isEnabled); if (obj.isEnabled) { + toast.info( + `${ + obj.name.charAt(0).toUpperCase() + obj.name.slice(1) + } is now disabled!`, + { + position: "bottom-right", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + } + ); props.setSocials[obj.name](false); socially.appdata.setEnabled(obj.name, false); } else { + toast.info( + `${ + obj.name.charAt(0).toUpperCase() + obj.name.slice(1) + } is now enabled!`, + { + position: "bottom-right", + autoClose: 3000, + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + } + ); props.setSocials[obj.name](true); socially.appdata.setEnabled(obj.name, true); } diff --git a/src/components/WelcomePage.js b/src/components/WelcomePage.js index 9bb50e1..bf12577 100644 --- a/src/components/WelcomePage.js +++ b/src/components/WelcomePage.js @@ -11,6 +11,7 @@ export default function WelcomePage(props) { }); const [socials, setSocials] = useState(socialsT); + return (

Welcome to Socially!

diff --git a/src/components/styles/WelcomePage.css b/src/components/styles/WelcomePage.css index dfbbf07..c8d37e6 100644 --- a/src/components/styles/WelcomePage.css +++ b/src/components/styles/WelcomePage.css @@ -18,3 +18,12 @@ transform: translateY(0px); } } + +.social-confirm-btn { + position: absolute; + bottom: 25px; + right: 25%; + left: 50%; + margin-left: -50%; + width: 100vw; +} diff --git a/src/electron.js b/src/electron.js index 404c212..c7a3a70 100644 --- a/src/electron.js +++ b/src/electron.js @@ -18,6 +18,8 @@ function createWindow() { minWidth: 800, minHeight: 600, backgroundColor: "#1A2933", + fullscreenable: false, + fullscreen: false, icon: __dirname + `/src/assets/icons/app-icons/icon.icns`, webPreferences: { devTools: isDev,