Skip to content

Commit

Permalink
Merge pull request #37 from oslabs-beta/austin/readme
Browse files Browse the repository at this point in the history
updated general readme
  • Loading branch information
ruifan-IU authored Dec 15, 2023
2 parents accb920 + 73131bc commit 458030a
Show file tree
Hide file tree
Showing 9 changed files with 73 additions and 106 deletions.
96 changes: 53 additions & 43 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,19 @@
<img src="./extension/public/icon.png" alt="Logo" width="250"/>
</p>

# Technologies

[![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://www.javascript.com/)
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)](https://reactjs.org/)
[![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)](https://html.com/html5/)
[![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge&logo=webpack&logoColor=black)](https://webpack.js.org/)
[![D3](https://img.shields.io/badge/d3%20js-F9A03C?style=for-the-badge&logo=d3.js&logoColor=white)](https://d3js.org/)
[![ESLint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/)
[![Material UI](https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge&logo=mui&logoColor=white)](https://mui.com/)
[![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/)
[![Babel](https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge&logo=babel&logoColor=white)](https://babeljs.io/)

# Overview

React Query Rewind introduces a powerful DevTool extension designed to work in conjunction with React Query's built-in DevTools in order to optimize time-traveling through state changes in an application. This open-source extension is tailored to enhance the debugging experience for React Query users, allowing them to explore state changes and component relationships with ease.
Expand All @@ -12,47 +25,57 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c

## Prerequisites

This is an example of how to list things you need to use the software and how to install them.
1. React Query installed and in use in your application.

2. Install RQRewind Chrome Extension.

- npm
```sh
npm install RQRewind npm package
```
<!-- _link / picture of Extension in Chrome Store_ -->

## Installation

1. Get a free API Key at [https://example.com](https://example.com)
2. Clone the repo
1. Download npm package into your application.

```sh
git clone https://github.com/github_username/repo_name.git
npm i react-query-rewind
```
3. Install NPM packages

2. Import the ReactQueryRewind component into the root of your applicaiton.

_picture of importing the component_

```sh
npm install
```
4. Enter your API in `config.js`
```js
const API_KEY = 'ENTER YOUR API';
import ReactQueryRewind from 'react-query-rewind'
```

3. Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.

<p align="left">
<img src="./assets/component-placement.png" alt="Component Placement" width="600"/>
</p>

4. Open the Chrome DevTool Extension and start coding!

<p align="left">
<img src="./assets/chrome-devtool.png" alt="Component Placement" width="600"/>
</p>

# Features

- <b> Query States: </b> Upon opening RQRewind in Chrome Dev Tools, you will see the Queries tab open with a drop down menu listing the query keys of all the incoming queries. Select the queries that you want to monitor, make changes on the web app, and the changes of query states will be logged as reflected by the growing number above the play bar. Use the play bar to navigate to a particular state snapshot that you would like to inspect.
<p align="center"><img src="./assets/query-states.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
- <b>Query States: </b>Upon opening RQRewind in Chrome Dev Tools, you will see the Queries tab open with a drop down menu listing the query keys of all the incoming queries. Select the queries that you want to monitor, make changes on the web app, and the changes of query states will be logged as reflected by the growing number above the play bar. Use the play bar to navigate to a particular state snapshot that you would like to inspect.

- <b>State Diff: </b>Toggle on the Diff button to see state changes between each snapshot highlighted. Turn on the switch on top of the page to show only parts of the state that are changed.
<p align="center"><img src="./assets/query-states.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>

<p align="center"><img src="./assets/state-diff.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
- <b>State Diff: </b>Toggle on the Diff button to see state changes between each snapshot highlighted. Turn on the switch on top of the page to show only parts of the state that are changed.

- <b>Live UI Change: </b>As you review the state change history, there is also the option to turn on the time travel mode by clicking on the clock icon button. Under time travel mode, when visiting a logged state snapshot on RQRewindl, the UI of the app will change accordingly. Turn off time travel mode for RQRewind to continue logging future state changes.
<p align="center"><img src="./assets/state-diff.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>

<p align="center"><img src="./assets/UI-change.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
- <b>Live UI Change: </b>As you review the state change history, there is also the option to turn on the time travel mode by clicking on the clock icon button. Under time travel mode, when visiting a logged state snapshot on RQRewindl, the UI of the app will change accordingly. Turn off time travel mode for RQRewind to continue logging future state changes.

- <b>Component Tree: </b> Click on the Component Tree tab and turn on the Start Profiling switch. Click on any component on the app, and view the component tree that is rendered on the dev tools panel.
<p align="center"><img src="./assets/UI-change.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>

<p align="center"><img src="./assets/component-tree.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
- <b>Component Tree: </b> Click on the Component Tree tab and turn on the Start Profiling switch. Click on any component on the app, and view the component tree that is rendered on the dev tools panel.

_For more examples, please refer to the [Documentation](https://example.com)_
<p align="center"><img src="./assets/component-tree.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>

# Contributing

Expand All @@ -65,17 +88,15 @@ Don't forget to give the project a star! Thanks again!
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
<p align="right">(<a href="#readme-top">back to top</a>)</p>
# Contact Information
Austin Cavanagh - [@linkedin_handle](https://twitter.com/twitter_handle) - email@email_client.com
Austin Cavanagh - [GitHub](https://github.com/austin-cavanagh) - [LinkedIn](https://www.linkedin.com/in/austincavanagh/) - austin.cavanagh.cs@gmail.com
Emma Teering - [@linkedin_handle](https://twitter.com/twitter_handle) - email@email_client.com
Emma Teering - [GitHub](https://github.com/eteering) - [LinkedIn](https://www.linkedin.com/in/emma-teering/) - teeringe@gmail.com
John Dunn - [@linkedin_handle](https://twitter.com/twitter_handle) - email@email_client.com
John Dunn - [GitHub](https://github.com/johnwdunn20) - [LinkedIn](https://www.linkedin.com/in/johnwdunn/) - johnwdunn20@gmail.com
Rui Fan - [@linkedin_handle](https://twitter.com/twitter_handle) - email@email_client.com
Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linkedin.com/in/rui-fan-868231299/) - rfan1986@gmail.com
# Links
Expand All @@ -84,22 +105,11 @@ Rui Fan - [@linkedin_handle](https://twitter.com/twitter_handle) - email@email_c
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome)
# Technologies
[![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://www.javascript.com/)
[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)](https://reactjs.org/)
[![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)](https://html.com/html5/)
[![Webpack](https://img.shields.io/badge/webpack-%238DD6F9.svg?style=for-the-badge&logo=webpack&logoColor=black)](https://webpack.js.org/)
[![D3](https://img.shields.io/badge/d3%20js-F9A03C?style=for-the-badge&logo=d3.js&logoColor=white)](https://d3js.org/)
[![ESLint](https://img.shields.io/badge/eslint-3A33D1?style=for-the-badge&logo=eslint&logoColor=white)](https://eslint.org/)
[![Material UI](https://img.shields.io/badge/Material%20UI-007FFF?style=for-the-badge&logo=mui&logoColor=white)](https://mui.com/)
[![Jest](https://img.shields.io/badge/Jest-C21325?style=for-the-badge&logo=jest&logoColor=white)](https://jestjs.io/)
[![Babel](https://img.shields.io/badge/Babel-F9DC3E?style=for-the-badge&logo=babel&logoColor=white)](https://babeljs.io/)
# License
MIT Link
_MIT Link_
<p align="right">(<a href="#readme-top">back to top</a>)</p>
<!-- TABLE OF CONTENTS -->
<!-- <details>
Expand Down
Binary file added assets/chrome-devtool.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/component-placement.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 12 additions & 1 deletion package/examples/example-2/client/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package/examples/example-2/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
"@tanstack/react-query": "^5.8.7",
"@tanstack/react-query-devtools": "^5.8.7",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"react-dom": "^18.2.0",
"react-query-rewind": "^1.0.1"
},
"devDependencies": {
"@babel/cli": "^7.21.0",
Expand Down
3 changes: 0 additions & 3 deletions package/examples/example-2/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,5 @@
"license": "ISC",
"devDependencies": {
"npm-run-all": "^4.1.5"
},
"dependencies": {
"react-query-rewind": "^1.0.1"
}
}
14 changes: 2 additions & 12 deletions package/examples/example-2/server/models/postsOne.json
Original file line number Diff line number Diff line change
@@ -1,21 +1,11 @@
{
"posts": [
{
"text": "hi",
"text": "First Post – Feed 1",
"liked": false,
"comments": [
"new",
"hello"
],
"createComment": true,
"timestamp": "12:01 PM"
},
{
"text": "Blog 2",
"liked": true,
"comments": [],
"createComment": false,
"timestamp": "9:28 PM"
"timestamp": "3:43 PM"
}
]
}
15 changes: 2 additions & 13 deletions package/examples/example-2/server/models/postsThree.json
Original file line number Diff line number Diff line change
@@ -1,22 +1,11 @@
{
"posts": [
{
"text": "new",
"text": "First Post – Feed 3",
"liked": false,
"comments": [],
"createComment": false,
"timestamp": "7:26 PM"
},
{
"id": 1,
"text": "Feed 3 - First Post",
"liked": true,
"comments": [
"First comment on first post",
"Second comment on first post"
],
"createComment": false,
"timestamp": "12:00 PM"
"timestamp": "3:42 PM"
}
]
}
35 changes: 2 additions & 33 deletions package/examples/example-2/server/models/postsTwo.json
Original file line number Diff line number Diff line change
@@ -1,42 +1,11 @@
{
"posts": [
{
"text": "test",
"liked": true,
"comments": [],
"createComment": false,
"timestamp": "7:33 PM"
},
{
"text": "new",
"text": "First Post – Feed 3",
"liked": false,
"comments": [],
"createComment": false,
"timestamp": "7:33 PM"
},
{
"text": "hi",
"liked": false,
"comments": [],
"createComment": false,
"timestamp": "7:33 PM"
},
{
"text": "4",
"liked": true,
"comments": [],
"createComment": false,
"timestamp": "9:57 PM"
},
{
"text": "2",
"liked": true,
"comments": [
"hello",
"hi"
],
"createComment": true,
"timestamp": "9:57 PM"
"timestamp": "3:43 PM"
}
]
}

0 comments on commit 458030a

Please sign in to comment.