diff --git a/.babelrc b/.babelrc
index 0abe39f99..ce9be1a9b 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,9 +3,5 @@
// "@babel/preset-env"
"@babel/preset-react"
// "react-app"
- ],
- "plugins": [
- // "@babel/plugin-proposal-class-properties",
- "react-hot-loader/babel"
]
}
diff --git a/.gitignore b/.gitignore
index 3fc60c911..81f8af0a6 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@
/build
# misc
+.env
.DS_Store
.env.local
.env.development.local
@@ -19,3 +20,4 @@
# secrets
secrets.*.js
+.env
\ No newline at end of file
diff --git a/package.json b/package.json
index 2edc88965..c40cd9e44 100755
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
{
- "name": "planes-in-the-sky",
+ "name": "planes-dashboard",
"version": "4.3.5",
- "description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
+ "description": "A Dashboard for all things planes",
"license": "MIT",
"repository": {
"type": "git",
- "url": "https://github.com/lxieyang/chrome-extension-boilerplate-react.git"
+ "url": "https://github.com/teamplanes/planes-dashboard.git"
},
"scripts": {
"build": "node utils/build.js",
@@ -13,14 +13,13 @@
"prettier": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
},
"dependencies": {
- "@chakra-ui/react": "1.8.9",
- "@emotion/react": "^11.10.4",
- "@emotion/styled": "^11.10.4",
- "@hot-loader/react-dom": "^17.0.2",
- "framer-motion": "6.2.4",
- "react": "^17.0.2",
- "react-dom": "^17.0.2",
- "react-hot-loader": "^4.13.0"
+ "@chakra-ui/icons": "^2.0.13",
+ "@chakra-ui/react": "^2.4.2",
+ "@emotion/react": "^11.10.5",
+ "@emotion/styled": "^11.10.5",
+ "framer-motion": "^7.6.15",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0"
},
"devDependencies": {
"@babel/core": "^7.17.0",
@@ -35,7 +34,8 @@
"babel-preset-react-app": "^10.0.1yarn star",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^7.0.0",
- "css-loader": "^6.6.0",
+ "css-loader": "^6.7.2",
+ "dotenv-webpack": "^8.0.1",
"eslint": "^8.8.0",
"eslint-config-react-app": "^7.0.0",
"eslint-plugin-flowtype": "^8.0.3",
@@ -53,8 +53,8 @@
"terser-webpack-plugin": "^5.3.1",
"ts-loader": "^9.2.6",
"typescript": "^4.5.5",
- "webpack": "^5.68.0",
- "webpack-cli": "^4.9.2",
- "webpack-dev-server": "^4.7.4"
+ "webpack": "^5.75.0",
+ "webpack-cli": "^5.0.0",
+ "webpack-dev-server": "^4.11.1"
}
-}
\ No newline at end of file
+}
diff --git a/src/assets/img/jira.png b/src/assets/img/jira.png
new file mode 100644
index 000000000..df04a61f3
Binary files /dev/null and b/src/assets/img/jira.png differ
diff --git a/src/assets/img/logo.svg b/src/assets/img/logo.svg
deleted file mode 100644
index 6b60c1042..000000000
--- a/src/assets/img/logo.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
diff --git a/src/assets/img/plane.png b/src/assets/img/plane.png
new file mode 100644
index 000000000..544a388f3
Binary files /dev/null and b/src/assets/img/plane.png differ
diff --git a/src/containers/Greetings/Greetings.jsx b/src/containers/Greetings/Greetings.jsx
deleted file mode 100644
index b0404c860..000000000
--- a/src/containers/Greetings/Greetings.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { Component } from 'react';
-import icon from '../../assets/img/icon-128.png';
-
-class GreetingComponent extends Component {
- state = {
- name: 'dev',
- };
-
- render() {
- return (
-
-
Hello, {this.state.name}!
-

-
- );
- }
-}
-
-export default GreetingComponent;
diff --git a/src/manifest.json b/src/manifest.json
index 730ffeec2..fa8f6a9ca 100755
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -1,15 +1,17 @@
{
"manifest_version": 3,
- "name": "Takeoff",
+ "name": "Planes Dashboard",
"description": "A chrome extension that will help you to takeoff from your current tab to a new tab.",
"options_page": "options.html",
"background": {
"service_worker": "background.bundle.js"
},
+
"action": {
"default_popup": "popup.html",
"default_icon": "icon-34.png"
},
+ "permissions": ["identity", "identity.email"],
"chrome_url_overrides": {
"newtab": "newtab.html"
},
@@ -18,28 +20,17 @@
},
"content_scripts": [
{
- "matches": [
- "http://*/*",
- "https://*/*",
- ""
- ],
- "js": [
- "contentScript.bundle.js"
- ],
- "css": [
- "content.styles.css"
- ]
+ "matches": ["http://*/*", "https://*/*", ""],
+ "js": ["contentScript.bundle.js"],
+ "css": ["content.styles.css"]
}
],
"devtools_page": "devtools.html",
"web_accessible_resources": [
{
- "resources": [
- "content.styles.css",
- "icon-128.png",
- "icon-34.png"
- ],
+ "resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
"matches": []
}
- ]
+ ],
+ "permissions": ["identity"]
}
\ No newline at end of file
diff --git a/src/pages/Background/index.js b/src/pages/Background/index.js
index 8943b846f..b337df65c 100644
--- a/src/pages/Background/index.js
+++ b/src/pages/Background/index.js
@@ -1,2 +1,15 @@
console.log('This is the background page.');
console.log('Put the background scripts here.');
+
+const userEmail = chrome.identity.getProfileUserInfo(function (info) {
+ console.log('info', info);
+ return info.email;
+});
+
+chrome.extension.onMessage.addListener(function (
+ request,
+ sender,
+ sendResponse
+) {
+ sendResponse({ email: userEmail });
+});
diff --git a/src/pages/Content/index.js b/src/pages/Content/index.js
index d9e44cee1..a5c08ed3d 100644
--- a/src/pages/Content/index.js
+++ b/src/pages/Content/index.js
@@ -4,3 +4,11 @@ console.log('Content script works!');
console.log('Must reload extension for modifications to take effect.');
printLine("Using the 'printLine' function from the Print Module");
+
+var loggedInUser;
+
+chrome.extension.sendMessage({}, function (response) {
+ loggedInUser = response.email;
+});
+
+console.log('Got user:', loggedInUser);
diff --git a/src/pages/Newtab/Newtab.css b/src/pages/Newtab/Newtab.css
deleted file mode 100644
index 74b5e0534..000000000
--- a/src/pages/Newtab/Newtab.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/pages/Newtab/Newtab.jsx b/src/pages/Newtab/Newtab.jsx
index 02da1245b..08ae5cad4 100644
--- a/src/pages/Newtab/Newtab.jsx
+++ b/src/pages/Newtab/Newtab.jsx
@@ -1,29 +1,32 @@
import React from 'react';
-import logo from '../../assets/img/logo.svg';
-import './Newtab.css';
-import './Newtab.scss';
-import { Text } from '@chakra-ui/react'
+import { Greeting } from './components/greeting';
+import { Announcements } from './components/announcements';
+import { QuickAccessTools } from './components/quick-access-tools';
+import { Box, Flex, Text } from '@chakra-ui/react';
+import { Section } from './components/section';
+
const Newtab = () => {
return (
-
-
-
-
- Edit src/pages/Newtab/Newtab.js and save to reload.
-
-
- PLANES
-
-
- Learn React!
-
-
-
+
+ {/* greeting */}
+
+
+
+
+ {/* Slack Channel announcements */}
+ {/* Runn timesheet notifications */}
+ {/* Quick access links */}
+
+
+
+
+
+ Notifications here
+
+
+
+
+
);
};
diff --git a/src/pages/Newtab/Newtab.scss b/src/pages/Newtab/Newtab.scss
deleted file mode 100644
index 8960c7b27..000000000
--- a/src/pages/Newtab/Newtab.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-$myColor: red;
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
- color: $myColor;
-}
diff --git a/src/pages/Newtab/components/announcements.jsx b/src/pages/Newtab/components/announcements.jsx
new file mode 100644
index 000000000..bf91c98de
--- /dev/null
+++ b/src/pages/Newtab/components/announcements.jsx
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from 'react';
+import {
+ Text,
+ Image,
+ Heading,
+ CardBody,
+ Flex,
+ Box
+} from '@chakra-ui/react';
+import { getSlackFetch } from '../utils/getSlackFetch';
+import { Section } from './section';
+
+const getMessages = async () => {
+ try {
+ const conversationHistory = await getSlackFetch(
+ '/conversations.history?channel=C04CX09AFFS'
+ );
+
+ const messages = conversationHistory.messages.filter(
+ (message) => message.subtype !== 'channel_join'
+ );
+
+ // Print results
+ console.log(
+ messages.length + ' messages found in planes-dashboard channel'
+ );
+ return messages[0];
+ } catch (error) {
+ console.error(error);
+ }
+};
+
+const getUser = async (userId) => {
+ try {
+ const user = await getSlackFetch(`/users.profile.get?user=${userId}`);
+
+ // Print results
+ console.log('user with id: ' + userId + JSON.stringify(user));
+ return user.profile;
+ } catch (error) {
+ console.error(error);
+ }
+};
+
+const getPermaLink = async (message) => {
+ try {
+ const response = await getSlackFetch(
+ `/chat.getPermalink?channel=C04CX09AFFS&message_ts=${message.ts}`
+ );
+ return response.permaLink;
+ } catch (error) {
+ console.error(error);
+ }
+};
+
+export const Announcements = () => {
+ // WebClient instantiates a client that can call API methods
+ // When using Bolt, you can use either `app.client` or the `client` passed to listeners.
+ const [message, setMessage] = useState('');
+ const [user, setUser] = useState('');
+ const [permaLink, setPermalink] = useState('');
+ const test = async () => {
+ const message = await getMessages();
+ const user = await getUser(message.user);
+ const link = await getPermaLink(message);
+ setPermalink(link);
+ setUser(user);
+ setMessage(message.text);
+ };
+
+ useEffect(() => {
+ test();
+ }, []);
+ const name = user.first_name + ' ' + user.last_name;
+
+ return (
+
+
+
+
+ {name}
+
+ {message}
+
+
+
+ );
+};
diff --git a/src/pages/Newtab/components/greeting.jsx b/src/pages/Newtab/components/greeting.jsx
new file mode 100644
index 000000000..d855843f1
--- /dev/null
+++ b/src/pages/Newtab/components/greeting.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { Text, Flex, Switch, Heading, useColorMode } from '@chakra-ui/react';
+
+export const Greeting = () => {
+ // returns the greeting for the approriate time of day
+ // returns the users name... which is taken from Google login otherwise just returns there.
+
+ const [email, setEmail] = React.useState('');
+ chrome.identity.getProfileUserInfo({ accountStatus: 'ANY' }, function (info) {
+ if (info.email) {
+ setEmail(info.email);
+ }
+ });
+ const name = email.split('@', 1);
+
+ const { toggleColorMode } = useColorMode();
+
+ return (
+
+ {email ? (
+ {`Hello, ${name}!`}
+ ) : (
+ Hello there!
+ )}
+
+
+ );
+};
diff --git a/src/pages/Newtab/components/quick-access-tools.jsx b/src/pages/Newtab/components/quick-access-tools.jsx
new file mode 100644
index 000000000..068f3290f
--- /dev/null
+++ b/src/pages/Newtab/components/quick-access-tools.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Text, Box, Flex } from '@chakra-ui/react';
+import { Section } from './section';
+
+import jiraImage from '../../../assets/img/jira.png';
+
+const tools = [
+ { title: 'Github', src: '/github.png', link: 'https://github.com/' },
+ { title: 'Bippit', src: '/bippit.png', link: 'https://app.bippit.com/' },
+ {
+ title: 'Charlie HR',
+ src: '/charliehr.png',
+ link: 'https://planes.charliehr.com/',
+ },
+ {
+ title: 'Leapsome',
+ src: '/leapsome.png',
+ link: 'https://www.leapsome.com/',
+ },
+ {
+ title: 'Sunlight',
+ src: '/sunlight.png',
+ link: 'https://grow.sunlight.is/playlists',
+ },
+ { title: 'Runn', src: '/runn.png', link: 'https://app.runn.io/' },
+ {
+ title: 'Jira',
+ src: jiraImage,
+ link: 'https://planesstudio.atlassian.net/jira/your-work',
+ },
+];
+export const QuickAccessTools = () => {
+ return (
+
+
+ {tools.map((tool) => (
+
+ {tool.title}
+
+
+ ))}
+
+
+ );
+};
diff --git a/src/pages/Newtab/components/section.jsx b/src/pages/Newtab/components/section.jsx
new file mode 100644
index 000000000..f3990f9dd
--- /dev/null
+++ b/src/pages/Newtab/components/section.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Text, Box, Card } from '@chakra-ui/react';
+
+export const Section = ({ title, children }) => {
+ return (
+
+
+
+
+ {title}
+
+ {children}
+
+
+ );
+};
diff --git a/src/pages/Newtab/components/theme.js b/src/pages/Newtab/components/theme.js
new file mode 100644
index 000000000..137f5fd22
--- /dev/null
+++ b/src/pages/Newtab/components/theme.js
@@ -0,0 +1,10 @@
+import { extendTheme } from '@chakra-ui/react'
+
+const config = {
+ initialColorMode: 'light',
+ useSystemColorMode: true,
+}
+
+const theme = extendTheme({ config })
+
+export default theme
\ No newline at end of file
diff --git a/src/pages/Newtab/index.css b/src/pages/Newtab/index.css
index ec2585e8c..e3c144280 100644
--- a/src/pages/Newtab/index.css
+++ b/src/pages/Newtab/index.css
@@ -5,6 +5,8 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ background: '#FDFAF5';
+ background-image: url("data:image/svg+xml,%3Csvg width='25' height='25' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 0H5V9H4V0Z' fill='%23000000' opacity='0.08'/%3E%3Cpath d='M9 4V5L0 5L4.37115e-08 4L9 4Z' fill='%23000000' opacity='0.08' /%3E%3C/svg%3E");
}
code {
diff --git a/src/pages/Newtab/index.html b/src/pages/Newtab/index.html
index 22275f235..89dd64e0d 100644
--- a/src/pages/Newtab/index.html
+++ b/src/pages/Newtab/index.html
@@ -1,13 +1,12 @@
+
+
+
+ Planes dashboard
+
-
-
- Taking off with a new tab!
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+