Merge pull request #44 from aaron5670/changelog-screen

Added a changelog screen to show the latest extension updates

Author: aaron5670

package.json

@@ -2,7 +2,7 @@
   "name": "toggle-experiment",
   "displayName": "Toggle Experiment",
   "description": "A browser extension to inject the LocalStorage of a website for Optimizely experiments.",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "author": "Aaron van den Berg",
   "homepage": "https://aaronvandenberg.nl/",
   "scripts": {
@@ -14,6 +14,7 @@
     "@emotion/react": "^11.11.1",
     "@mantine/core": "^6.0.13",
     "@mantine/hooks": "^6.0.13",
+    "@mantine/notifications": "^6.0.13",
     "@plasmohq/storage": "^1.6.1",
     "@tabler/icons-react": "^2.22.0",
     "immer": "^9.0.21",

pnpm-lock.yaml

@@ -41,7 +41,7 @@ const Header = ({ title, description = "" }: HeaderProps) => {
           </ActionIcon>
         </Group>
       </Group>
-      <Text size="xs" color="dimmed" mt="md"  mb="xl">
+      <Text size="xs" color="dimmed"  mb="xl">
         {description}
       </Text>
     </>

src/components/Header.tsx

@@ -1,14 +1,16 @@
 import { useEffect } from "react";
-import { Storage } from "@plasmohq/storage";
 import useStore from "~store/useStore";
 import HomeScreen from "~screens/Home";
 import History from "~screens/History";
 import Settings from "~screens/Settings";
 import Search from "~screens/Search";
-import type { Screen } from "~types/types";
 import ConnectOptimizely from "~screens/ConnectOptimizely";
+import LatestRelease from "~screens/LatestRelease";
+import { MantineProvider } from "@mantine/core";
+import { Notifications } from "@mantine/notifications";
+import getInitialLocalStorageData from "~utils/getInitialLocalStorageData";
+import versionUpdateChecker from "~utils/versionUpdateChecker";
 
-const storage = new Storage();
 const broadcastChannel = new BroadcastChannel("broadcastChannel");
 
 function IndexPopup() {
@@ -24,36 +26,46 @@ function IndexPopup() {
 
   useEffect(() => {
     const setInitialData = async () => {
-      const key = await storage.get("localStorageKey");
-      const value = await storage.get("localStorageValue");
-      const defaultScreen = await storage.get<Screen | null>("defaultScreen");
-      const optimizelyAccessToken = await storage.get("optimizelyAccessToken");
-      const optimizelyProjectId = await storage.get("optimizelyProjectId");
-      const history = await storage.get("history");
+      const {
+        key,
+        history,
+        optimizelyProjectId,
+        optimizelyAccessToken,
+        value,
+        defaultScreen,
+      } = await getInitialLocalStorageData();
+
       setLocalStorageKey(key ?? "optimizelyNonLoggedInUser");
       setLocalStorageValue(value ?? "");
       setOptimizelyAccessToken(optimizelyAccessToken ?? "");
       setOptimizelyProjectId(optimizelyProjectId ?? null);
       setScreen(defaultScreen ?? "home");
+      // setScreen("latest-release");
       setHistoryItems(history ? JSON.parse(history) : []);
 
+      await versionUpdateChecker(setScreen);
+
       // Broadcast history and localStorageKey to service worker
       broadcastChannel.postMessage({
         history: history ? JSON.parse(history) : null,
-        localStorageKey: key ?? "optimizelyNonLoggedInUser",
+        localStorageKey: key ?? "optimizelyNonLoggedInUser"
       });
     };
     setInitialData();
   }, []);
 
   return (
-    <div style={{ width: 350 }}>
-      {screen === "home" && <HomeScreen />}
-      {screen === "history" && <History />}
-      {screen === "settings" && <Settings />}
-      {screen === "search" && <Search />}
-      {screen === "connect-optimizely" && <ConnectOptimizely />}
-    </div>
+    <MantineProvider withNormalizeCSS withGlobalStyles>
+      <Notifications position="top-center" />
+      <div style={{ width: 350 }}>
+        {screen === "home" && <HomeScreen />}
+        {screen === "history" && <History />}
+        {screen === "settings" && <Settings />}
+        {screen === "search" && <Search />}
+        {screen === "connect-optimizely" && <ConnectOptimizely />}
+        {screen === "latest-release" && <LatestRelease />}
+      </div>
+    </MantineProvider>
   );
 }
 

src/popup/index.tsx

@@ -0,0 +1,48 @@
+import { Anchor, Card, Flex, Loader, Text } from "@mantine/core";
+import React, { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import useStore from "~store/useStore";
+
+function LatestRelease() {
+  const { setScreen } = useStore(state => state);
+  const [latestRelease, setLatestRelease] = useState(null);
+
+  useEffect(() => {
+    const getLatestRelease = async () => {
+      const response = await fetch("https://api.github.com/repos/aaron5670/toggle-experiments-extension/releases/latest");
+      const data = await response.json();
+      const markdownContent = data.body.replace(/\r\n/g, "\n");
+
+      setLatestRelease(markdownContent);
+    };
+    getLatestRelease();
+  }, []);
+
+  return (
+    <Card p="lg" radius="md">
+      {latestRelease ? (
+        <ReactMarkdown>
+          {latestRelease}
+        </ReactMarkdown>
+      ) : (
+        <Flex
+            mih={250}
+          justify="center"
+          align="center"
+          direction="row"
+          wrap="wrap"
+        >
+          <Loader size="lg" />
+        </Flex>
+      )}
+
+      <Text fz="xs" mt="md" align="end">
+        <Anchor onClick={() => setScreen("home")}>
+          Go back to home
+        </Anchor>
+      </Text>
+    </Card>
+  );
+}
+
+export default LatestRelease;

src/screens/LatestRelease.tsx

@@ -66,9 +66,9 @@ function Search() {
           rightSectionWidth={37}
         />
       ) : (
-        <span>
+        <Text fz="sm">
           Optimizely access token not found. Please go to the <a onClick={() => setScreen("settings")} href="#">settings screen</a> to set it.
-        </span>
+        </Text>
       )}
       {experiments?.length > 0 && (
         <>

src/screens/Search.tsx

@@ -1,4 +1,4 @@
-import { Anchor, Button, Card, Center, Group } from "@mantine/core";
+import { Text, Anchor, Button, Card, Center, Group } from "@mantine/core";
 import Header from "~components/Header";
 import LocalStorageField from "~components/settings/LocalStorageInputField";
 import DefaultScreenSegmentField from "~components/settings/DefaultScreenSegmentField";
@@ -25,12 +25,16 @@ const Settings = () => {
         </Button>
       </Center>
       <Group position="center">
-        <Anchor href="https://github.com/aaron5670/toggle-experiments-extension" target="_blank" mt="md">
-          GitHub
-        </Anchor>
-        <Anchor href={`https://github.com/aaron5670/toggle-experiments-extension/releases/v${manifestData.version}`} target="_blank" mt="md">
-          v{manifestData.version}
-        </Anchor>
+        <Text fz="xs" mt="md">
+          <Anchor href="https://github.com/aaron5670/toggle-experiments-extension" target="_blank" mt="md">
+            GitHub
+          </Anchor>
+          {"  "}
+          <Anchor href={`https://github.com/aaron5670/toggle-experiments-extension/releases/v${manifestData.version}`}
+                  target="_blank" mt="md">
+            v{manifestData.version}
+          </Anchor>
+        </Text>
       </Group>
     </Card>
   );

src/screens/Settings.tsx

@@ -1,4 +1,4 @@
-export type Screen = 'home' | 'history' | 'settings' | 'search' | 'connect-optimizely';
+export type Screen = 'home' | 'history' | 'settings' | 'search' | 'connect-optimizely' | 'latest-release';
 export interface HistoryItems {
   name: string,
   key: string,

src/types/types.ts

@@ -0,0 +1,24 @@
+import { Storage } from "@plasmohq/storage";
+import type { Screen } from "~types/types";
+
+const storage = new Storage();
+
+const getInitialLocalStorageData = async () => {
+  const key = await storage.get("localStorageKey");
+  const value = await storage.get("localStorageValue");
+  const defaultScreen = await storage.get<Screen | null>("defaultScreen");
+  const optimizelyAccessToken = await storage.get("optimizelyAccessToken");
+  const optimizelyProjectId = await storage.get("optimizelyProjectId");
+  const history = await storage.get("history");
+
+  return {
+    key,
+    value,
+    defaultScreen,
+    optimizelyAccessToken,
+    optimizelyProjectId,
+    history,
+  };
+};
+
+export default getInitialLocalStorageData;

src/utils/getInitialLocalStorageData.ts

@@ -0,0 +1,30 @@
+import { notifications } from "@mantine/notifications";
+import type { Screen } from "~types/types";
+import { Storage } from "@plasmohq/storage";
+
+const storage = new Storage();
+
+const versionUpdateChecker = async (setScreen: (screen: Screen) => void) => {
+  const savedVersion = await storage.get("extensionVersion");
+  const currentVersion = chrome.runtime.getManifest().version;
+
+  if (savedVersion === currentVersion) return;
+
+  // If the savedVersion is not the current version, then it means that the user has updated the extension.
+  await storage.set("extensionVersion", currentVersion);
+
+  // Show a notification to the user that a new version is released.
+  notifications.show({
+    id: "new-version-release",
+    title: "A new version is released! 🎉",
+    message: "Click on this notification to see what's new in this version.",
+    color: "pink",
+    autoClose: false,
+    onClick: () => {
+      setScreen("latest-release");
+      notifications.hide("new-version-release");
+    }
+  });
+};
+
+export default versionUpdateChecker;