refactor(learningpath): use learning step type

codegen.local.ts

@@ -10,6 +10,7 @@ const config: CodegenConfig = {
     },
   },
   config: {
+    enumsAsTypes: true,
     maybeValue: "T",
     typesPrefix: "GQL",
   },

codegen.server.ts

@@ -13,6 +13,7 @@ const config: CodegenConfig = {
     },
   },
   config: {
+    enumsAsTypes: true,
     maybeValue: "T",
     typesPrefix: "GQL",
   },

src/components/Learningpath/components/LearningpathStep.tsx

@@ -19,11 +19,6 @@ import { ExternalStep } from "./ExternalStep";
 import { LearningpathStepTitle } from "./LearningpathStepTitle";
 import { TextStep } from "./TextStep";
 
-const urlIsNDLAApiUrl = (url: string) => /^(http|https):\/\/(ndla-frontend|www).([a-zA-Z]+.)?api.ndla.no/.test(url);
-const urlIsNDLAEnvUrl = (url: string) => /^(http|https):\/\/(www.)?([a-zA-Z]+.)?ndla.no/.test(url);
-const urlIsLocalNdla = (url: string) => /^http:\/\/(proxy.ndla-local|localhost):30017/.test(url);
-const urlIsNDLAUrl = (url: string) => urlIsNDLAApiUrl(url) || urlIsNDLAEnvUrl(url) || urlIsLocalNdla(url);
-
 const regex = new RegExp(`^\\/(${supportedLanguages.join("|")})($|\\/)`, "");
 
 const getIdFromIframeUrl = (_url: string): [string | undefined, string | undefined] => {
@@ -62,31 +57,7 @@ export const LearningpathStep = ({
       ? getIdFromIframeUrl(learningpathStep.embedUrl.url)
       : [undefined, undefined];
 
-  const shouldUseConverter =
-    !!articleId &&
-    !!learningpathStep.resource?.article &&
-    !!learningpathStep.embedUrl &&
-    urlIsNDLAUrl(learningpathStep.embedUrl?.url);
-
-  if (
-    !shouldUseConverter &&
-    !learningpathStep.resource &&
-    learningpathStep.oembed?.html &&
-    (learningpathStep.embedUrl?.embedType === "oembed" || learningpathStep.embedUrl?.embedType === "iframe")
-  ) {
-    return (
-      <>
-        <LearningpathStepTitle learningpathStep={learningpathStep} />
-        <EmbedStep
-          skipToContentId={skipToContentId}
-          title={learningpathStep.title}
-          url={learningpathStep.embedUrl?.url ?? ""}
-          oembed={learningpathStep.oembed}
-          isInactive={isInactive}
-        />
-      </>
-    );
-  } else if (learningpathStep.resource) {
+  if (learningpathStep.type === "ARTICLE" && learningpathStep.resource) {
     return (
       <>
         <LearningpathStepTitle learningpathStep={learningpathStep} />
@@ -101,18 +72,36 @@ export const LearningpathStep = ({
         />
       </>
     );
-  } else if (learningpathStep.embedUrl?.embedType === "external") {
-    return (
-      <ExternalStep
-        learningpathStep={learningpathStep}
-        skipToContentId={skipToContentId}
-        learningpath={learningpath}
-        isInactive={isInactive}
-      />
-    );
+  } else if (learningpathStep.type === "EXTERNAL") {
+    if (learningpathStep.oembed?.html) {
+      return (
+        <>
+          <LearningpathStepTitle learningpathStep={learningpathStep} />
+          <EmbedStep
+            skipToContentId={skipToContentId}
+            title={learningpathStep.title}
+            url={learningpathStep.embedUrl?.url ?? ""}
+            oembed={learningpathStep.oembed}
+            isInactive={isInactive}
+          />
+        </>
+      );
+    } else if (learningpathStep.embedUrl?.embedType === "external") {
+      return (
+        <ExternalStep
+          learningpathStep={learningpathStep}
+          skipToContentId={skipToContentId}
+          learningpath={learningpath}
+          isInactive={isInactive}
+        />
+      );
+    }
     // this is either a plain text step from stier, or a text step from my ndla.
     // There's really no way to know, so we have to make an educated guess.
-  } else if (learningpathStep.introduction || learningpathStep.description?.startsWith("<section>")) {
+  } else if (
+    learningpathStep.type === "TEXT" &&
+    (learningpathStep.introduction || learningpathStep.description?.startsWith("<section>"))
+  ) {
     return (
       <TextStep
         learningpathStep={learningpathStep}
@@ -121,20 +110,22 @@ export const LearningpathStep = ({
         isInactive={isInactive}
       />
     );
-  } else {
-    return (
-      <LearningpathStepTitle
-        learningpathStep={learningpathStep}
-        skipToContentId={skipToContentId}
-        isInactive={isInactive}
-      />
-    );
   }
+
+  return (
+    <LearningpathStepTitle
+      learningpathStep={learningpathStep}
+      skipToContentId={skipToContentId}
+      isInactive={isInactive}
+    />
+  );
 };
 
 LearningpathStep.fragments = {
   learningpathStep: gql`
     fragment LearningpathStep_LearningpathStep on BaseLearningpathStep {
+      id
+      type
       ...ArticleStep_LearningpathStep
       ...LearningpathStepTitle_LearningpathStep
       ...TextStep_LearningpathStep

src/containers/MyNdla/Learningpath/components/DraggableLearningpathStepListItem.tsx

@@ -18,7 +18,7 @@ import { useParams } from "react-router";
 import { GQLMyNdlaLearningpathStepFragment } from "../../../../graphqlTypes";
 import { routes } from "../../../../routeHelpers";
 import { DragHandle } from "../../components/DragHandle";
-import { getFormTypeFromStep, learningpathStepCloseButtonId, learningpathStepEditButtonId } from "../utils";
+import { learningpathStepCloseButtonId, learningpathStepEditButtonId } from "../utils";
 import { DraggableListItem } from "./DraggableListItem";
 import { LearningpathStepForm } from "./LearningpathStepForm";
 
@@ -82,8 +82,6 @@ export const DraggableLearningpathStepListItem = ({
     },
   });
 
-  const stepType = getFormTypeFromStep(step);
-
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
@@ -108,7 +106,7 @@ export const DraggableLearningpathStepListItem = ({
               <Text fontWeight="bold" textStyle="label.medium">
                 {step.title}
               </Text>
-              <Text textStyle="label.small">{t(`myNdla.learningpath.form.options.${stepType}`)}</Text>
+              <Text textStyle="label.small">{t(`myNdla.learningpath.form.options.${step.type}`)}</Text>
             </TextWrapper>
             {!isEditingStep ? (
               <SafeLinkButton

src/containers/MyNdla/Learningpath/components/ExternalStepForm.tsx

@@ -40,7 +40,7 @@ const TITLE_MAX_LENGTH = 64;
 const INTRODUCTION_MAX_LENGTH = 250;
 
 export interface ExternalFormValues {
-  type: "external";
+  type: "EXTERNAL";
   title: string;
   introduction: string;
   url: string;

src/containers/MyNdla/Learningpath/components/FolderStepForm.tsx

@@ -49,7 +49,7 @@ const PathText = styled(Text, {
 });
 
 export interface FolderFormValues {
-  type: "folder";
+  type: "FOLDER";
   articleId?: number;
   embedUrl: string;
   title: string;

src/containers/MyNdla/Learningpath/components/LearningpathStepForm.tsx

@@ -29,7 +29,7 @@ import { AuthContext } from "../../../../components/AuthenticationContext";
 import { TextStep } from "../../../../components/Learningpath/components/TextStep";
 import { useToast } from "../../../../components/ToastContext";
 import { SKIP_TO_CONTENT_ID } from "../../../../constants";
-import { GQLMyNdlaLearningpathStepFragment } from "../../../../graphqlTypes";
+import { GQLLearningpathStepType, GQLMyNdlaLearningpathStepFragment } from "../../../../graphqlTypes";
 import {
   useCreateLearningpathStep,
   useDeleteLearningpathStep,
@@ -39,7 +39,7 @@ import { routes } from "../../../../routeHelpers";
 import { PrivateRoute } from "../../../PrivateRoute/PrivateRoute";
 import { formValuesToGQLInput, toFormValues } from "../learningpathFormUtils";
 import { FormValues, LearningPathOutletContext } from "../types";
-import { getFormTypeFromStep, learningpathStepEditButtonId } from "../utils";
+import { learningpathStepEditButtonId } from "../utils";
 import { AlertDialog } from "./AlertDialog";
 import { ExternalStepForm } from "./ExternalStepForm";
 import { FolderStepForm } from "./FolderStepForm";
@@ -60,7 +60,7 @@ const ContentForm = styled("form", {
   },
 });
 
-const RADIO_GROUP_OPTIONS = ["text", "resource", "external", "folder"] as const;
+const RADIO_GROUP_OPTIONS = ["TEXT", "ARTICLE", "EXTERNAL", "FOLDER"] as const;
 
 interface Props {
   step?: GQLMyNdlaLearningpathStepFragment;
@@ -82,7 +82,7 @@ export const LearningpathStepForm = ({ step, language }: Props) => {
 
   const methods = useForm<FormValues>({
     mode: "onSubmit",
-    defaultValues: toFormValues(getFormTypeFromStep(step), step),
+    defaultValues: toFormValues(step?.type ?? "TEXT", step),
   });
 
   useEffect(() => {
@@ -188,7 +188,7 @@ export const LearningpathStepForm = ({ step, language }: Props) => {
     handleSubmit(onSave)();
   };
 
-  const stepType = getFormTypeFromStep(step);
+  const stepType = step?.type ?? "TEXT";
 
   return (
     <FormProvider {...methods}>
@@ -204,7 +204,7 @@ export const LearningpathStepForm = ({ step, language }: Props) => {
                   <FieldErrorMessage>{fieldState.error?.message}</FieldErrorMessage>
                   <RadioGroupRoot
                     onValueChange={(details) => {
-                      reset(toFormValues(details.value as FormValues["type"]));
+                      reset(toFormValues(details.value as GQLLearningpathStepType));
                       field.onChange(details.value);
                     }}
                     value={field.value}
@@ -230,7 +230,7 @@ export const LearningpathStepForm = ({ step, language }: Props) => {
         ) : (
           <>
             <Text textStyle="body.medium">{t("myNdla.learningpath.form.content.text.editingDisabled.message")}</Text>
-            {stepType === "text" ? <TextStep learningpathStep={step} /> : null}
+            {stepType === "TEXT" ? <TextStep learningpathStep={step} /> : null}
           </>
         )}
         <HStack justify={step ? "space-between" : "end"}>
@@ -262,7 +262,7 @@ const StepFormType = ({ step }: StepFormTypeProps) => {
   const { watch } = useFormContext<FormValues>();
   const formType = watch("type");
 
-  if (formType === "resource") {
+  if (formType === "ARTICLE") {
     return (
       <ResourceStepForm
         resource={
@@ -278,11 +278,11 @@ const StepFormType = ({ step }: StepFormTypeProps) => {
         }
       />
     );
-  } else if (formType === "external") {
+  } else if (formType === "EXTERNAL") {
     return <ExternalStepForm />;
-  } else if (formType === "text") {
+  } else if (formType === "TEXT") {
     return <TextStepForm />;
-  } else if (formType === "folder") {
+  } else if (formType === "FOLDER") {
     return <FolderStepForm />;
   }
   return null;

src/containers/MyNdla/Learningpath/components/ResourceStepForm.tsx

@@ -31,7 +31,7 @@ import { ResourceData } from "./folderTypes";
 import { ResourcePicker } from "./ResourcePicker";
 
 export interface ResourceFormValues {
-  type: "resource";
+  type: "ARTICLE";
   embedUrl: string;
   articleId?: number;
   title: string;

src/containers/MyNdla/Learningpath/components/TextStepForm.tsx

@@ -20,7 +20,7 @@ const TITLE_MAX_LENGTH = 64;
 const INTRODUCTION_MAX_LENGTH = 250;
 
 export interface TextFormValues {
-  type: "text";
+  type: "TEXT";
   title: string;
   introduction: string;
   description: Descendant[];

src/containers/MyNdla/Learningpath/learningpathFormUtils.ts

@@ -16,23 +16,23 @@ export const toFormValues = <T extends FormValues["type"]>(
   step?: GQLMyNdlaLearningpathStepFragment,
 ): FormValues => {
   switch (type) {
-    case "text":
+    case "TEXT":
       return {
-        type: "text",
+        type: "TEXT",
         title: step?.title ?? "",
         introduction: step?.introduction ?? "",
         description: deserializeToRichText(step?.description ?? ""),
       };
-    case "external":
+    case "EXTERNAL":
       return {
         type: type,
         title: step?.title ?? "",
         introduction: step?.introduction ?? "",
         url: step?.embedUrl?.url ?? "",
         shareable: !!step?.embedUrl?.url,
       };
-    case "resource":
-    case "folder":
+    case "ARTICLE":
+    case "FOLDER":
       return {
         type: type,
         title: step?.title ?? "",
@@ -45,7 +45,7 @@ export const toFormValues = <T extends FormValues["type"]>(
 };
 
 export const formValuesToGQLInput = (values: FormValues) => {
-  if (values.type === "text") {
+  if (values.type === "TEXT") {
     return {
       type: "TEXT",
       title: values.title,
@@ -56,9 +56,9 @@ export const formValuesToGQLInput = (values: FormValues) => {
     };
   }
 
-  if (values.type === "external") {
+  if (values.type === "EXTERNAL") {
     return {
-      type: "TEXT",
+      type: "EXTERNAL",
       title: values.title,
       introduction: values.introduction,
       description: null,
@@ -70,9 +70,9 @@ export const formValuesToGQLInput = (values: FormValues) => {
     };
   }
 
-  if (values.type === "resource") {
+  if (values.type === "ARTICLE") {
     return {
-      type: "TEXT",
+      type: "ARTICLE",
       title: values.title,
       articleId: values.articleId,
       introduction: null,
@@ -82,7 +82,7 @@ export const formValuesToGQLInput = (values: FormValues) => {
   }
 
   return {
-    type: "TEXT",
+    type: "ARTICLE",
     title: values.title,
     articleId: values.articleId,
     introduction: null,

src/containers/MyNdla/Learningpath/utils.ts

@@ -7,8 +7,6 @@
  */
 
 import config from "../../../config";
-import { GQLMyNdlaLearningpathStepFragment } from "../../../graphqlTypes";
-import { FormValues } from "./types";
 
 export const sharedLearningpathLink = (id: number, language?: string) => {
   const languageParam = language ? `/${language}` : "";
@@ -22,13 +20,6 @@ export const LEARNINGPATH_SHARED = "UNLISTED";
 export const LEARNINGPATH_PRIVATE = "PRIVATE";
 export const LEARNINGPATH_READY_FOR_SHARING = "READY_FOR_SHARING";
 
-export const getFormTypeFromStep = (step?: GQLMyNdlaLearningpathStepFragment): FormValues["type"] => {
-  if (!step?.resource && !step?.oembed && !step?.embedUrl) return "text";
-  if (step?.resource || step.embedUrl?.url.includes("resource")) return "resource";
-  if (step?.embedUrl?.embedType === "external") return "external";
-  return "text";
-};
-
 export const learningpathListItemId = (id: number) => `learningpath-${id}`;
 export const learningpathStepEditButtonId = (id: number) => `edit-button-${id}`;
 export const learningpathStepCloseButtonId = (id: number) => `close-button-${id}`;