src/container/Wizard.js
/**
 * Steps required to generate Unpkdg links.
 * See {@link https://ant.design/components/steps/|Antd Steps}.
 */
Steps required to generate Unpkdg links.
Steps required to generate Unpkdg links .
function Wizard() {
  const [step, setStep] = useState(wizardStep.searchPackage);
  const [packageName, setPackageName] = useState("");
  const [version, setVersion] = useState("");
  const [errorBoundaryKey, setErrorBoundaryKey] = useState(0);
  const searchStep = useMemo(() => <SearchPackageStep />, []);
  const versionStep = useMemo(() => <SelectVersionsStep packageName={packageName} />, [
    packageName
  ]);
  const linksStep = useMemo(() => <UnpkgLinksStep packageName={packageName} version={version} />, [
    packageName,
    version
  ]);
  const contextState = {
    setPackageName: setNextPackageName,
    setVersion: setNextVersion
  };
  function goToNextStep() {
    setStep(step + 1);
  }
  function setNextPackageName(packageName) {
    setPackageName(packageName);
    goToNextStep();
  }
  function setNextVersion(version) {
    setVersion(version);
    goToNextStep();
  }
  function getContent() {
    switch (step) {
      case wizardStep.selectVersions:
        return versionStep;
      case wizardStep.unpkgLinks:
        return linksStep;
      default:
        return searchStep;
    }
  }
  function onStepClick(currentStep) {
    if (currentStep === wizardStep.selectVersions && packageName === "") return;
    if (currentStep === wizardStep.unpkgLinks && (packageName === "" || version === "")) return;
    setStep(currentStep);
  }
  useEffect(() => setErrorBoundaryKey(errorBoundaryKey + 1), [step]);
  return (
    <PackageContext.Provider value={contextState}>
      <Steps current={step}>
        {steps.map((item, step) => (
          <Steps.Step
            className="wizard-step"
            key={item.title}
            title={item.title}
            onClick={e => onStepClick(step)}
          />
        ))}
      </Steps>
      <div className="steps-content">
        <BunpkgSuspense>
          <ErrorBoundary key={errorBoundaryKey} FallbackComponent={ErrorFallbackComponent}>
            {getContent()}
          </ErrorBoundary>
        </BunpkgSuspense>
      </div>
    </PackageContext.Provider>
  );
}
function Wizard ( ) { const [ step , setStep ] = useState ( wizardStep . searchPackage ) ; const [ packageName , setPackageName ] = useState ( "" ) ; const [ version , setVersion ] = useState ( "" ) ; const [ errorBoundaryKey , setErrorBoundaryKey ] = useState ( 0 ) ; const searchStep = useMemo ( ( ) => < SearchPackageStep / > , [ ] ) ; const versionStep = useMemo ( ( ) => < SelectVersionsStep packageName = { packageName } / > , [ packageName ] ) ; const linksStep = useMemo ( ( ) => < UnpkgLinksStep packageName = { packageName } version = { version } / > , [ packageName , version ] ) ; const contextState = { setPackageName : setNextPackageName , setVersion : setNextVersion } ; function goToNextStep ( ) { setStep ( step + 1 ) ; } function setNextPackageName ( packageName ) { setPackageName ( packageName ) ; goToNextStep ( ) ; } function setNextVersion ( version ) { setVersion ( version ) ; goToNextStep ( ) ; } function getContent ( ) { switch ( step ) { case wizardStep . selectVersions : return versionStep ; case wizardStep . unpkgLinks : return linksStep ; default : return searchStep ; } } function onStepClick ( currentStep ) { if ( currentStep === wizardStep . selectVersions && packageName === "" ) return ; if ( currentStep === wizardStep . unpkgLinks && ( packageName === "" || version === "" ) ) return ; setStep ( currentStep ) ; } useEffect ( ( ) => setErrorBoundaryKey ( errorBoundaryKey + 1 ) , [ step ] ) ; return ( < PackageContext . Provider value = { contextState } > < Steps current = { step } > { steps . map ( ( item , step ) => ( < Steps . Step className = "wizard-step" key = { item . title } title = { item . title } onClick = { e => onStepClick ( step ) } / > ) ) } < / Steps > < div className = "steps-content" > < BunpkgSuspense > < ErrorBoundary key = { errorBoundaryKey } FallbackComponent = { ErrorFallbackComponent } > { getContent ( ) } < / ErrorBoundary > < / BunpkgSuspense > < / div > < / PackageContext . Provider > ) ; }
Steps required to generate Unpkdg links.
Steps required to generate Unpkdg links .
// Clearing error boundary Fallback component // Refer to https://github.com/bvaughn/react-error-boundary/issues/23#issuecomment-425470511