Merge pull request #18 from oslabs-beta/austin/cleanup-example-2

connected to chrome extension

Author: ruifan-IU

examples/example-2/client/src/client/App.tsx

@@ -2,9 +2,8 @@ import React, { useState, useEffect } from 'react';
 import PostsOne from './components/PostsOne';
 import PostsTwo from './components/PostsTwo';
 import PostsThree from './components/PostsThree';
-import ChromeComponent from './components/ChromeComponent';
-import { useQuery } from '@tanstack/react-query';
-import { QueryKey } from '@tanstack/react-query';
+// import ChromeComponent from './components/ChromeComponent';
+import { useQuery, QueryKey } from '@tanstack/react-query';
 
 type QueryEvent = {
  eventType: string;
@@ -22,7 +21,6 @@ type QueryData = {
 
 const App = () => {
  const [screenView, setScreenView] = useState<string>('Posts One');
-
  const [queryData, setQueryData] = useState<QueryData>({});
 
  // Fetch the data from React Query's cache
@@ -36,7 +34,6 @@ const App = () => {
  'queryHash' in queryEvent
  ) {
  const newEvent = queryEvent as QueryEvent;
-
  const queryHash = newEvent.queryHash;
  const existingUpdates = queryData[queryHash]?.updates || [];
 
@@ -99,7 +96,7 @@ const App = () => {
  {screenView === 'Posts One' && <PostsOne />}
  {screenView === 'Posts Two' && <PostsTwo />}
  {screenView === 'Posts Three' && <PostsThree />}
- {screenView === 'Data' && <ChromeComponent queryData={queryData} />}
+ {/* {screenView === 'Data' && <ChromeComponent queryData={queryData} />} */}
  </div>
  </>
  );

examples/example-2/client/src/client/components/ChromeComponent.tsx

@@ -29,7 +29,6 @@ type QuerySnapshot = {
 
 const ChromeComponent: React.FC<ChromeComponentProps> = ({ queryData }) => {
  const [querySnapshot, setQuerySnapshot] = useState<QuerySnapshot>({});
-
  const [currentIndex, setCurrentIndex] = useState(0);
 
  const [selectedQueries, setSelectedQueries] = useState<SelectedQueriesState>(
@@ -97,6 +96,8 @@ const ChromeComponent: React.FC<ChromeComponentProps> = ({ queryData }) => {
  );
  };
 
+ console.log(queryData);
+
  return (
  <>
  <div className="select-query">