Merge pull request #38 from webbio/feat/JL-361-internal-link

Feat/jl 361 internal link
webbio · May 22, 2024 · 736a263 · 736a263
2 parents 765c41b + 221b529
commit 736a263
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 59 deletions.
diff --git a/src/plugins/strapi-plugin-internal-links/README.md b/src/plugins/strapi-plugin-internal-links/README.md
@@ -70,7 +70,12 @@ Add the custom field with the content-type builder or directly to the JSON.
 		"pageSearchOptions": {
 			"searchableFields": string[],
 			"subTitlePath": string
-		}
+		},
+		"externalApi": {
+    "enabled": boolean,
+    "apiUrl": string,
+    "labelPath": string,
+    "valuePath": string
 	},
 }
 // ...
@@ -90,19 +95,6 @@ npm run build
 
 The options of the internal link has a option in the contet-type builder to add an external source to the link module.
 
-```json
-// ...
-"options": {
-  "externalApi": {
-    "enabled": boolean,
-    "apiUrl": string,
-    "labelPath": string,
-    "valuePath": string
-  },
-},
-// ...			
-```
-
 If the external API is enabled, all fields are required (you can't make if statement in the option thing to make it required) so fill it in.
 
 

diff --git a/src/plugins/strapi-plugin-internal-links/admin/src/api/fetch-source.ts b/src/plugins/strapi-plugin-internal-links/admin/src/api/fetch-source.ts
@@ -1,15 +1,24 @@
 import getRequestUrl from '../utils/get-request-url';
 
-export type externalApiResult = {
+type FetchSourceParams = {
+	fetchClient: any;
+	externalApiUrl: string;
+	inputValue: string;
+};
+
+export type ExternalApiResult = {
 	data: Record<string, any>;
 };
 
-export const fetchSource = async (
-	{ fetchClient }: Record<string, any>,
-	externalApiUrl: string,
-	inputValue: string
-): Promise<externalApiResult | undefined> => {
+export const fetchSource = async ({
+	fetchClient,
+	externalApiUrl,
+	inputValue
+}: FetchSourceParams): Promise<ExternalApiResult | undefined> => {
 	try {
+		if (!externalApiUrl) {
+			throw new Error('No URL field set in settings');
+		}
 		const { post } = fetchClient;
 		const result = await post(getRequestUrl('source'), {
 			data: {

diff --git a/src/plugins/strapi-plugin-internal-links/admin/src/components/form/index.tsx b/src/plugins/strapi-plugin-internal-links/admin/src/components/form/index.tsx
@@ -39,10 +39,9 @@ const InternalLinkForm = ({
 		/(^https?:\/\/(www.)?[a-zA-Z0-9]{1,}.[^s]{2,}((\/[a-zA-Z0-9\-\_\=\?\%\&\#]{1,}){1,})?)\/?$|^mailto:[\w-\. +]+@([\w-]+\.)+[\w-]{2,4}$|^tel:((\+|00(\s|\s?\-\s?)?)[0-9]{2}(\s|\s?\-\s?)?(\(0\)[\-\s]?)?|0)[0-9](((\s|\s?\-\s?)?[0-9]){1,})|^#[a-zA-Z0-9\,\[\]\-\_\=\?\%\&\#]{1,}$/
 	);
 	const { contentType, setContentTypeUid } = useContentTypeOptions(link.targetContentTypeUid);
-	const { page, setPageId, pageOptionsIsLoading } = usePageOptions(contentType, link.targetContentTypeId);
+	const { page, pageId, setPageId, pageOptionsIsLoading } = usePageOptions(contentType, link.targetContentTypeId);
 	const { setPlatformId } = usePlatformOptions({ page, pageOptionsIsLoading });
-	const [isExternalTab, setIsExternalTab] = useState<boolean>(link.type === 'external');
-	const [isSourceTab, setIsSourceTab] = useState<boolean>(link.type === 'source');
+	const [tabType, setTabType] = useState<'internal' | 'external' | 'source'>(link.type || INTERNAL_LINK_TYPE.INTERNAL);
 
 	useEffect(() => {
 		if (pluginConfig && useSinglePageType) {
@@ -51,14 +50,13 @@ const InternalLinkForm = ({
 	}, [pluginConfig]);
 
 	const checkTab = () => {
-		if (isExternalTab) {
+		if (tabType === INTERNAL_LINK_TYPE.EXTERNAL) {
 			return 1;
 		}
-		if (isSourceTab) {
+		if (tabType === INTERNAL_LINK_TYPE.SOURCE) {
 			return 2;
-		} else {
-			return 0;
 		}
+		return 0;
 	};
 
 	const onContentTypeChange = (value: IContentTypeOption) => {
@@ -236,16 +234,13 @@ const InternalLinkForm = ({
 			url: undefined
 		}));
 		if (selected === 0) {
-			setIsExternalTab(false);
-			setIsSourceTab(false);
+			setTabType(INTERNAL_LINK_TYPE.INTERNAL);
 			setLink((value) => ({ ...value, type: INTERNAL_LINK_TYPE.INTERNAL }));
 		} else if (selected === 1) {
-			setIsExternalTab(true);
-			setIsSourceTab(false);
+			setTabType(INTERNAL_LINK_TYPE.EXTERNAL);
 			setLink((value) => ({ ...value, type: INTERNAL_LINK_TYPE.EXTERNAL }));
 		} else if (selected === 2) {
-			setIsExternalTab(false);
-			setIsSourceTab(true);
+			setTabType(INTERNAL_LINK_TYPE.SOURCE);
 			setLink((value) => ({ ...value, type: INTERNAL_LINK_TYPE.SOURCE }));
 		}
 	};
@@ -259,7 +254,7 @@ const InternalLinkForm = ({
 	};
 
 	useLayoutEffect(() => {
-		setIsExternalTab(link.type === 'external');
+		setTabType(link.type);
 	}, []);
 
 	useEffect(() => {
@@ -302,6 +297,8 @@ const InternalLinkForm = ({
 					<InternalTab
 						errors={errors}
 						link={link}
+						pageId={pageId}
+						contentType={contentType}
 						shouldShowTitle={shouldShowTitle}
 						attributeOptions={attributeOptions}
 						onTextBlur={onTextBlur}
@@ -316,7 +313,6 @@ const InternalLinkForm = ({
 						errors={errors}
 						link={link}
 						shouldShowTitle={shouldShowTitle}
-						isExternalTab={isExternalTab}
 						onLinkBlur={onLinkBlur}
 						onLinkChange={onLinkChange}
 						onTextBlur={onTextBlur}

diff --git a/src/plugins/strapi-plugin-internal-links/admin/src/components/form/source-select/index.tsx b/src/plugins/strapi-plugin-internal-links/admin/src/components/form/source-select/index.tsx
@@ -30,7 +30,11 @@ export const ExternalApiSearch = ({
 	const mappedSelectedValue = mapSelectItem(selectedValue);
 
 	const getItems = async (inputValue: string): Promise<IReactSelectValue[]> => {
-		const externalItems = await fetchSource({ fetchClient }, externalApiUrl, inputValue);
+		if (!externalApiUrl) {
+			throw new Error('No URL field set in settings');
+		}
+
+		const externalItems = await fetchSource({ fetchClient, externalApiUrl, inputValue });
 		if (!externalItems || !externalApiLabelpath || !externalApiValuepath) {
 			return [];
 		}
@@ -61,7 +65,7 @@ export const ExternalApiSearch = ({
 			<Label>
 				<FieldLabel required>
 					{formatMessage({
-						id: getTrad('internal-link.form.page')
+						id: getTrad('internal-link.form.source.start')
 					})}
 				</FieldLabel>
 			</Label>

diff --git a/src/plugins/strapi-plugin-internal-links/admin/src/components/form/tabs/external-tab.tsx b/src/plugins/strapi-plugin-internal-links/admin/src/components/form/tabs/external-tab.tsx
@@ -20,15 +20,13 @@ interface Props {
 export const ExternalTab = ({
 	link,
 	shouldShowTitle,
-	isExternalTab,
 	errors,
 	onTextBlur,
 	onTextChange,
 	onLinkBlur,
 	onLinkChange
 }: Props) => {
 	const { formatMessage } = useIntl();
-	const translationLinkKey = !isExternalTab ? 'generated-link' : 'link';
 
 	return (
 		<TabPanel>
@@ -51,7 +49,7 @@ export const ExternalTab = ({
 						<Field name="link" id="link" error={errors.url} required>
 							<Label>
 								{formatMessage({
-									id: getTrad(`internal-link.form.${translationLinkKey}`)
+									id: getTrad('internal-link.form.link')
 								})}
 							</Label>
 
@@ -61,9 +59,8 @@ export const ExternalTab = ({
 								onChange={onLinkChange}
 								onBlur={onLinkBlur}
 								required
-								disabled={!isExternalTab}
 								placeholder={formatMessage({
-									id: getTrad(`internal-link.form.${translationLinkKey}.placeholder`)
+									id: getTrad('internal-link.form.link.placeholder')
 								})}
 							/>
 

diff --git a/src/plugins/strapi-plugin-internal-links/admin/src/components/form/tabs/internal-tab.tsx b/src/plugins/strapi-plugin-internal-links/admin/src/components/form/tabs/internal-tab.tsx
@@ -20,6 +20,8 @@ interface Props {
 	isExternalTab?: boolean;
 	errors: IInternalLinkErrors;
 	attributeOptions?: IInternalLinkAttribute['options'];
+	contentType?: IContentTypeOption;
+	pageId?: number;
 	onTextChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 	onTextBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
 	onPageChange: (id?: number, path?: string, domain?: string) => void;
@@ -32,9 +34,10 @@ interface Props {
 export const InternalTab = ({
 	link,
 	shouldShowTitle,
-	isExternalTab,
+	pageId,
 	errors,
 	attributeOptions,
+	contentType,
 	onTextBlur,
 	onTextChange,
 	onPageChange,
@@ -44,9 +47,10 @@ export const InternalTab = ({
 	onPlatformChange
 }: Props) => {
 	const { formatMessage } = useIntl();
-	const { contentType, contentTypeOptions, contentTypeOptionsIsLoading, contentTypeOptionsIsFetching } =
-		useContentTypeOptions(link.targetContentTypeUid);
-	const { page, pageId, pageOptionsIsLoading } = usePageOptions(contentType, link.targetContentTypeId);
+	const { contentTypeOptions, contentTypeOptionsIsLoading, contentTypeOptionsIsFetching } = useContentTypeOptions(
+		link.targetContentTypeUid
+	);
+	const { page, pageOptionsIsLoading } = usePageOptions(contentType, link.targetContentTypeId);
 	const { data: pluginConfig, isLoading: isLoadingConfig } = useGetConfig({});
 	const useSinglePageType = !!pluginConfig?.useSinglePageType || pluginConfig?.pageBuilder?.enabled;
 	const pageBuilderEnabled = pluginConfig?.pageBuilder?.enabled;
@@ -84,7 +88,7 @@ export const InternalTab = ({
 						<FieldError />
 					</Field>
 				)}
-				{!isExternalTab && pageBuilderEnabled && platformOptions.length > 1 && (
+				{pageBuilderEnabled && platformOptions.length > 1 && (
 					<Box paddingTop={4}>
 						<Field required>
 							<Label>
@@ -125,7 +129,7 @@ export const InternalTab = ({
 					</Box>
 				)}
 
-				{!isExternalTab && !isLoadingConfig && !useSinglePageType && (
+				{!isLoadingConfig && !useSinglePageType && (
 					<Box paddingTop={4}>
 						<Field required>
 							<Label>
@@ -167,19 +171,17 @@ export const InternalTab = ({
 				)}
 
 				<Box paddingTop={4}>
-					{!isExternalTab && (
-						<PageSearch
-							selectedId={pageId}
-							uid={contentType?.uid}
-							platformTitle={pageBuilderEnabled ? platform?.label : undefined}
-							onChange={(value) => onPageChange(value?.id, value?.path, value?.platform?.domain)}
-							pluginConfig={pluginConfig}
-							attributeOptions={attributeOptions}
-						/>
-					)}
+					<PageSearch
+						selectedId={pageId}
+						uid={contentType?.uid}
+						platformTitle={pageBuilderEnabled ? platform?.label : undefined}
+						onChange={(value) => onPageChange(value?.id, value?.path, value?.platform?.domain)}
+						pluginConfig={pluginConfig}
+						attributeOptions={attributeOptions}
+					/>
 				</Box>
 
-				{pluginConfig?.enableUrlAddition && !isExternalTab && (
+				{pluginConfig?.enableUrlAddition && (
 					<Box paddingTop={4}>
 						<Field name="urlAddition" id="urlAddition" error={errors.urlAddition}>
 							<Label>

diff --git a/src/plugins/strapi-plugin-internal-links/admin/src/translations/en.json b/src/plugins/strapi-plugin-internal-links/admin/src/translations/en.json
@@ -37,6 +37,7 @@
 	"internal-link.form.collection": "Select collection type",
 	"internal-link.form.collection.placeholder": "E.g.: news, subsidies or road maintenance",
 	"internal-link.form.collection.clear": "Reset collection type selection",
+	"internal-link.form.source.start": "Select a startpoint",
 	"internal-link.form.page": "Select page/language",
 	"internal-link.form.page.placeholder": "Select a page",
 	"internal-link.form.source.placeholder": "Search for the right item",

diff --git a/src/plugins/strapi-plugin-internal-links/admin/src/translations/nl.json b/src/plugins/strapi-plugin-internal-links/admin/src/translations/nl.json
@@ -35,6 +35,7 @@
 	"internal-link.form.collection": "Selecteer collectie type",
 	"internal-link.form.collection.placeholder": "Bijvoorbeeld nieuws, subsidies of wegwerkzaamheden",
 	"internal-link.form.collection.clear": "Reset collectie type keuze",
+	"internal-link.form.source.start": "Selecteer een startpunt",
 	"internal-link.form.page": "Selecteer de pagina/taal",
 	"internal-link.form.page.placeholder": "Kies een pagina",
 	"internal-link.form.source.placeholder": "Zoek om de juiste keuze te kunnen maken",