Added toasts, removed twitter and fixed some graphical bugs..

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",

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;
+}

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 (
 			<div className="App">
+				<ToastContainer
+					position="bottom-right"
+					autoClose={5000}
+					hideProgressBar={false}
+					newestOnTop={false}
+					closeOnClick
+					rtl={false}
+					pauseOnFocusLoss
+					draggable
+					pauseOnHover
+				/>
 				{titlebar}
 
 				<>
@@ -158,6 +159,17 @@ function App() {
 	} else {
 		return (
 			<div className="App">
+				<ToastContainer
+					position="bottom-left"
+					autoClose={5000}
+					hideProgressBar={false}
+					newestOnTop={false}
+					closeOnClick
+					rtl={false}
+					pauseOnFocusLoss
+					draggable
+					pauseOnHover
+				/>
 				{titlebar}
 
 				<Sidebar isNativeTitlebar={nativeTitlebar}>
@@ -189,6 +201,33 @@ function App() {
 						nativeTitlebar ? { paddingTop: "0px" } : { paddingTop: "32px" }
 					}
 				>
+					<Detector
+						render={({ online }) => (
+							<div
+								className={`${
+									nativeTitlebar ? "offlineViewNative" : "offlineView"
+								} ${online ? "hidden" : ""}
+						`}
+							>
+								<div className="offlineText">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										width="64"
+										height="64"
+										fill="currentColor"
+										viewBox="0 0 16 16"
+										className="offlineIcon"
+									>
+										<path d="M10.706 3.294A12.545 12.545 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.518.518 0 0 0 .668.05A11.448 11.448 0 0 1 8 4c.63 0 1.249.05 1.852.148l.854-.854zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.448 8.448 0 0 1 3.51-1.27L8 6zm2.596 1.404.785-.785c.63.24 1.227.545 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.462 8.462 0 0 0-1.98-.932zM8 10l.933-.933a6.455 6.455 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.532.532 0 0 1-.611.09A5.478 5.478 0 0 0 8 10zm4.905-4.905.747-.747c.59.3 1.153.645 1.685 1.03a.485.485 0 0 1 .047.737.518.518 0 0 1-.668.05 11.493 11.493 0 0 0-1.811-1.07zM9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A1.99 1.99 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75l10.75-10.75z" />
+									</svg>
+									<br />
+									You are not connected to the internet. Please reconnect to use
+									Socially.
+								</div>
+							</div>
+						)}
+					/>
+
 					{sidebarEnumerate().map((obj, i) => {
 						if (obj.useragent) {
 							return (

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 (
 		<div className={props.isActive ? "fade-in" : "fade-in hidden"}>
 			<h1 className="settings fade-in-setup">Welcome to Socially!</h1>

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);
 											}

src/components/WelcomePage.js

@@ -11,6 +11,7 @@ export default function WelcomePage(props) {
 	});
 
 	const [socials, setSocials] = useState(socialsT);
+
 	return (
 		<div className="setup">
 			<h1>Welcome to Socially!</h1>