Create/pop up menu

package.json

@@ -18,16 +18,19 @@
     "@emotion/styled": "^11.10.4",
     "@hot-loader/react-dom": "^17.0.2",
     "framer-motion": "6.2.4",
+    "js-cookie": "^3.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-hot-loader": "^4.13.0"
+    "react-hot-loader": "^4.13.0",
+    "react-select": "^5.6.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
     "@babel/preset-react": "^7.16.7",
     "@types/chrome": "^0.0.177",
+    "@types/js-cookie": "^3.0.2",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "babel-eslint": "^10.1.0",
@@ -57,4 +60,4 @@
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4"
   }
-}
+}

src/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
-  "name": "Takeoff",
-  "description": "A chrome extension that will help you to takeoff from your current tab to a new tab.",
+  "name": "Happy Tabs",
+  "description": "A chrome extension that will turn that frown upside down! :)",
   "options_page": "options.html",
   "background": {
     "service_worker": "background.bundle.js"
@@ -16,6 +16,10 @@
   "icons": {
     "128": "icon-128.png"
   },
+  "permissions": [
+    "identity",
+    "identity.email"
+  ],
   "content_scripts": [
     {
       "matches": [

src/pages/Components/user-selection.tsx

@@ -0,0 +1,94 @@
+import { Flex, Text } from "@chakra-ui/react";
+import React, { useEffect, useState } from "react";
+import Select from 'react-select';
+import { getItem, setItem } from "../Utils/storage";
+
+const options = [
+    { value: 'chocolate', label: 'Chocolate' },
+    { value: 'strawberry', label: 'Strawberry' },
+    { value: 'mint', label: 'Mint' },
+    { value: 'peach', label: 'Peach' },
+    { value: 'vanilla', label: 'Vanilla' },
+    { value: 'caramel', label: 'Caramel' },
+    { value: 'coffee', label: 'Coffee' },
+    { value: 'raspberry', label: 'Raspberry' },
+    { value: 'lemon', label: 'Lemon' },
+    { value: 'lime', label: 'Lime' },
+    { value: 'orange', label: 'Orange' },
+    { value: 'watermelon', label: 'Watermelon' },
+    { value: 'grape', label: 'Grape' },
+];
+
+type Option = {
+    value: string;
+    label: string;
+}
+
+export const UserSelection = ({ width, email, userId, isLoading, selections }: { width: number; email?: string; userId: string; selections?: Option[]; isLoading?: boolean; }) => {
+    const [selected, setSelected] = useState<Option[]>((selections || []) as Option[]);
+    const [loading, setLoading] = useState(true);
+
+    const text = `Hello${email ? `, ${email.split('@')[0]}` : ' Sexy'}!`;
+
+    useEffect(() => {
+        const setItems = async () => {
+            if (selected.length > 0) {
+                await setItem('user-selection', JSON.stringify({ [userId]: selected.map((e) => e.value) }));
+            }
+        }
+        setItems();
+    }, [selected, userId]);
+
+    useEffect(() => {
+        if (!userId) return;
+        const getItems = async () => {
+            const results = await getItem('user-selection');
+            if (results) {
+                const parsed = JSON.parse(results as unknown as string);
+                Object.keys(parsed)?.includes(userId) ? setSelected(parsed[userId].map((e: string) => ({ value: e, label: e }))) : setSelected([]);
+
+            }
+            setLoading(false)
+        }
+        getItems();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userId]);
+
+    if (loading || isLoading) {
+        return (
+            <Flex w={width} h={width} bg="white" justify="center" align="center">
+                <Text>Loading...</Text>
+            </Flex>
+        )
+    }
+
+    return (
+        <Flex flex={1} direction="column">
+            <Flex justify="center" pt={20} w="100%">
+                <Text m={0}>{text}</Text>
+            </Flex>
+            <Select
+                styles={{
+                    control: (baseStyles, state) => {
+                        return {
+                            ...baseStyles,
+                            width: `${width}px`,
+                            // can customise styles to be like theme!
+                            //borderColor: state.isFocused ? 'grey' : 'red',
+                        }
+                    },
+                }}
+                isMulti
+                name="colors"
+                options={options}
+                value={selected}
+                onChange={(val) => {
+                    setSelected([...val] as Option[])
+                }}
+                className="basic-multi-select"
+                classNamePrefix="select"
+            />
+        </Flex>
+    );
+};
+

src/pages/Newtab/Newtab.jsx

@@ -1,29 +1,116 @@
 import React from 'react';
-import logo from '../../assets/img/logo.svg';
-import './Newtab.css';
-import './Newtab.scss';
-import { Text } from '@chakra-ui/react'
-const Newtab = () => {
+import { ChakraProvider, Flex, Text, Box, Image } from '@chakra-ui/react';
+
+const pageData = {
+  name: 'Eddie',
+  news: {
+    headline: 'Pink dolphins repopulate Hong Kong waters',
+    story:
+      'The coronavirus pandemic has had a major impact on cruise and ferry industries worldwide. In Hong Kong, high-speed ferries were temporarily shut down since the start of the pandemic. Shortly after the waters settled in lockdown, large populations of dolphins returned to Hong Kong waters due to the quieter environment.',
+  },
+  backgroundImage:
+    'https://blog.padi.com/wp-content/uploads/2017/02/shutterstock_164233874.jpg',
+  factOrTip: {
+    title: 'Top tip: Reduce, reuse, and recycle',
+    text: 'Cut down on what you throw away. Follow the three Rs to conserve natural resources and landfill space.',
+  },
+  helpfulSite: {
+    link: 'https://www.websitecarbon.com/',
+    title: 'You might also like...',
+    text: 'Website Carbon Calculator',
+  },
+};
+
+const Card = ({ cardHeader, cardText, link, marginLeft }) => {
   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.
+    <Flex
+      direction="column"
+      w={{ base: '100%', md: '250px', lg: '310px' }}
+      height={{ base: 'auto', md: '300px' }}
+      bg="white"
+      opacity="0.6"
+      borderRadius="2xl"
+      padding={6}
+      marginLeft={{ base: 0, md: marginLeft }}
+      marginBottom={{ base: 4, md: 0 }}
+    >
+      <Box opacity="1">
+        <Text
+          fontSize="24px"
+          fontWeight="bold"
+          color="blue.900"
+          lineHeight="30px"
+          pb={4}
+        >
+          {cardHeader}
         </Text>
-        <Text fontSize='50px' color='tomato'>
-          PLANES
+
+        {link ? (
+          <a href={link}>
+            <Text fontSize="16px" color="blue.900" textDecoration="underline">
+              {cardText}
+            </Text>
+          </a>
+        ) : (
+          <Text fontSize="16px" color="blue.900">
+            {cardText}
+          </Text>
+        )}
+      </Box>
+    </Flex>
+  );
+};
+
+const Newtab = () => {
+  const [email, setEmail] = React.useState('');
+  chrome.identity.getProfileUserInfo({ accountStatus: 'ANY' }, function (info) {
+    console.log('ppppp', info)
+    if (info.email) {
+      setEmail(info.email)
+    }
+  });
+
+  const text = `Hello${email ? `, ${email}` : ''}!`;
+  return (
+    <ChakraProvider>
+      <Box className="App" position="relative">
+        <Text
+          fontSize="40px"
+          color="blue.900"
+          position="absolute"
+          top={8}
+          left={16}
+        >
+          Hello {pageData.name}
         </Text>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
+        <Flex bgColor="blue.50" flex={1} width="100vw" height="100vh">
+          <Image src={pageData.backgroundImage} alt="background" />
+        </Flex>
+        <Flex
+          position="absolute"
+          bottom={0}
+          px={16}
+          py={8}
+          direction={{ base: 'column', md: 'row' }}
         >
-          Learn React!
-        </a>
-      </header>
-    </div>
+          <Card
+            cardHeader={pageData.news.headline}
+            cardText={pageData.news.story}
+          />
+          <Card
+            marginLeft={4}
+            cardHeader={pageData.factOrTip.title}
+            cardText={pageData.factOrTip.text}
+          />
+          <Card
+            marginLeft={4}
+            cardHeader={pageData.helpfulSite.title}
+            cardText={pageData.helpfulSite.text}
+            link={pageData.helpfulSite.link}
+          />
+        </Flex>
+      </Box>
+    </ChakraProvider>
   );
 };
 

src/pages/Popup/Popup.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+
+
+import { Flex } from '@chakra-ui/react'
+import { UserSelection } from '../Components/user-selection';
+
+const Newtab = () => {
+  const [user, setUser] = React.useState<{ id: string, email: string } | undefined>(undefined);
+
+  useEffect(() => {
+    chrome.identity.getProfileUserInfo({ accountStatus: 'ANY' as any }, function (info) {
+      if (info.email) {
+        setUser(info)
+      }
+    });
+  }, []);
+  // TODO add to theme!
+  const popUpDimensions = 300;
+
+  return (
+    <Flex maxWidth={popUpDimensions} maxHeight={popUpDimensions} overflow="scroll">
+      <Flex justify="center" direction="column" flex={1}>
+        <Flex justify="center" direction="row">
+          <Flex w={popUpDimensions} h={popUpDimensions} bg="red" justify="center">
+
+            <Flex bg="white" flex={1} p={20}>
+
+              <UserSelection email={user?.email} width={popUpDimensions * 0.8} userId={user?.id || 'logged-out-user'} />
+            </Flex>
+          </Flex>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default Newtab;