Merge pull request #62 from oslabs-beta/john/examples

John/examples

Author: austin-cavanagh

.gitignore

@@ -1,3 +1,199 @@
 node_modules/
 dist
-coverage/
+coverage/
+.next/
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Meteor
+.meteor/local
+
+# Gyp specific files
+gyp-mac-tool
+.gyp
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Sass
+.sass-cache/
+
+# FuseBox cache
+.fusebox/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.test
+.env.production
+
+# Next.js
+.next/
+out/
+
+# Next.js build output
+.next/static/*
+!.next/static/images
+*.next/static/favicon.ico
+.next/static/media/*
+
+# Next.js cache
+.next/cache/
+
+# Nuxt.js build output
+.nuxt/
+dist/
+
+# Gatsby files
+.cache/
+public/
+
+# Expo
+.expo/
+.expo-shared/
+
+# VS Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# IntelliJ IDEA
+.idea/
+
+# JetBrains Rider
+.idea/
+
+# WebStorm
+.idea/
+
+# PHPStorm
+.idea/
+
+# Android Studio
+.idea/
+
+# macOS
+*.DS_Store
+*.AppleDouble
+*.LSOverride
+
+# Thumbnails
+._*
+
+# Files that might appear on external disks
+.Spotlight-V100
+.Trashes
+
+# Compiled Java classes
+*.class
+
+# Java JAR files
+*.jar
+
+# Java WAR files
+*.war
+
+# Java EAR files
+*.ear
+
+# NetBeans
+nbproject/private/
+build/
+nbbuild/
+dist/
+nbdist/
+nbactions.xml
+nb-configuration.xml
+
+# Maven
+target/
+
+# Gradle
+.gradle/
+build/
+
+# Mobile Tools for Java (J2ME)
+.mtj.tmp/
+
+# Package Files
+*.swp
+*.swo
+
+# Windows image file caches
+Thumbs.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk

extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "React Query Rewind",
   "description": "State Management DevTool for React Query",
-  "version": "1.0",
+  "version": "2.1.0",
   "permissions": ["activeTab", "storage", "scripting"],
   "host_permissions": ["<all_urls>"],
   "background": {

extension/src/App.tsx

@@ -36,11 +36,20 @@ function App() {
     port.onMessage.addListener(message => {
       // console.log('DEVTOOL: Recieved message from background.ts', message);
 
-      if (message.type === 'event') {
+      // By checking data more thoroughly, we can avoid adding data that we don't expect in child components. This is the data we have the least control over.
+      // Future iteration could use Zod or something a little less manual and be a more prcise
+      console.log('Recieved event message', message)
+      if (
+        message.type === 'event' &&
+        message.payload &&
+        typeof message.payload.eventType === 'string' &&
+        Array.isArray(message.payload.queryKey) &&
+        typeof message.payload.queryHash === 'string'
+      ) {
         setQueryEvents(queryEvents => [...queryEvents, message.payload]);
       }
 
-      if (message.type === 'tree') {
+      if (message.type === 'tree' && message?.data) {
         // console.log('APP.tsx: Recieved tree data', message);
         setTreeData(message.data);
       }

extension/src/components/MultiSelect.tsx

@@ -21,7 +21,7 @@ export default function MultiSelect({
   const [queryOptions, setQueryOptions] = useState<string[]>([]);
 
   useEffect(() => {
-    const newQueryOptions = queryEvents.map((event) => event.queryHash);
+    const newQueryOptions = queryEvents.map((event) => event?.queryHash);
     const uniqueQueryOptions = Array.from(new Set(newQueryOptions));
     setQueryOptions(uniqueQueryOptions);
     // when there are new query options, we need to check with local storage and see if any of them are set

extension/src/functions/createDisplayArray.ts

@@ -21,14 +21,14 @@ const createDisplayArray = (
 
   // filter for events of selected queries
   const selectedQueryEvents = queryEvents.filter((queryEvent) =>
-    selectedQueries.includes(queryEvent.queryHash)
+    selectedQueries.includes(queryEvent?.queryHash)
   );
 
   // traverse queries and update the relevant query data for that event
   selectedQueryEvents.forEach((queryEvent) => {
     const prevDisplay = [...allDisplays[allDisplays.length - 1]];
     const newDisplay = prevDisplay.map((display) => {
-      if (display.queryKey === queryEvent.queryHash) {
+      if (display.queryKey === queryEvent?.queryHash) {
         return { ...display, queryData: queryEvent.queryData };
       }
       return display;

extension/src/types.d.ts

@@ -61,7 +61,7 @@ export type JsonDiffType = {
 // variable types
 export type QueryEvent = {
   eventType: string;
-  queryKey: string[];
+  queryKey: (string | number) [];
   queryHash: string;
   timestamp: Date;
   queryData?: any;