final working commit

Author: roxylius

client/README.md

@@ -0,0 +1,13 @@
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### Deployment

client/package-lock.json

@@ -0,0 +1,67 @@
+{
+  "name": "clip-sync",
+  "productName": "Clipboard Sync",
+  "version": "1.0.0",
+  "author": "Black Crow",
+  "description": "An App to Synchronize Clipboard",
+  "main": "public/electron.js",
+  "homepage": "./",
+  "private": true,
+  "dependencies": {
+    "@electron/remote": "^2.0.9",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "clipboard-event": "^1.6.0",
+    "electron-browser-storage": "^1.0.7",
+    "electron-devtools-installer": "^3.2.0",
+    "electron-is-dev": "^2.0.0",
+    "electron-store": "^8.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.10.0",
+    "react-scripts": "5.0.1",
+    "socket.io": "^4.6.2",
+    "socket.io-client": "^4.6.2",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "dev": "concurrently -k \"cross-env BROWSER=none PORT=3001 npm start\" \"wait-on http://127.0.0.1:3001/ --timeout 45000 && npm run electron\"",
+    "electron": "electronmon .",
+    "electron-pack": "electron-builder -c.extraMetadata.main=build/electron.js -mwl",
+    "preelectron-pack": "react-scripts build",
+    "build-electron": "mkdir build/src && robocopy electron build/electron /S & robocopy src/shared build/src/shared /S"  
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "concurrently": "^8.0.1",
+    "cross-env": "^7.0.3",
+    "electron": "^23.2.0",
+    "electron-builder": "^24.4.0",
+    "electron-react-devtools": "^0.5.3",
+    "electronmon": "^2.0.2",
+    "wait-on": "^7.0.1"
+  }
+}

client/package.json

@@ -0,0 +1,162 @@
+const { app, BrowserWindow, clipboard, ipcMain, Tray, Menu } = require('electron')
+const clipboardListener = require('clipboard-event');
+require('@electron/remote/main').initialize();
+const Store = require('electron-store');
+const path = require('path');
+// const isDev = require('electron-is-dev');
+
+//contants
+const { COPIED_TEXT } = require("../src/utils/constants");
+
+const store = new Store();
+
+//create tray element
+let win = null;
+let tray = null;
+
+function createWindow() {
+  // Create the browser window.
+  win = new BrowserWindow({
+    width: 800,
+    height: 600,
+    webPreferences: {
+      enableRemoteModule: true,
+      nodeIntegration: true,
+      contextIsolation: false
+    }
+  })
+
+  //load the index.html from a url when the user is not logged in else load '/clipboard'
+  if (store.get('userInfo') === undefined) {
+    win.loadURL('http://localhost:3001');
+    console.log("user info: ", store.get('userInfo'));
+    console.log("login");
+  }
+  else {
+    win.loadURL('http://localhost:3001/clipboard');
+    console.log("user info: ", store.get('userInfo'));
+    console.log("clipboard");
+
+  }
+
+
+  // Open the DevTools.
+  // win.webContents.openDevTools();
+
+  //stores the remote copied text send from renderer
+  let remote_copied_text;
+
+  //recieves the text copied on remote platform via the renderer
+  ipcMain.on("remote_copied_text", (evt, data) => {
+    console.log("this is the copied text from remote devices: ", data.message);
+
+    //sets remote_copied_text
+    remote_copied_text = data.message;
+
+    //saves the recieve copied text to clipboard
+    clipboard.writeText(data.message);
+  });
+
+
+  //recieves the user data from renderer and stores it in application
+  ipcMain.on("user-data", (evt, data) => {
+    console.log("this is user data from renderer: ", data.id, 'data name:', data.name);
+
+    store.set('userInfo', { name: data.name, id: data.id });
+    console.log(store.get('userInfo'));
+  });
+
+  //handle logout and remove user data from electron store
+  ipcMain.on("remove_user", (evt, data) => {
+    console.log("this is user data from renderer: ", data);
+
+    store.delete('userInfo');
+    console.log('userdelete!');
+    win.loadURL('http://localhost:3001');
+  });
+
+
+  // To start listening
+  clipboardListener.startListening();
+
+  //when text is copied i.e. the event occurs [also caused by clipboard.writeText() fn]
+  clipboardListener.on('change', () => {
+    const text = clipboard.readText();
+
+    //check if the message copied same as the one just saved in clipboard
+    //to prevent copy and paste infinite loop
+    if (remote_copied_text !== text) {
+      //sends message to the renderer
+      win.webContents.send(COPIED_TEXT, text);
+      console.log(text);
+    } else {
+      console.log("same as latest copied element");
+    }
+  });
+
+  //set up tray element
+  try {
+    const iconPath = path.join(__dirname, 'icon.png');
+
+    tray = new Tray(iconPath);
+    const contextMenu = Menu.buildFromTemplate([
+      {
+        label: 'Quit',
+        click: () => {
+          tray.destroy();
+          app.exit();
+        }
+      }
+    ]);
+
+    //show text on hover on tray icon
+    tray.setToolTip('Clipboard Sync');
+
+    // Call this again for Linux because we modified the context menu
+    tray.setContextMenu(contextMenu)
+
+    tray.on('click', () => {
+      win.isVisible() ? win.hide() : win.show();
+    });
+
+  } catch (error) {
+    console.log(error)
+  }
+
+  //hides the window instead of closing
+  win.on('close', (event) => {
+    // Prevent the window from closing
+    event.preventDefault();
+    // Hide the window instead
+    win.hide();
+  });
+
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(createWindow)
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+
+  if (process.platform !== 'darwin') {
+    app.quit();
+  }
+
+});
+
+
+app.on('activate', () => {
+  // On macOS it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.

client/public/appicon.ico

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site to sync copied data across multiple devices" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link
+    href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300&family=Roboto+Mono:wght@300;400&display=swap"
+    rel="stylesheet">
+  <title>React App</title>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>

client/public/electron.js

@@ -0,0 +1,17 @@
+body {
+  margin: 0;
+  font-family: 'JetBrains Mono', monospace;
+}
+
+body {
+  height: 100vh;
+  width: 100vw;
+}
+
+body::-webkit-scrollbar {
+  display: none;
+}
+
+#root {
+  height: 100%;
+}

client/public/favicon.ico

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import './App.css';
+import Signup from './components/signup';
+import ClipB from './components/clipboard';
+
+function App() {
+  return (
+    <Routes>
+      <Route exact path='/' element={<Signup />} />
+      <Route path='/login' element={<Signup />} />
+      <Route path='/clipboard' element={<ClipB />} />
+    </Routes>
+  );
+}
+
+export default App;