From 6400a041384816ad205521df8990b12cd566c3d0 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Mon, 26 Sep 2022 12:29:18 +0200
Subject: [PATCH] change(ui): formatted components

---
 .../components/Session_/Storage/DiffRow.tsx   | 39 +++++++++----------
 .../components/Session_/Storage/Storage.js    | 16 +++++---
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/app/components/Session_/Storage/DiffRow.tsx b/frontend/app/components/Session_/Storage/DiffRow.tsx
index b4aa80f49..72a9bed46 100644
--- a/frontend/app/components/Session_/Storage/DiffRow.tsx
+++ b/frontend/app/components/Session_/Storage/DiffRow.tsx
@@ -1,32 +1,29 @@
-import React from 'react'
-import cn from 'classnames'
+import React from 'react';
 
 interface Props {
-  shades: Record<string, string>
-  pathRoot: string
-  path: string
-  diff: Record<string, any>
+  shades: Record<string, string>;
+  pathRoot: string;
+  path: string;
+  diff: Record<string, any>;
 }
 
 function DiffRow({ diff, path, pathRoot, shades }: Props) {
-  const [shorten, setShorten] = React.useState(true)
+  const [shorten, setShorten] = React.useState(true);
   const oldValue = diff.item ? JSON.stringify(diff.item.lhs) : JSON.stringify(diff.lhs);
   const newValue = diff.item ? JSON.stringify(diff.item.rhs) : JSON.stringify(diff.rhs);
 
-  const pathStr = path.length > 15 && shorten ? (path.slice(0, 5) + '...' + path.slice(10)) : path
+  const pathStr = path.length > 15 && shorten ? path.slice(0, 5) + '...' + path.slice(10) : path;
   return (
-      <div className="p-1 rounded" style={{ background: shades[pathRoot] }}>
-        <span className={path.length > 15 ? "cursor-pointer" : ''} onClick={() => setShorten(false)}>
-          {pathStr}
-          {': '}
-        </span>
-        <span className="line-through text-disabled-text">{oldValue || 'undefined'}</span>
-        {' -> '}
-        <span className={`${!newValue ? 'text-red' : 'text-green'}`}>
-          {newValue || 'undefined'}
-        </span>
-      </div>
-  )
+    <div className="p-1 rounded" style={{ background: shades[pathRoot] }}>
+      <span className={path.length > 15 ? 'cursor-pointer' : ''} onClick={() => setShorten(false)}>
+        {pathStr}
+        {': '}
+      </span>
+      <span className="line-through text-disabled-text">{oldValue || 'undefined'}</span>
+      {' -> '}
+      <span className={`${!newValue ? 'text-red' : 'text-green'}`}>{newValue || 'undefined'}</span>
+    </div>
+  );
 }
 
-export default DiffRow
+export default DiffRow;
diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js
index 1b36e727c..f4f2cd80b 100644
--- a/frontend/app/components/Session_/Storage/Storage.js
+++ b/frontend/app/components/Session_/Storage/Storage.js
@@ -14,8 +14,8 @@ import { diff } from 'deep-diff';
 import { jump } from 'Player';
 import Autoscroll from '../Autoscroll';
 import BottomBlock from '../BottomBlock/index';
-import DiffRow from './DiffRow'
-import cn from 'classnames'
+import DiffRow from './DiffRow';
+import cn from 'classnames';
 import stl from './storage.module.css';
 
 // const STATE = 'STATE';
@@ -112,7 +112,7 @@ export default class Storage extends React.PureComponent {
   }
 
   renderDiffs(diff, i) {
-    const [path, pathRoot] = this.createPathAndBg(diff)
+    const [path, pathRoot] = this.createPathAndBg(diff);
     return (
       <React.Fragment key={i}>
         <DiffRow shades={this.pathShades} path={path} diff={diff} pathRoot={pathRoot} />
@@ -183,9 +183,15 @@ export default class Storage extends React.PureComponent {
     }
 
     return (
-      <div className={cn("flex justify-between items-start", src !== null ? 'border-b' : '')} key={`store-${i}`}>
+      <div
+        className={cn('flex justify-between items-start', src !== null ? 'border-b' : '')}
+        key={`store-${i}`}
+      >
         {src === null ? (
-          <div className="font-mono" style={{ flex: 2, marginLeft: '26.5%' }}> {name} </div>
+          <div className="font-mono" style={{ flex: 2, marginLeft: '26.5%' }}>
+            {' '}
+            {name}{' '}
+          </div>
         ) : (
           <>
             {this.renderDiff(item, prevItem)}