Skip to content

Commit a4ed265

Browse files
Merge pull request #55 from oslabs-beta/john/movies
John/movies
2 parents df799c4 + cfd2aa7 commit a4ed265

File tree

18 files changed

+44
-315
lines changed

18 files changed

+44
-315
lines changed

.github/workflows/deployChrome.yml

Lines changed: 0 additions & 29 deletions
This file was deleted.

.github/workflows/npmPublish.yml

Lines changed: 0 additions & 31 deletions
This file was deleted.

README.md

Lines changed: 8 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c
4444
_picture of importing the component_
4545

4646
```javascript
47-
import ReactQueryRewind from 'react-query-rewind';
47+
import ReactQueryRewind from "react-query-rewind";
4848
```
4949

5050
3. Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.
@@ -61,26 +61,26 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c
6161
4. Open the Chrome DevTool Extension and start coding!
6262

6363
<p align="left">
64-
<img src="./assets/chrome-devtool.png" alt="Component Placement" width="600"/>
64+
<img src="https://i.imgur.com/xTEPI20.png" alt="Component Placement" width="600"/>
6565
</p>
6666

6767
# Features
6868

6969
- <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.
7070

71-
<p align="center"><img src="./assets/query-states.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
71+
<p align="center"><img src="https://i.imgur.com/g8KrqAg.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
7272

7373
- <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.
7474

75-
<p align="center"><img src="./assets/state-diff.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
75+
<p align="center"><img src="https://i.imgur.com/a8KAgXZ.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
7676

7777
- <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.
7878

79-
<p align="center"><img src="./assets/UI-change.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
79+
<p align="center"><img src="https://i.imgur.com/AZ3QGuf.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
8080

8181
- <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.
8282

83-
<p align="center"><img src="./assets/component-tree.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
83+
<p align="center"><img src="https://i.imgur.com/qa5UJTW.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
8484

8585
# Contributing
8686

@@ -111,43 +111,6 @@ Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linked
111111
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome)
112112
113113
# License
114+
[MIT](https://www.mit.edu/~amini/LICENSE.md)
114115
115-
_MIT Link_
116-
117-
<p align="right">(<a href="#readme-top">back to top</a>)</p>
118-
119-
<!-- TABLE OF CONTENTS -->
120-
<!-- <details>
121-
<summary>Table of Contents</summary>
122-
<ol>
123-
<li>
124-
<a href="#about-the-project">About The Project</a>
125-
<ul>
126-
<li><a href="#built-with">Built With</a></li>
127-
</ul>
128-
</li>
129-
<li>
130-
<a href="#getting-started">Getting Started</a>
131-
<ul>
132-
<li><a href="#prerequisites">Prerequisites</a></li>
133-
<li><a href="#installation">Installation</a></li>
134-
</ul>
135-
</li>
136-
<li><a href="#usage">Usage</a></li>
137-
<li><a href="#roadmap">Roadmap</a></li>
138-
<li><a href="#contributing">Contributing</a></li>
139-
<li><a href="#license">License</a></li>
140-
<li><a href="#contact">Contact</a></li>
141-
<li><a href="#acknowledgments">Acknowledgments</a></li>
142-
</ol>
143-
</details> -->
144-
145-
<!-- <p align="right">(<a href="#readme-top">back to top</a>)</p> -->
146-
147-
<!-- <a name="website" href="ARE WE GONNA HAVE A WEBSITE">Website</a> -->
148-
149-
<!-- [![Contributors](https://img.shields.io/github/contributors/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/graphs/contributors)
150-
[![Forks](https://img.shields.io/github/forks/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/forks)
151-
[![Stargazers](https://img.shields.io/github/stars/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/stargazers)
152-
[![Issues](https://img.shields.io/github/issues/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/issues)
153-
[![MIT License](https://img.shields.io/github/license/oslabs-beta/react-query-rewind-chrome.svg?style=for-the-badge)](https://github.com/oslabs-beta/react-query-rewind-chrome/blob/main/LICENSE) -->
116+
<p align="right">(<a href="#readme-top">back to top</a>)</p>

extension/build/background.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

extension/build/content.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

extension/build/devtools.html

Lines changed: 0 additions & 13 deletions
This file was deleted.

extension/build/devtools.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

extension/build/icon.png

-330 KB
Binary file not shown.

extension/build/index.html

Lines changed: 0 additions & 1 deletion
This file was deleted.

extension/build/index.js

Lines changed: 0 additions & 75 deletions
This file was deleted.

extension/build/index.js.LICENSE.txt

Lines changed: 0 additions & 57 deletions
This file was deleted.

extension/build/inject.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

extension/build/manifest.json

Lines changed: 0 additions & 35 deletions
This file was deleted.

extension/build/panel.html

Lines changed: 0 additions & 11 deletions
This file was deleted.

package-react/README.md

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,18 +33,18 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c
3333

3434
## Installation
3535

36-
1. Download npm package into your application as a dev dependency.
36+
1. Download npm package into your application.
3737

3838
```sh
39-
npm i --save-dev react-query-rewind
39+
npm i react-query-rewind
4040
```
4141

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

4444
_picture of importing the component_
4545

4646
```javascript
47-
import ReactQueryRewind from 'react-query-rewind';
47+
import ReactQueryRewind from "react-query-rewind";
4848
```
4949

5050
3. Place ReactQueryRewind next to the root of your application inside the QueryClientProvider component.
@@ -61,26 +61,37 @@ React Query Rewind introduces a powerful DevTool extension designed to work in c
6161
4. Open the Chrome DevTool Extension and start coding!
6262

6363
<p align="left">
64-
<img src="./assets/chrome-devtool.png" alt="Component Placement" width="600"/>
64+
<img src="https://i.imgur.com/xTEPI20.png" alt="Component Placement" width="600"/>
6565
</p>
6666

6767
# Features
6868

6969
- <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.
7070

71-
<p align="center"><img src="./assets/query-states.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
71+
<p align="center"><img src="https://i.imgur.com/g8KrqAg.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
7272

7373
- <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.
7474

75-
<p align="center"><img src="./assets/state-diff.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
75+
<p align="center"><img src="https://i.imgur.com/a8KAgXZ.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
7676

7777
- <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.
7878

79-
<p align="center"><img src="./assets/UI-change.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
79+
<p align="center"><img src="https://i.imgur.com/AZ3QGuf.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
8080

8181
- <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.
8282

83-
<p align="center"><img src="./assets/component-tree.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
83+
<p align="center"><img src="https://i.imgur.com/qa5UJTW.gif" width='800' style="margin-top: 1em; margin-bottom: 1em;"></p>
84+
85+
# Contributing
86+
87+
React Query Rewind values the strength of community involvement. If you're enthusiastic about React Query, time-traveling state, or improving debugging experiences, your contributions are highly appreciated. Whether it's code enhancements, documentation improvements, or innovative feature suggestions, your engagement can play a pivotal role in shaping the future of React Query Rewind. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
88+
Don't forget to give the project a star! Thanks again!
89+
90+
1. Fork the Project
91+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
92+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
93+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
94+
5. Open a Pull Request
8495
8596
# Contact Information
8697
@@ -100,7 +111,6 @@ Rui Fan - [GitHub](https://github.com/ruifan-IU) - [LinkedIn](https://www.linked
100111
Project Link: [React Query Rewind](https://github.com/oslabs-beta/react-query-rewind-chrome)
101112
102113
# License
114+
[MIT](https://www.mit.edu/~amini/LICENSE.md)
103115
104-
_MIT Link_
105-
106-
<p align="right">(<a href="#readme-top">back to top</a>)</p>
116+
<p align="right">(<a href="#readme-top">back to top</a>)</p>

package-react/example/client/src/components/NavBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function NavBar() {
1010

1111
return (
1212
<nav className="border-gray-200 dark:bg-gray-800 dark:border-gray-700 border-b-1 border-gray-300 shadow dark:shadow-dark-custom w-full bg-gray-50">
13-
<div className="max-w-screen-lg flex items-center justify-between mx-auto">
13+
<div className="max-w-screen-lg flex items-center justify-between mx-auto ml-4">
1414
<a href="#" className="flex items-center space-x-4 rtl:space-x-reverse">
1515
<svg
1616
xmlns="http://www.w3.org/2000/svg"

package-react/example/server/models/sports.json

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[
22
{
33
"text": "Can't believe the 49ers pulled off that comeback! Their defense in the second half was incredible.",
4-
"liked": false,
4+
"liked": true,
55
"createComment": false,
66
"timestamp": "Mar 10, 2024",
77
"username": "Marcus Holloway",
@@ -12,6 +12,12 @@
1212
"timestamp": "Mar 10, 2024",
1313
"username": "Samuel Drake",
1414
"picture": "https://flowbite.com/docs/images/people/profile-picture-2.jpg"
15+
},
16+
{
17+
"text": "yeah!\n",
18+
"timestamp": "Mar 20, 2024",
19+
"username": "Guest",
20+
"picture": "guest"
1521
}
1622
]
1723
},

0 commit comments

Comments
 (0)