Add open source notices (#288)

package.json

@@ -13,7 +13,8 @@
     "node": "12"
   },
   "scripts": {
-    "postinstall": "npx patch-package",
+    "postinstall": "npx patch-package && yarn generate-open-source-notices",
+    "generate-open-source-notices": "yarn licenses generate-disclaimer > public/open-source-notices.txt",
     "start": "cross-env BROWSER=none react-scripts start",
     "electron-dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\" -k",
     "build": "react-scripts build && webpack",
@@ -46,7 +47,7 @@
     "cross-env": "7.0.3",
     "del": "6.0.0",
     "dotenv": "8.2.0",
-    "electron": "11.2.3",
+    "electron": "11.3.0",
     "electron-builder": "22.10.4",
     "electron-is-dev": "1.2.0",
     "electron-settings": "4.0.2",

src/components/app.js

@@ -28,6 +28,7 @@ import WindowsTitleBar from './shared/windows-title-bar';
 
 import Alert from './root/alert';
 import DialogAbout from './root/dialog-about';
+import DialogOpenSourceNotices from './root/dialog-open-source-notices';
 import TelemetryManager from './root/telemetry-manager';
 
 import Home from './pages/home';
@@ -186,6 +187,7 @@ class App extends React.Component {
           )}
           <Alert />
           <DialogAbout />
+          <DialogOpenSourceNotices />
           <TelemetryManager />
           <Snackbar
             open={snackbarOpen}

src/components/pages/preferences/index.js

@@ -25,6 +25,7 @@ import EnhancedMenu from '../../shared/enhanced-menu';
 import { toggleSetting } from '../../../state/root/preferences/actions';
 import { open as openDialogAbout } from '../../../state/root/dialog-about/actions';
 import { open as openDialogShortcut } from '../../../state/pages/preferences/shortcut-dialog/actions';
+import { open as openDialogOpenSourceNotices } from '../../../state/root/dialog-open-source-notices/actions';
 
 import DialogShortcut from './dialog-shortcut';
 
@@ -152,6 +153,7 @@ const Preferences = (props) => {
     displayLanguage,
     onOpenDialogAbout,
     onOpenDialogShortcut,
+    onOpenDialogOpenSourceNotices,
     onToggleSetting,
     openAtLogin,
     openOnMenubarShortcut,
@@ -632,7 +634,7 @@ const Preferences = (props) => {
                       DynaMail
                     </Typography>
                     <Typography variant="body2" color="textSecondary">
-                      Best Way to Use Gmail on Mac & PC
+                      The Best Gmail Client
                     </Typography>
                   </div>
                 </div>
@@ -663,7 +665,7 @@ const Preferences = (props) => {
                           DynaCal
                         </Typography>
                         <Typography variant="body2" color="textSecondary">
-                          Best Way to Use Google Calendar on Mac & PC
+                          The Best Google Calendar Client
                         </Typography>
                       </div>
                     </div>
@@ -689,6 +691,10 @@ const Preferences = (props) => {
             <ListItem button>
               <ListItemText primary={getLocale('support')} onClick={() => requestOpenInBrowser('https://translatium.app/support?utm_source=translatium_app')} />
             </ListItem>
+            <Divider />
+            <ListItem button>
+              <ListItemText primary="Open Source Notices" onClick={onOpenDialogOpenSourceNotices} />
+            </ListItem>
             {window.process.mas && (
               <>
                 <Divider />
@@ -734,6 +740,7 @@ Preferences.propTypes = {
   displayLanguage: PropTypes.string.isRequired,
   onOpenDialogAbout: PropTypes.func.isRequired,
   onOpenDialogShortcut: PropTypes.func.isRequired,
+  onOpenDialogOpenSourceNotices: PropTypes.func.isRequired,
   onToggleSetting: PropTypes.func.isRequired,
   openAtLogin: PropTypes.oneOf(['yes', 'yes-hidden', 'no']).isRequired,
   openOnMenubarShortcut: PropTypes.string,
@@ -764,6 +771,7 @@ const mapStateToProps = (state) => ({
 const actionCreators = {
   openDialogAbout,
   openDialogShortcut,
+  openDialogOpenSourceNotices,
   toggleSetting,
 };
 

src/components/root/dialog-about.js

@@ -14,6 +14,7 @@ import connectComponent from '../../helpers/connect-component';
 import getLocale from '../../helpers/get-locale';
 
 import { close } from '../../state/root/dialog-about/actions';
+import { open as openDialogOpenSourceNotices } from '../../state/root/dialog-open-source-notices/actions';
 import translatiumIconPng from '../../images/products/[email protected]';
 
 import { requestOpenInBrowser } from '../../senders';
@@ -61,6 +62,7 @@ const About = (props) => {
   const {
     classes,
     onClose,
+    onOpenDialogOpenSourceNotices,
     open,
   } = props;
 
@@ -95,6 +97,14 @@ const About = (props) => {
           {getLocale('support')}
         </Button>
 
+        <br />
+
+        <Button
+          onClick={onOpenDialogOpenSourceNotices}
+        >
+          Open Source Notices
+        </Button>
+
         <Typography variant="body2" className={classes.madeBy}>
           <span>Made with </span>
           <span role="img" aria-label="love">❤</span>
@@ -116,6 +126,7 @@ const About = (props) => {
 About.propTypes = {
   classes: PropTypes.object.isRequired,
   onClose: PropTypes.func.isRequired,
+  onOpenDialogOpenSourceNotices: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
 };
 
@@ -125,6 +136,7 @@ const mapStateToProps = (state) => ({
 
 const actionCreators = {
   close,
+  openDialogOpenSourceNotices,
 };
 
 export default connectComponent(

src/components/root/dialog-open-source-notices.js

@@ -0,0 +1,75 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+
+import connectComponent from '../../helpers/connect-component';
+
+import { close } from '../../state/root/dialog-open-source-notices/actions';
+
+import EnhancedDialogTitle from '../shared/enhanced-dialog-title';
+
+const styles = (theme) => ({
+  dialogContent: {
+    whiteSpace: 'pre-line',
+    paddingBottom: theme.spacing(2),
+    overflowX: 'hidden',
+  },
+});
+
+const DialogOpenSourceNotices = ({
+  classes,
+  onClose,
+  open,
+}) => {
+  const [content, setContent] = useState('Loading...');
+  useEffect(() => {
+    window.fetch('./open-source-notices.txt')
+      .then((res) => res.text())
+      .then((text) => {
+        setContent(text);
+      })
+      // eslint-disable-next-line no-console
+      .catch(console.log);
+  });
+
+  return (
+    <Dialog
+      className={classes.root}
+      onClose={onClose}
+      open={open}
+    >
+      <EnhancedDialogTitle onClose={onClose}>
+        Open Source Notices
+      </EnhancedDialogTitle>
+      <DialogContent className={classes.dialogContent}>
+        {content}
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+DialogOpenSourceNotices.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onClose: PropTypes.func.isRequired,
+  open: PropTypes.bool.isRequired,
+};
+
+const mapStateToProps = (state) => ({
+  open: state.dialogOpenSourceNotices.open,
+});
+
+const actionCreators = {
+  close,
+};
+
+export default connectComponent(
+  DialogOpenSourceNotices,
+  mapStateToProps,
+  actionCreators,
+  styles,
+);

src/constants/actions.js

@@ -46,6 +46,10 @@ export const CHANGE_ROUTE = 'CHANGE_ROUTE';
 export const DIALOG_ABOUT_CLOSE = 'DIALOG_ABOUT_CLOSE';
 export const DIALOG_ABOUT_OPEN = 'DIALOG_ABOUT_OPEN';
 
+// Dialog Open Source Notices
+export const DIALOG_OPEN_SOURCE_NOTICES_OPEN = 'DIALOG_OPEN_SOURCE_NOTICES_OPEN';
+export const DIALOG_OPEN_SOURCE_NOTICES_CLOSE = 'DIALOG_OPEN_SOURCE_NOTICES_CLOSE';
+
 // System Preferences
 export const SET_SYSTEM_PREFERENCE = 'SET_SYSTEM_PREFERENCE';
 

src/state/reducers.js

@@ -10,6 +10,7 @@ import {
 
 import alert from './root/alert/reducers';
 import dialogAbout from './root/dialog-about/reducers';
+import dialogOpenSourceNotices from './root/dialog-open-source-notices/reducers';
 import general from './root/general/reducers';
 import preferences from './root/preferences/reducers';
 import router from './root/router/reducers';
@@ -24,6 +25,7 @@ import loadListeners from '../listeners';
 const rootReducer = combineReducers({
   alert,
   dialogAbout,
+  dialogOpenSourceNotices,
   general,
   pages,
   preferences,

src/state/root/dialog-open-source-notices/actions.js

@@ -0,0 +1,15 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import {
+  DIALOG_OPEN_SOURCE_NOTICES_CLOSE,
+  DIALOG_OPEN_SOURCE_NOTICES_OPEN,
+} from '../../../constants/actions';
+
+export const close = () => ({
+  type: DIALOG_OPEN_SOURCE_NOTICES_CLOSE,
+});
+
+export const open = () => ({
+  type: DIALOG_OPEN_SOURCE_NOTICES_OPEN,
+});

src/state/root/dialog-open-source-notices/reducers.js

@@ -0,0 +1,19 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
+import { combineReducers } from 'redux';
+
+import {
+  DIALOG_OPEN_SOURCE_NOTICES_CLOSE,
+  DIALOG_OPEN_SOURCE_NOTICES_OPEN,
+} from '../../../constants/actions';
+
+const open = (state = false, action) => {
+  switch (action.type) {
+    case DIALOG_OPEN_SOURCE_NOTICES_CLOSE: return false;
+    case DIALOG_OPEN_SOURCE_NOTICES_OPEN: return true;
+    default: return state;
+  }
+};
+
+export default combineReducers({ open });