feat #300 - Refac

dassana-io · Apr 22, 2021 · a4ba27c · a4ba27c
1 parent 345cc8e
commit a4ba27c
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 28 deletions.
diff --git a/src/components/JSONPathPicker/styles.ts b/src/components/JSONPathPicker/styles.ts
@@ -1,9 +1,9 @@
 import { createUseStyles } from 'react-jss'
-import { styleguide, themedStyles, ThemeType } from '../assets/styles'
 import { ColorManipulationTypes, manipulateColor } from 'components/utils'
+import { styleguide, themedStyles, ThemeType } from '../assets/styles'
 
 const {
-	colors: { blacks, grays, greens, reds, oranges },
+	colors: { greens, reds, oranges },
 	font,
 	fontWeight,
 	spacing
@@ -56,12 +56,26 @@ const tokenColors = {
 }
 
 const tokenStyles = {
+	[dark]: {
+		'& $boolean': { color: tokenColors[dark].boolean },
+		'& $number': { color: tokenColors[dark].number },
+		'& $operator': { color: tokenColors[dark].operator },
+		'& $property': {
+			'&:hover': {
+				color: manipulateColor(tokenColors[dark].property, 10, shade)
+			},
+			color: tokenColors[dark].property
+		},
+		'& $punctuation': { color: tokenColors[light].punctuation },
+		'& $string': { color: tokenColors[light].string }
+	},
 	[light]: {
 		boolean: { color: tokenColors[light].boolean },
+		null: {},
 		number: { color: tokenColors[light].number },
 		operator: {
 			color: tokenColors[light].operator,
-			padding: { left: spacing.xs / 2, right: spacing.s }
+			padding: { left: spacing.xs / 2, right: spacing.xs }
 		},
 		property: {
 			'&:hover': {
@@ -75,21 +89,7 @@ const tokenStyles = {
 			color: tokenColors[light].punctuation,
 			padding: { left: spacing.xs / 2 }
 		},
-		string: { color: tokenColors[light].string },
-		null: {}
-	},
-	[dark]: {
-		'& $boolean': { color: tokenColors[dark].boolean },
-		'& $number': { color: tokenColors[dark].number },
-		'& $operator': { color: tokenColors[dark].operator },
-		'& $property': {
-			'&:hover': {
-				color: manipulateColor(tokenColors[dark].property, 10, shade)
-			},
-			color: tokenColors[dark].property
-		},
-		'& $punctuation': { color: tokenColors[light].punctuation },
-		'& $string': { color: tokenColors[light].string }
+		string: { color: tokenColors[light].string }
 	}
 }
 

diff --git a/src/components/JSONPathPicker/utils.tsx b/src/components/JSONPathPicker/utils.tsx
@@ -26,8 +26,13 @@ interface RenderParams {
 const renderComma = ({
 	classes,
 	isLastItem
-}: Pick<RenderParams, 'classes' | 'isLastItem'>) =>
-	isLastItem ? <></> : <span className={classes.punctuation}>,</span>
+}: Pick<RenderParams, 'classes' | 'isLastItem'>): ReactNode =>
+	isLastItem ? <></> : renderPunctuation(',', classes)
+
+const renderPunctuation = (
+	punctuation: string,
+	classes: RenderParams['classes']
+): ReactNode => <span className={classes.punctuation}>{punctuation}</span>
 
 const renderArray = ({
 	classes,
@@ -43,12 +48,13 @@ const renderArray = ({
 		<>
 			{arr.length === 0 ? (
 				<span>
-					{'[ ]'}
+					{renderPunctuation('[', classes)}
+					{renderPunctuation(']', classes)}
 					{renderComma({ classes, isLastItem })}
 				</span>
 			) : (
 				<>
-					<span>{'['}</span>
+					<span>{renderPunctuation('[', classes)}</span>
 					<ol className={classes.list}>
 						{arr.map((item, i) => (
 							<li key={i}>
@@ -64,7 +70,7 @@ const renderArray = ({
 						))}
 					</ol>
 					<span>
-						{']'}
+						{renderPunctuation(']', classes)}
 						{renderComma({ classes, isLastItem })}
 					</span>
 				</>
@@ -73,18 +79,17 @@ const renderArray = ({
 	)
 }
 
-interface RenderPrimitive extends RenderParams {
+interface RenderPrimitiveParams extends RenderParams {
 	type: Types.boolean | Types.number | Types.null
 }
-
 const renderPrimitive = ({
 	classes,
 	pickedPath,
 	remainingJSON,
 	isLastItem,
 	currPath,
 	type
-}: RenderPrimitive): ReactNode => (
+}: RenderPrimitiveParams): ReactNode => (
 	<>
 		<span className={classes[type]}>
 			{JSON.stringify(remainingJSON)}
@@ -121,7 +126,7 @@ const renderObject = ({
 
 	return (
 		<>
-			<span>{'{'}</span>
+			{renderPunctuation('{', classes)}
 			<ul className={classes.list}>
 				{remainingKeys.map((key, i) => (
 					<li key={i}>
@@ -142,7 +147,7 @@ const renderObject = ({
 				))}
 			</ul>
 			<span>
-				{'}'}
+				{renderPunctuation('}', classes)}
 				{renderComma({ classes, isLastItem })}
 			</span>
 		</>