Merge pull request #31 from oslabs-beta/reactime7

Hover feature on the rendering tab and added gif and flags to the Readme

Author: Nkmai

README.fr.md

@@ -30,13 +30,13 @@
 
 <h5 align="center">
 <br>
-  <a href="./README.rus.md">🇷🇺  &nbsp; РУССКАЯ ВЕРСИЯ</a> &nbsp; • &nbsp;  <a href="./README.fr.md">🇫🇷  &nbsp; VERSION FRANÇAISE</a>
+  <a href="./README.rus.md">🇷🇺  &nbsp; РУССКАЯ ВЕРСИЯ</a> &nbsp; • &nbsp;  <a href="./README.md">🇺🇸  &nbsp; ENGLISH VERSION </a>
   <br>
 </h5>
 <br>
 
 <p align="center">
-<img src="./assets/reactime7.gif" />
+<img src="./assets/new-reactime.gif" />
 </p>
 
 <p align="center">

README.md

@@ -9,7 +9,7 @@
   <br>
 </h1>
 
-<h4 align="center"> Reactime is a performance and debugging tool for React developers. It records a snapshot whenever a target application's state is changed and allows the user to jump to any previously recorded state. </h4>
+<h4 align="center"> Reactime is a performance and debugging tool for React developers <b>(compatible with Gatsy and Next.js)</b>. It records a snapshot whenever a target application's state is changed and allows the user to jump to any previously recorded state, detect the amount of renders of each component and average time of rendering.</h4>
 
 <br>
 <p align="center">
@@ -43,14 +43,14 @@
   <a href="#how-to-use">How To Use</a> • <a href="#features">Features</a> • <a href="https://reactime.io">Website</a> • <a href="#read-more">Read More</a>
 </p>
 
-Currently, Reactime supports React apps using stateful components and Hooks, with beta support for Recoil and Context API.
+Currently, Reactime supports React apps using stateful components and Hooks, including frameworks like Gatsby and Next.js, with beta support for Recoil and Context API.
 
 <b>Reactime version 7.0</b> beta can help you to avoid unnecessary re-renders. Identifying wasted renders in your React applications is the perfect start to identifying most performance issues.
 Reactime 7.0 fixes previous version bugs and incorporates improved visualizations for component relationships. Reactime 7.0 includes expanded [typedoc](https://typedoc.org/api/) documentation for developers looking to contribute to the source code.
 
 After installing Reactime, you can test its functionalities with your React application in development mode.
 
-Please note, the time jumping feature will ONLY work when your application is running in development mode. In production mode, you are able to view your application’s component map but no additional features.
+Please note, the time jumping feature will <b>ONLY</b> work when your application is running in <b>development mode</b>. In production mode, you are able to view your application’s component map but no additional features.
 
 ## <b>Installation</b>
 
@@ -88,6 +88,12 @@ Reactime is an open source project, and we’d really appreciate your help with
 
 One of the most common issues that affects performance in React is unnecessary render cycles. This problem can be fixed by checking your renders in the Performance tab in Chrome DevTools under the Reactime panel.
 
+### Gatsby
+Reactime offers fully support for Gatsy applications. You would be able to identify unnecessary renders, duration of each rendering, travel-debugging features and visual representation of the tree components. 
+
+### Next.js
+Reactime offers debugging and performance tools for Next.js apps: time-traveling debugging, preventing unnecessary components re-renders and making your application faster. 
+
 ### Recording
 
 Whenever state is changed (whenever setState, useState is called), this extension will create a snapshot of the current state tree and record it. Each snapshot will be displayed in Chrome DevTools under the Reactime panel.
@@ -107,6 +113,11 @@ Reactime offers beta support for TypeScript applications using stateful class co
 ### Documentation
 
 After cloning this repository, developers can simply run `npm run docs` at the root level and serve the dynamically generated `/docs/index.html` file on a browser. Doing so will provide a readable, extensible, and interactive GUI view of the structure and interfaces of the codebase.
+<br>
+<p align="center">
+<img src="./assets/nextjs.gif" />
+</p>
+<br>
 
 ### <b>Additional Features</b>
 

README.rus.md

@@ -14,13 +14,13 @@
 
 <h5 align="center">
 <br>
-  <a href="./README.md">🇷🇺  &nbsp; ENGLISH VERSION </a> &nbsp; • &nbsp;  <a href="./README.fr.md">🇫🇷  &nbsp; VERSION FRANÇAISE</a>
+  <a href="./README.md">🇺🇸 &nbsp; ENGLISH VERSION </a> &nbsp; • &nbsp;  <a href="./README.fr.md">🇫🇷  &nbsp; VERSION FRANÇAISE</a>
   <br>
 </h5>
 <br>
 
 <p align="center">
-<img src="./assets/reactime7.gif" />
+<img src="./assets/new-reactime.gif" />
 </p>
 
 <b>Reactime</b> - расширение для дебаггинга/отладки React приложений. Оно создает снэпшоты при каждом изменении состояния (state) и позволяет пользованию прыгать на любое предыдущее состояние (state). 

archive/.pre-v4-demo 2.gif.icloud

@@ -1,38 +1,63 @@
 
 import React from 'react';
-
+import { onHover, onHoverExit } from '../actions/actions';
+import { useStoreContext } from '../store'
 
 const RenderingFrequency = (props) => {
-  const perfData = props.data 
-
+	const perfData = props.data 
   return (
-    <div>
-      {
-      Object.keys(perfData).map( componentName => {
-        const currentComponent = perfData[componentName]
-        return (
-					<div className="StyledGridElement">
-						<div className="RenderLeft">
-							<h3>{componentName} </h3>
-							<h4>{currentComponent.stateType}</h4>
-							<h4>
-								average time:{' '}
-								{(
-									currentComponent.totalRenderTime /
-									currentComponent.renderFrequency
-								).toFixed(3)}{' '}
-								ms
-							</h4>
-						</div>
-						<div className="RenderRight">
-							<p>{currentComponent.renderFrequency}</p>
-						</div>
-					</div>
-				);
-      })
-      }
-    </div>
-  )
+		<div>
+			{Object.keys(perfData).map(componentName => {
+			const currentComponent = perfData[componentName];
+			return (
+				<ComponentCard 
+					componentName={componentName}
+					stateType={currentComponent.stateType}
+					averageRenderTime={(
+						currentComponent.totalRenderTime /
+						currentComponent.renderFrequency
+					).toFixed(3)}
+					renderFrequency={currentComponent.renderFrequency}
+					rtid={currentComponent.rtid}
+				/>
+			)}
+			)
+		}
+		</div>
+	)
 }
 
+const ComponentCard = props => {
+	const { componentName, stateType, averageRenderTime, renderFrequency, rtid} = props;
+	const [{ tabs, currentTab }, dispatch] = useStoreContext();
+
+	const onMouseMove = () => {
+		dispatch(onHover(rtid))
+	}
+	const onMouseLeave = () => {
+		dispatch(onHoverExit(rtid))
+	}
+
+	return (
+		<div 
+			onMouseLeave={onMouseLeave}
+			onMouseMove={onMouseMove} 
+			className="StyledGridElement">
+			<div className="RenderLeft">
+				<h3>{componentName} </h3>
+				<h4>{stateType}</h4>
+				<h4>
+					average time:{' '}
+					{averageRenderTime}{' '}
+					ms
+				</h4>
+			</div>
+			<div className="RenderRight">
+				<p>{renderFrequency}</p>
+			</div>
+		</div>
+	);
+}
+
+
 export default RenderingFrequency;