diff --git a/docs/repositoryStructure.md b/docs/repositoryStructure.md
new file mode 100644
index 0000000..bd1f3a9
--- /dev/null
+++ b/docs/repositoryStructure.md
@@ -0,0 +1,56 @@
+# Structure
+
+Newman Dashboard is a package which is both a reporter and a CLI.
+
+The repository can be broken into 3 major components:
+
+1. CLI
+2. Dashboard
+3. Reporter
+
+## CLI
+
+Location: [`./bin/index.js`](../bin/index.js)
+
+The CLI is built using commander.js which is used to parse the `argv` for commands to start the dashboard and its configurations.
+It is the binary which is executed when you run the newman-dashboard command from the terminal to start the dashboard.
+
+## Dashboard
+
+Location: [`./dashboard`](../dashboard)
+
+It is further divided into 2 parts:
+
+### Broker
+
+Location: [`./dashboard/server/index.js`](../dashboard/server/index.js)
+
+The broker is a server built using socket.io and express which is a mediator for the pub/sub connections between the newman runs and the frontend.
+Both the newman runs and dashboard connect to this server to publish and subscribe to messages.
+The code has been separated into 3 parts to maintain modularity:
+
+- Express Server - [`./dashboard/server/server.js`](../dashboard/server/server.js)
+- Socket.io Server - [`./dashboard/server/index.js`](../dashboard/server/index.js)
+- Event handlers - [`./dashboard/server/api`](../dashboard/server/api/index.js)
+
+The express server serves the frontend as static files.
+
+### Frontend
+
+Location: [`./dashboard/frontend`](../dashboard/frontend)
+
+The frontend of the dashboard is built using NextJS - A React Framework.
+It is responsible for issuing the requests made by the user back to the broker and then to the newman runs.
+
+## Reporter
+
+Location: [`./reporter`](../reporter)
+
+The reporter is the default export of this package.
+It is a function which can be required via newman to send various events related to the underlying newman run.
+The function signature of this export is specified by newman itself and you can read more about it [here](https://github.com/postmanlabs/newman#creating-your-own-reporter).
+
+The reporter is spilt in 2 parts to maintain modularity:
+
+- Event handlers - [`./reporter/lib/events`](../reporter/lib/events.js)
+- Core reporter function - [`./reporter/index.js`](../reporter/index.js)
diff --git a/frontend/pages/run/[id].js b/frontend/pages/run/[id].js
index 76466b0..9fdad60 100644
--- a/frontend/pages/run/[id].js
+++ b/frontend/pages/run/[id].js
@@ -8,7 +8,7 @@ import runStore from "../../state/stores";
import RunData from "../../components/RunData";
import Header from "../../components/Header";
import EmptyRuns from "../../components/EmptyRuns";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
const RunDetails = observer(() => {
const [isLoading, setIsLoading] = useState(true);
@@ -16,12 +16,12 @@ const RunDetails = observer(() => {
const router = useRouter();
const { id } = router.query;
- let run = runStore.find(id);
+ let run = useRef(runStore.find(id));
useEffect(() => {
const execService = async () => {
if (!run) {
- run = await RunService.fetchOne(id);
+ run.current = await RunService.fetchOne(id);
}
setIsLoading(false);
};
@@ -32,8 +32,8 @@ const RunDetails = observer(() => {
<>