Block

.babelrc

@@ -3,9 +3,5 @@
     // "@babel/preset-env"
     "@babel/preset-react"
     // "react-app"
-  ],
-  "plugins": [
-    // "@babel/plugin-proposal-class-properties",
-    "react-hot-loader/babel"
   ]
 }

.gitignore

@@ -10,6 +10,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local
@@ -19,3 +20,4 @@
 
 # secrets
 secrets.*.js
+.env

package.json

@@ -1,26 +1,25 @@
 {
-  "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",
     "start": "node utils/webserver.js",
     "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"
   }
-}
+}

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://*/*",
-        "<all_urls>"
-      ],
-      "js": [
-        "contentScript.bundle.js"
-      ],
-      "css": [
-        "content.styles.css"
-      ]
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "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"]
 }

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

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

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 (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Text fontSize='20px' color='white'>
-          Edit <code>src/pages/Newtab/Newtab.js</code> and save to reload.
-        </Text>
-        <Text fontSize='50px' color='tomato'>
-          PLANES
-        </Text>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React!
-        </a>
-      </header>
-    </div>
+    <Box>
+      {/* greeting */}
+      <Greeting />
+      <Flex mx={8} gap={10}>
+        <Flex flexDir="column" flex={3} gap={10}>
+          <Announcements />
+          {/* Slack Channel announcements */}
+          {/* Runn timesheet notifications */}
+          {/* Quick access links  */}
+          <QuickAccessTools />
+        </Flex>
+        <Flex flex={1}>
+          <Section title="Runn">
+            <Box py={4} px={6}>
+              <Text>Notifications here</Text>
+            </Box>
+          </Section>
+        </Flex>
+      </Flex>
+    </Box>
   );
 };
 

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 (
+    <Section title="Announcements">
+      <Flex direction="row">
+        <Image
+          objectFit="cover"
+          maxW={{ base: '100%', sm: '200px' }}
+          src={user.image_192}
+          alt="User Avatar"
+        />
+        <CardBody>
+          <Heading size="md">{name}</Heading>
+          <Box mt={2} />
+          <Text>{message}</Text>
+        </CardBody>
+      </Flex>
+    </Section>
+  );
+};