From 2b7b51123d9fe60a76a47a2f6f6a0d81fab69fc5 Mon Sep 17 00:00:00 2001
From: Jakz <jakzaizzat@gmail.com>
Date: Tue, 23 Apr 2024 08:49:42 +0800
Subject: [PATCH] Refactor to useWidthPerToken

---
 .../components/GalleryEditor/GalleryEditorRow.tsx    | 12 +++---------
 .../src/components/GalleryEditor/useWidthPerToken.ts | 11 +++++++++++
 2 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 apps/mobile/src/components/GalleryEditor/useWidthPerToken.ts

diff --git a/apps/mobile/src/components/GalleryEditor/GalleryEditorRow.tsx b/apps/mobile/src/components/GalleryEditor/GalleryEditorRow.tsx
index 85b0ea62c..6836bdc10 100644
--- a/apps/mobile/src/components/GalleryEditor/GalleryEditorRow.tsx
+++ b/apps/mobile/src/components/GalleryEditor/GalleryEditorRow.tsx
@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { useCallback } from 'react';
-import { GestureResponderEvent, useWindowDimensions, View, ViewProps } from 'react-native';
+import { GestureResponderEvent, View, ViewProps } from 'react-native';
 import Animated from 'react-native-reanimated';
 import { graphql, useFragment } from 'react-relay';
 
@@ -11,7 +11,7 @@ import { GalleryEditorRowFragment$key } from '~/generated/GalleryEditorRowFragme
 import { GalleryTouchableOpacity } from '../GalleryTouchableOpacity';
 import { GalleryEditorActiveActions } from './GalleryEditorActiveActions';
 import { GalleryEditorTokenPreview } from './GalleryEditorTokenPreview';
-import { horizontalRowPadding, inBetweenColumnPadding } from './utils';
+import { useWidthPerToken } from './useWidthPerToken';
 
 type Props = {
   sectionId: string;
@@ -32,13 +32,7 @@ export function GalleryEditorRow({ sectionId, row, style, queryRef }: Props) {
 
   const { activateRow, activeRowId } = useGalleryEditorActions();
 
-  const screenDimensions = useWindowDimensions();
-
-  const column = row.columns;
-  const totalSpaceForTokens =
-    screenDimensions.width - horizontalRowPadding * 2 - inBetweenColumnPadding * (column - 1);
-
-  const widthPerToken = totalSpaceForTokens / column;
+  const widthPerToken = useWidthPerToken(row.columns);
 
   const handleSectionPress = useCallback(
     (e: GestureResponderEvent) => {
diff --git a/apps/mobile/src/components/GalleryEditor/useWidthPerToken.ts b/apps/mobile/src/components/GalleryEditor/useWidthPerToken.ts
new file mode 100644
index 000000000..9e0619442
--- /dev/null
+++ b/apps/mobile/src/components/GalleryEditor/useWidthPerToken.ts
@@ -0,0 +1,11 @@
+import { useWindowDimensions } from 'react-native';
+import { horizontalRowPadding, inBetweenColumnPadding } from './utils';
+
+export function useWidthPerToken(columns: number) {
+  const screenDimensions = useWindowDimensions();
+
+  const totalSpaceForTokens =
+    screenDimensions.width - horizontalRowPadding * 2 - inBetweenColumnPadding * (columns - 1);
+
+  return totalSpaceForTokens / columns;
+}