From a6ab5326a07adf34b7cf340bc55e15313dfe1551 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 1 Oct 2024 12:58:21 +0200
Subject: [PATCH] feat(onboarding): add links to examples (#8308)

## About the changes
Links from Unleash UI to
[Unleash/unleash-sdk-examples](https://github.com/Unleash/unleash-sdk-examples)


https://linear.app/unleash/issue/1-2869/add-codesandbox-links-to-unleashunleash
---
 .../component/onboarding/flow/SdkExample.tsx  | 41 +++++++++++++++----
 1 file changed, 33 insertions(+), 8 deletions(-)

diff --git a/frontend/src/component/onboarding/flow/SdkExample.tsx b/frontend/src/component/onboarding/flow/SdkExample.tsx
index 04c667400e..a22ae60afc 100644
--- a/frontend/src/component/onboarding/flow/SdkExample.tsx
+++ b/frontend/src/component/onboarding/flow/SdkExample.tsx
@@ -1,8 +1,8 @@
 import { type SelectChangeEvent, styled, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
-import Select from '../../common/select';
-import { useState } from 'react';
-import { allSdks } from '../dialog/sharedTypes';
+import { useLocalStorageState } from 'hooks/useLocalStorageState';
+import Select from 'component/common/select';
+import { allSdks, type SdkName } from '../dialog/sharedTypes';
 
 const TitleContainer = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -18,17 +18,40 @@ const StyledLink = styled(Link)({
     textDecoration: 'none',
 });
 
+const repositoryUrl =
+    'https://github.com/Unleash/unleash-sdk-examples/tree/main';
+
+type exampleDirectories =
+    | 'Android'
+    | '.NET'
+    | 'Flutter'
+    | 'Go'
+    | 'Java'
+    | 'JavaScript'
+    | 'Node.js'
+    | 'PHP'
+    | 'Python'
+    | 'React'
+    | 'Ruby'
+    | 'Rust'
+    | 'Svelte'
+    | 'Swift'
+    | 'Vue';
+
 export const SdkExample = () => {
     const sdkOptions = allSdks.map((sdk) => ({
         key: sdk.name,
         label: sdk.name,
     }));
-
-    const [selectedSdk, setSelectedSdk] = useState<string>(sdkOptions[0].key);
-
+    const [selectedSdk, setSelectedSdk] =
+        useLocalStorageState<exampleDirectories>(
+            'onboarding-sdk-example',
+            sdkOptions[0].key,
+        );
     const onChange = (event: SelectChangeEvent) => {
-        setSelectedSdk(event.target.value);
+        setSelectedSdk(event.target.value as SdkName);
     };
+
     return (
         <>
             <TitleContainer>View SDK Example</TitleContainer>
@@ -45,7 +68,9 @@ export const SdkExample = () => {
                     width: '60%',
                 }}
             />
-            <StyledLink to={``}>Go to example</StyledLink>
+            <StyledLink to={`${repositoryUrl}/${selectedSdk}`} target='_blank'>
+                Go to example
+            </StyledLink>
         </>
     );
 };