From 40ec47fde72a31a301e4647dcc65f6157f161339 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Tue, 24 Oct 2023 16:50:27 +0300
Subject: [PATCH] feat: move selected os into parent component

---
 .../ValidatorInstalling/OSCards.stories.tsx          |  6 +++++-
 .../ValidatorSetup/ValidatorInstalling/OSCards.tsx   | 12 +++++-------
 .../ValidatorInstalling/ValidatorInstall.tsx         |  9 ++++++++-
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx
index 11f6d726..7a077a03 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
 import OSCards from './OSCards'
+import { MAC } from '../../../../constants'
 
 const meta = {
   title: 'ValidatorOnboarding/OSCards',
@@ -15,5 +16,8 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  args: {},
+  args: {
+    selectedOs: MAC,
+    handleOsCardClick: () => {},
+  },
 }
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
index d8afe3ba..4275f1e9 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/OSCards.tsx
@@ -1,5 +1,4 @@
 import { XStack } from 'tamagui'
-import { useState } from 'react'
 
 import OSCard from './OSCard'
 import { LINUX, MAC, WINDOWS } from '../../../../constants'
@@ -19,13 +18,12 @@ const cards = [
   },
 ]
 
-const OSCards = () => {
-  const [selectedOs, setSelectedOs] = useState(MAC)
-
-  const handleOsCardClick = (os: string) => {
-    setSelectedOs(os)
-  }
+type OSCardsProps = {
+  selectedOs: string
+  handleOsCardClick: (os: string) => void
+}
 
+const OSCards = ({ selectedOs, handleOsCardClick }: OSCardsProps) => {
   return (
     <XStack justifyContent={'space-between'} my={'15px'}>
       {cards.map(card => (
diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
index d815e922..4c27e446 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorInstalling/ValidatorInstall.tsx
@@ -1,15 +1,22 @@
 import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
 import { useSelector } from 'react-redux'
+import { useState } from 'react'
 
 import { RootState } from '../../../../redux/store'
 import SyntaxHighlighterBox from './SyntaxHighlighter'
 import OSCards from './OSCards'
 import { DOCUMENTATIONS } from './documentations'
+import { MAC } from '../../../../constants'
 
 const ValidatorSetupInstall = () => {
+  const [selectedOs, setSelectedOs] = useState(MAC)
   const selectedClient = useSelector((state: RootState) => state.execClient.selectedClient)
 
+  const handleOsCardClick = (os: string) => {
+    setSelectedOs(os)
+  }
+
   return (
     <YStack style={{ width: '100%', padding: '26px 32px' }}>
       <Text size={27} weight={'semibold'}>
@@ -29,7 +36,7 @@ const ValidatorSetupInstall = () => {
         <Text size={15} color="#647084" weight={'regular'}>
           {DOCUMENTATIONS[selectedClient].general}
         </Text>
-        <OSCards />
+        <OSCards selectedOs={selectedOs} handleOsCardClick={handleOsCardClick} />
         <YStack space={'$2'}>
           <Text size={19}>Package Managers</Text>
           <Text size={15} weight={'semibold'}>