oslabs-beta · austin-cavanagh · Mar 12, 2024 · Mar 8, 2024 · Mar 9, 2024 · Mar 11, 2024
diff --git a/.github/workflows/deployChrome.yml b/.github/workflows/deployChrome.yml
@@ -2,7 +2,8 @@ name: Publish Chrome Extension
 on:
   push:
     branches:
-      - main
+      - OTHER
+      # This will need to be changed - just making a random branch for now so that it doesn't flag the main branch
 
 jobs:
   build-and-publish:

diff --git a/.github/workflows/tests.yml b/.github/workflows/tests.yml
@@ -1,13 +1,14 @@
 name: Run Tests and Build
 on: 
+  # Updated to only run on pull requests to dev because all pushed to main will go through dev
   pull_request:
     branches:
-      - main
-      - dev
-  push:
-    branches:
-      - main
+      # - main
       - dev
+  # push:
+  #   branches:
+  #     - main
+  #     - dev
 jobs:
   unit-testing-extension:
     runs-on: ubuntu-latest
@@ -30,7 +31,7 @@ jobs:
         run: |
           cd extension
           npm test
-  unit-testing-package:
+  unit-testing-package-react:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
@@ -41,18 +42,18 @@ jobs:
           cache: 'npm'          
       - name: Install Package dependencies
         run: |
-          cd package
+          cd package-react
           npm ci
       - name: Install linux handler for github actions
         run: |
-          cd package
+          cd package-react
           npm i @rollup/rollup-linux-x64-gnu
       - name: Build Package
         run: |
-          cd package
+          cd package-react
           npm run build
       - name: Test Package
         run: |
-          cd package
+          cd package-react
           npm test
 
diff --git a/extension/build/background.js b/extension/build/background.js
diff --git a/extension/build/content.js b/extension/build/content.js
diff --git a/extension/build/devtools.html b/extension/build/devtools.html
@@ -0,0 +1,13 @@
+<!-- <script src="devtools.js"></script> -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>React extension</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+  <body>
+    <script src="devtools.js"></script>
+  </body>
+</html>
diff --git a/extension/build/devtools.js b/extension/build/devtools.js
diff --git a/extension/build/icon.png b/extension/build/icon.png
diff --git a/extension/build/index.html b/extension/build/index.html
@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"><title>React extension</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="index.js"></script></head><body></body></html>
diff --git a/extension/build/index.js b/extension/build/index.js
diff --git a/extension/build/index.js.LICENSE.txt b/extension/build/index.js.LICENSE.txt
@@ -0,0 +1,57 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @mui/styled-engine-sc v6.0.0-alpha.6
+ *
+ * @license MIT
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
diff --git a/extension/build/inject.js b/extension/build/inject.js
diff --git a/extension/build/manifest.json b/extension/build/manifest.json
@@ -0,0 +1,35 @@
+{
+    "manifest_version": 3,
+    "name": "RQRewind",
+    "version": "1.0.0",
+    "description": "State management DevTools for React Query",
+    "devtools_page": "devtools.html",
+    "icons": {
+        "16": "icon.png",
+        "48": "icon.png",
+        "128": "icon.png"
+    },
+    "action": {
+        "default_icon": "icon.png"
+    },
+    "background": {
+        "service_worker": "background.js"
+    },
+    "content_scripts": [
+        {
+            "matches": ["http://localhost/*"],
+            "js": ["content.js"]
+        }
+    ],
+    "permissions": [
+        "activeTab",
+        "storage"
+    ],
+    "host_permissions": ["http://localhost/*"],
+    "web_accessible_resources": [
+        {
+          "resources": ["inject.js"],
+          "matches": ["<all_urls>"]
+        }
+      ]
+}
diff --git a/extension/build/panel.html b/extension/build/panel.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>React extension</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+  </head>
+  <body>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/extension/src/containers/DiffTab.tsx b/extension/src/containers/DiffTab.tsx
@@ -1,12 +1,12 @@
-import Typography from '@mui/material/Typography';
-import FormGroup from '@mui/material/FormGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Switch from '@mui/material/Switch';
-import React, { useState } from 'react';
+import Typography from "@mui/material/Typography";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import React, { useState } from "react";
 
-import JsonDiff from '../components/JsonDiff';
+import JsonDiff from "../components/JsonDiff";
 
-import { DataTabProps } from '../types';
+import { DataTabProps } from "../types";
 
 const DiffTab = ({ queryDisplay, currentIndex }: DataTabProps) => {
   // state to determine if unchanged are hidden or closed
@@ -22,21 +22,20 @@ const DiffTab = ({ queryDisplay, currentIndex }: DataTabProps) => {
   return (
     <>
       <FormControlLabel
-        sx={{ color: 'primary.main', marginLeft: 0 }}
+        sx={{ color: "primary.main", marginLeft: 0 }}
         control={
           <Switch checked={isHidden} onChange={toggleChangedProperties} />
         }
-        label={`${isHidden ? 'Show' : 'Hide'} Unchanged Properties `}
+        label={`${isHidden ? "Show" : "Hide"} Unchanged Properties `}
       />
       {queryDisplay.length > 0 && queryDisplay[currentIndex] && (
-        <div className='data'>
+        <div className="data">
           {queryDisplay[currentIndex].map((queryState, i) => (
-            <>
-              <Typography variant='h6' sx={{ color: 'secondary.main' }}>
+            <React.Fragment key={queryState.queryKey}>
+              <Typography variant="h6" sx={{ color: "secondary.main" }}>
                 {queryState.queryKey}
               </Typography>
               <JsonDiff
-                key={queryState.queryKey}
                 currentJson={queryState.queryData}
                 isHidden={isHidden}
                 oldJson={
@@ -47,7 +46,7 @@ const DiffTab = ({ queryDisplay, currentIndex }: DataTabProps) => {
                     : null
                 }
               />
-            </>
+            </React.Fragment>
           ))}
         </div>
       )}

diff --git a/package-react/DevelopmentSteps.md b/package-react/DevelopmentSteps.md
@@ -32,18 +32,21 @@ Download the chrome extension from ***insert url here*** in order to time travel
 ```
 
 ## Set-Up Examples
-**From the package directory:**
-Run with "1" or "2" depending on which example you'd like to set up
-1. `npm run install-all`
-    1. Installs all dependencies for the package and both example apps
-2. `npm run link-dependencies-1` or `npm run link-dependencies-2`
+**From the package-react directory:**
+Execute `package-setup-1` to run:
+1. `npm i`
+    1. Installs all dependencies for the package
+1. `npm run install-example`
+    1. Installs all dependencies for the example app
+2. `npm run link-dependencies`
     1. Installs all peer dependencies in our package to ensure there are no duplicates
     2. Can see all packages currently linked with *`npm ls -g --depth=0 --link=tr`*    
 3. `npm run watch`
     1. Starts rollup in watch mode and creates dist folder
-4. `npm run link-package-1` *or* `npm run link-package-2`
+In a new shell (still in the package-react directory), execute `package-setup-2` to run:
+1. `npm run link-package`
     1. Links React Query Rewind
-5. `npm run example-1` *or* `npm run example-2`
+2. `npm run example`
     1. Starts the example server with webpack. Note: this is a hot reload, but it does not always pick up changes to the npm package
 
 # Publishing

diff --git a/package-react/example/client/src/client/index.tsx b/package-react/example/client/src/client/index.tsx
@@ -5,8 +5,8 @@ import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 // import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import './styles.css';
 
-// import ReactQueryRewind from 'react-query-rewind';
-import ReactQueryRewind from './link';
+import ReactQueryRewind from 'react-query-rewind';
+// import ReactQueryRewind from './link';
 
 const queryClient = new QueryClient({
   defaultOptions: {

diff --git a/package-react/example/server/models/postsOne.json b/package-react/example/server/models/postsOne.json
@@ -1,5 +1,14 @@
 {
   "posts": [
+    {
+      "text": "new",
+      "liked": true,
+      "comments": [
+        "yes"
+      ],
+      "createComment": true,
+      "timestamp": "5:11 PM"
+    },
     {
       "text": "First Post",
       "liked": true,

diff --git a/package-react/package.json b/package-react/package.json
@@ -45,13 +45,12 @@
     "watch": "rollup -c -w",
     "prepublishOnly": "npm run build",
     "clean": "rm -rf dist",
-    "link-package-1": "npm link && (cd examples/example-1 && npm link react-query-rewind)",
-    "link-dependencies-1": "npm link examples/example-1/node_modules/react examples/example-1/node_modules/react-dom examples/example-1/node_modules/@tanstack/react-query",
-    "unlink-package-1": "(cd examples/example-1 && npm unlink react-query-rewind) && npm unlink",
-    "link-package-2": "npm link && (cd examples/example-2/client && npm link react-query-rewind)",
-    "link-dependencies-2": "npm link examples/example-2/client/node_modules/react examples/example-2/client/node_modules/react-dom examples/example-2/client/node_modules/@tanstack/react-query",
-    "unlink-package-2": "(cd examples/example-2/client && npm unlink react-query-rewind) && npm unlink",
-    "website": "cd website && npm start"
+    "link-package": "npm link && (cd example/client && npm link react-query-rewind)",
+    "link-dependencies": "npm link example/client/node_modules/react example/client/node_modules/react-dom example/client/node_modules/@tanstack/react-query",
+    "unlink-package": "(cd example/client && npm unlink react-query-rewind) && npm unlink",
+    "package-setup-1": "npm i && npm run install-example && npm run link-dependencies && npm run watch",
+    "package-setup-2": "npm run link-package && npm run example"
+
   },
   "license": "MIT",
   "peerDependencies": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,8 @@ name: Publish Chrome Extension @@
     on:
       push:
         branches:
-          - main
+          - OTHER
+          # This will need to be changed - just making a random branch for now so that it doesn't flag the main branch
     jobs:
       build-and-publish:
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!doctype html><html><head><meta charset="utf-8"><title>React extension</title><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="index.js"></script></head><body></body></html>