From d245e30af7a72eaf3b7cb4efbd0d019a54e0cbc5 Mon Sep 17 00:00:00 2001 From: Ravinou Date: Wed, 1 Jan 2025 18:27:54 +0100 Subject: [PATCH] =?UTF-8?q?refactor:=20=E2=9A=A1=20wizard?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WizardSteps/WizardStep2/WizardStep2.tsx | 30 ++++--- .../WizardSteps/WizardStep3/WizardStep3.tsx | 27 +++--- .../WizardSteps/WizardStep4/WizardStep4.tsx | 9 +- .../WizardStepBar/WizardStepBar.tsx | 11 ++- Components/WizardSteps/wizard.types.ts | 14 +++ Containers/SetupWizard/SetupWizard.tsx | 85 +++++++++++-------- domain/config.types.ts | 6 +- helpers/functions/lanCommandOption.ts | 34 +++++--- pages/api/account/getWizardEnv.ts | 26 +++--- pages/setup-wizard/{[slug].js => [slug].tsx} | 8 +- 10 files changed, 153 insertions(+), 97 deletions(-) create mode 100644 Components/WizardSteps/wizard.types.ts rename pages/setup-wizard/{[slug].js => [slug].tsx} (68%) diff --git a/Components/WizardSteps/WizardStep2/WizardStep2.tsx b/Components/WizardSteps/WizardStep2/WizardStep2.tsx index d9b634a..51fe880 100644 --- a/Components/WizardSteps/WizardStep2/WizardStep2.tsx +++ b/Components/WizardSteps/WizardStep2/WizardStep2.tsx @@ -1,16 +1,16 @@ //Lib -import React from 'react'; -import classes from '../WizardStep1/WizardStep1.module.css'; -import { IconTool, IconAlertCircle } from '@tabler/icons-react'; -import CopyButton from '../../UI/CopyButton/CopyButton'; +import { IconAlertCircle, IconTool } from '@tabler/icons-react'; import lanCommandOption from '../../../helpers/functions/lanCommandOption'; +import CopyButton from '../../UI/CopyButton/CopyButton'; +import { WizardStepProps } from '../wizard.types'; +import classes from '../WizardStep1/WizardStep1.module.css'; -function WizardStep2(props) { +function WizardStep2(props: WizardStepProps) { ////Vars const wizardEnv = props.wizardEnv; - const UNIX_USER = wizardEnv.UNIX_USER; + const UNIX_USER = wizardEnv?.UNIX_USER; //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled. - const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedOption.lanCommand); + const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedRepo?.lanCommand); return (
@@ -32,10 +32,10 @@ function WizardStep2(props) { borg init -e repokey-blake2 ssh:// {UNIX_USER}@{FQDN} {SSH_SERVER_PORT}/./ - {props.selectedOption.repositoryName} + {props.selectedRepo?.repositoryName}
@@ -85,10 +85,10 @@ function WizardStep2(props) { ssh:// {UNIX_USER}@{FQDN} {SSH_SERVER_PORT}/./ - {props.selectedOption.repositoryName} + {props.selectedRepo?.repositoryName}
@@ -103,16 +103,18 @@ function WizardStep2(props) { following key's fingerprint when you first connect :
  • - ECDSA : {wizardEnv.SSH_SERVER_FINGERPRINT_ECDSA} + ECDSA : {wizardEnv?.SSH_SERVER_FINGERPRINT_ECDSA}
  • - ED25519 : {wizardEnv.SSH_SERVER_FINGERPRINT_ED25519} + ED25519 : {wizardEnv?.SSH_SERVER_FINGERPRINT_ED25519}
  • - RSA : {wizardEnv.SSH_SERVER_FINGERPRINT_RSA} + + RSA : {wizardEnv?.SSH_SERVER_FINGERPRINT_RSA} +
    • diff --git a/Components/WizardSteps/WizardStep3/WizardStep3.tsx b/Components/WizardSteps/WizardStep3/WizardStep3.tsx index 6c8706f..2fcdb71 100644 --- a/Components/WizardSteps/WizardStep3/WizardStep3.tsx +++ b/Components/WizardSteps/WizardStep3/WizardStep3.tsx @@ -4,13 +4,14 @@ import classes from '../WizardStep1/WizardStep1.module.css'; import { IconChecks, IconPlayerPlay } from '@tabler/icons-react'; import CopyButton from '../../UI/CopyButton/CopyButton'; import lanCommandOption from '../../../helpers/functions/lanCommandOption'; +import { WizardStepProps } from '../wizard.types'; -function WizardStep3(props) { +function WizardStep3(props: WizardStepProps) { ////Vars const wizardEnv = props.wizardEnv; - const UNIX_USER = wizardEnv.UNIX_USER; + const UNIX_USER = wizardEnv?.UNIX_USER; //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled. - const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedOption.lanCommand); + const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedRepo?.lanCommand); return (
    @@ -31,11 +32,11 @@ function WizardStep3(props) { borg create ssh:// {UNIX_USER}@{FQDN} {SSH_SERVER_PORT}/./ - {props.selectedOption.repositoryName} + {props.selectedRepo?.repositoryName} ::archive1 /your/pathToBackup
    @@ -70,10 +71,10 @@ function WizardStep3(props) { borg check -v --progress ssh:// {UNIX_USER}@{FQDN} {SSH_SERVER_PORT}/./ - {props.selectedOption.repositoryName} + {props.selectedRepo?.repositoryName}
  • List the remote archives with :
    • @@ -88,10 +89,10 @@ function WizardStep3(props) { borg list ssh:// {UNIX_USER}@{FQDN} {SSH_SERVER_PORT}/./ - {props.selectedOption.repositoryName} + {props.selectedRepo?.repositoryName}
  • Download a remote archive with the following command :
    • @@ -106,11 +107,11 @@ function WizardStep3(props) { borg export-tar --tar-filter="gzip -9" ssh:// {UNIX_USER}@{FQDN} {SSH_SERVER_PORT}/./ - {props.selectedOption.repositoryName} + {props.selectedRepo?.repositoryName} ::archive1 archive1.tar.gz
  • Mount an archive to compare or backup some files without download all the archive :
    • @@ -125,11 +126,11 @@ function WizardStep3(props) { borg mount ssh:// {UNIX_USER}@{FQDN} {SSH_SERVER_PORT}/./ - {props.selectedOption.repositoryName} + {props.selectedRepo?.repositoryName} ::archive1 /tmp/yourMountPoint
    diff --git a/Components/WizardSteps/WizardStep4/WizardStep4.tsx b/Components/WizardSteps/WizardStep4/WizardStep4.tsx index e989798..8a7209c 100644 --- a/Components/WizardSteps/WizardStep4/WizardStep4.tsx +++ b/Components/WizardSteps/WizardStep4/WizardStep4.tsx @@ -4,13 +4,14 @@ import classes from '../WizardStep1/WizardStep1.module.css'; import { IconWand } from '@tabler/icons-react'; import CopyButton from '../../UI/CopyButton/CopyButton'; import lanCommandOption from '../../../helpers/functions/lanCommandOption'; +import { WizardStepProps } from '../wizard.types'; -function WizardStep4(props) { +function WizardStep4(props: WizardStepProps) { ////Vars const wizardEnv = props.wizardEnv; - const UNIX_USER = wizardEnv.UNIX_USER; + const UNIX_USER = wizardEnv?.UNIX_USER; //Needed to generate command for borg over LAN instead of WAN if env vars are set and option enabled. - const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedOption.lanCommand); + const { FQDN, SSH_SERVER_PORT } = lanCommandOption(wizardEnv, props.selectedRepo?.lanCommand); const configBorgmatic = `location: # List of source directories to backup. @@ -20,7 +21,7 @@ function WizardStep4(props) { repositories: # Paths of local or remote repositories to backup to. - - ssh://${UNIX_USER}@${FQDN}${SSH_SERVER_PORT}/./${props.selectedOption.repositoryName} + - ssh://${UNIX_USER}@${FQDN}${SSH_SERVER_PORT}/./${props.selectedRepo?.repositoryName} storage: archive_name_format: '{FQDN}-documents-{now}' diff --git a/Components/WizardSteps/WizardStepBar/WizardStepBar.tsx b/Components/WizardSteps/WizardStepBar/WizardStepBar.tsx index 757cbe5..19094a0 100644 --- a/Components/WizardSteps/WizardStepBar/WizardStepBar.tsx +++ b/Components/WizardSteps/WizardStepBar/WizardStepBar.tsx @@ -3,10 +3,17 @@ import React from 'react'; import classes from './WizardStepBar.module.css'; import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'; -function WizardStepBar(props) { +type WizardStepBarProps = { + step: number; + setStep: (step: number) => void; + previousStepHandler: () => void; + nextStepHandler: () => void; +}; + +function WizardStepBar(props: WizardStepBarProps) { ////Functions //Color onClick on a step - const colorHandler = (step) => { + const colorHandler = (step: number) => { if (step <= props.step) { return classes.active; } else { diff --git a/Components/WizardSteps/wizard.types.ts b/Components/WizardSteps/wizard.types.ts new file mode 100644 index 0000000..f4479ad --- /dev/null +++ b/Components/WizardSteps/wizard.types.ts @@ -0,0 +1,14 @@ +import { WizardEnvType } from '~/domain/config.types'; + +export type SelectedRepoWizard = { + label: string; + value: string; + id: string; + repositoryName: string; + lanCommand: boolean; +}; + +export type WizardStepProps = { + selectedRepo?: SelectedRepoWizard; + wizardEnv?: WizardEnvType; +}; diff --git a/Containers/SetupWizard/SetupWizard.tsx b/Containers/SetupWizard/SetupWizard.tsx index ba10f80..41f5115 100644 --- a/Containers/SetupWizard/SetupWizard.tsx +++ b/Containers/SetupWizard/SetupWizard.tsx @@ -1,36 +1,39 @@ //Lib -import React from 'react'; -import classes from './SetupWizard.module.css'; -import { useState, useEffect } from 'react'; import { useRouter } from 'next/router'; -import Select from 'react-select'; +import { useEffect, useState } from 'react'; +import Select, { SingleValue } from 'react-select'; +import classes from './SetupWizard.module.css'; //Components -import WizardStepBar from '../../Components/WizardSteps/WizardStepBar/WizardStepBar'; +import { SelectedRepoWizard } from '~/Components/WizardSteps/wizard.types'; +import { Repository, WizardEnvType } from '~/domain/config.types'; +import { Optional } from '~/types'; import WizardStep1 from '../../Components/WizardSteps/WizardStep1/WizardStep1'; import WizardStep2 from '../../Components/WizardSteps/WizardStep2/WizardStep2'; import WizardStep3 from '../../Components/WizardSteps/WizardStep3/WizardStep3'; import WizardStep4 from '../../Components/WizardSteps/WizardStep4/WizardStep4'; +import WizardStepBar from '../../Components/WizardSteps/WizardStepBar/WizardStepBar'; -function SetupWizard(props) { +type SetupWizardProps = { + step?: number; +}; + +function SetupWizard(props: SetupWizardProps) { ////Var const router = useRouter(); ////States - const [list, setList] = useState([]); - const [listIsLoading, setListIsLoading] = useState(true); - const [step, setStep] = useState(); - const [wizardEnv, setWizardEnv] = useState({}); - const [selectedOption, setSelectedOption] = useState({ - id: '#id', - repository: 'repo', - }); + const [repoList, setRepoList] = useState>>(); + const [repoListIsLoading, setRepoListIsLoading] = useState(true); + const [step, setStep] = useState(1); + const [wizardEnv, setWizardEnv] = useState>(); + const [selectedItem, setSelectedItem] = useState>(); ////LifeCycle //ComponentDidMount useEffect(() => { //retrieve the repository list - const repoList = async () => { + const fetchRepoList = async () => { try { const response = await fetch('/api/repo', { method: 'GET', @@ -38,13 +41,13 @@ function SetupWizard(props) { 'Content-type': 'application/json', }, }); - setList((await response.json()).repoList); - setListIsLoading(false); + setRepoList((await response.json()).repoList); + setRepoListIsLoading(false); } catch (error) { console.log('Fetching datas error'); } }; - repoList(); + fetchRepoList(); //Fetch wizardEnv to hydrate Wizard' steps const fetchWizardEnv = async () => { try { @@ -64,47 +67,55 @@ function SetupWizard(props) { //Component did update useEffect(() => { //Go to the step in the URL param when URL change - setStep(props.step); + props.step && setStep(props.step); }, [props.step]); ////Functions //Options for react-select - const options = list.map((repo) => ({ + const options: Optional> = repoList?.map((repo) => ({ label: `${repo.alias} - #${repo.id}`, value: `${repo.alias} - #${repo.id}`, - id: repo.id, + id: repo.id.toString(), repositoryName: repo.repositoryName, lanCommand: repo.lanCommand, })); //Step button (free selection of user) - const changeStepHandler = (x) => router.push('/setup-wizard/' + x); + const changeStepHandler = (x: number) => router.push('/setup-wizard/' + x.toString()); //Next Step button const nextStepHandler = () => { - if (step < 4) { - router.push('/setup-wizard/' + `${Number(step) + 1}`); + if (step && step < 4) { + router.push('/setup-wizard/' + `${step + 1}`); } }; //Previous Step button const previousStepHandler = () => { - if (step > 1) { - router.push('/setup-wizard/' + `${Number(step) - 1}`); + if (step && step > 1) { + router.push('/setup-wizard/' + `${step - 1}`); + } + }; + + const onChangeSelect = (option: SingleValue) => { + if (option) { + setSelectedItem(option); + } else { + setSelectedItem(undefined); } }; //Change Step with State - const wizardStep = (step) => { - if (step == 1) { + const wizardStep = (step?: number) => { + if (!step || step === 1) { return ; - } else if (step == 2) { - return ; - } else if (step == 3) { - return ; + } else if (step === 2) { + return ; + } else if (step === 3) { + return ; } else { - return ; + return ; } }; @@ -118,15 +129,15 @@ function SetupWizard(props) { />