AEM Cloud Service - AEM Experience UI Content Fragments App Extension Show Page References

set JAVA_HOME=C:/Progra~1/Java/jdk-11.0.6

mvn -B org.apache.maven.plugins:maven-archetype-plugin:3.2.1:generate -D archetypeGroupId=com.adobe.aem 
-D archetypeArtifactId=aem-project-archetype -D archetypeVersion=48 -D aemVersion="cloud"
-D appTitle="Experience AIO CF Page References" -D appId="eaem-cf-page-references"
-D groupId="apps.experienceaem.sites" -D frontendModule=none -D includeExamples=n -D includeDispatcherConfig=n

<%@include file="/libs/granite/ui/global.jsp"%>

<%@page session="false"
        import="java.util.Iterator,
                org.apache.sling.commons.json.JSONObject,
                com.adobe.granite.ui.components.Tag"%>
<%@ page import="com.adobe.granite.ui.components.ds.DataSource" %>
<%@ page import="org.apache.sling.api.SlingHttpServletRequest" %>
<%@ page import="org.apache.sling.api.resource.Resource" %>
<%@ page import="org.apache.sling.api.resource.ValueMap" %>
<%@ page import="com.adobe.granite.ui.components.ds.SimpleDataSource" %>
<%@ page import="org.apache.sling.api.resource.ResourceMetadata" %>

<%
response.setContentType("application/json");

Resource datasource = resource.getChild("datasource");
DataSource refsDS = cmp.asDataSource(datasource);

JSONObject cfReferences = new JSONObject();
ValueMap refResVM = null;

    if(refsDS == null){
        cfReferences.write(response.getWriter());
        return;
}

    ResourceMetadata refResourceMeta = null;

    for (Iterator<Resource> items = refsDS.iterator(); items.hasNext();) {
        refResourceMeta = items.next().getResourceMetadata();
cfReferences.put(String.valueOf(refResourceMeta.get("path")), refResourceMeta.get("title"));
}

    cfReferences.write(response.getWriter());
%>

<?xml version="1.0"encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"xmlns:jcr="http://www.jcp.org/jcr/1.0"xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
jcr:primaryType="nt:unstructured"
sling:resourceType="/apps/eaem-cf-page-references/components/cf-page-references">
<datasource
jcr:primaryType="nt:unstructured"
path="${empty requestPathInfo.suffix ? param.item : requestPathInfo.suffix}"
sling:resourceType="dam/gui/coral/components/datasource/assetreferencesdatasource"/>
</jcr:root>

{
"alloworigin": [""],
"allowedpaths": ["/apps/eaem-cf-page-references.*"],
"supportedheaders": [
"Authorization",
"Origin",
"Accept",
"X-Requested-With",
"Content-Type",
"Access-Control-Request-Method",
"Access-Control-Request-Headers"
],
"supportedmethods": ["GET","HEAD"],
"alloworiginregexp": [ ".*"]
}

import React, {useState, useEffect} from 'react'
import {attach} from "@adobe/uix-guest"
import {
defaultTheme,
Flex,
Provider,
Content,
Text,
ButtonGroup,
Button, Dialog, Divider
} from '@adobe/react-spectrum'
import {useParams} from "react-router-dom"
import {extensionId} from "./Constants"

export default function CFPageReferencesModal() {
const GET_REFERENCES_URL = "/apps/eaem-cf-page-references/components/cf-page-references/references.html";
    const [guestConnection, setGuestConnection] = useState()
const [references, setReferences] = useState({});

    const {fragmentId} = useParams()

if (!fragmentId) {
console.error("fragmentId parameter is missing")
return
}

useEffect(() => {
        (async () => {
const guestConnection = await attach({id: extensionId})

            setGuestConnection(guestConnection)

const sharedContext = guestConnection.sharedContext,
auth = sharedContext.get('auth');

            const baseUrl = `https://${sharedContext.get('aemHost')}${GET_REFERENCES_URL}${fragmentId}`;

            const requestOptions = {
method: 'GET',
headers: new Headers({
'Authorization': `Bearer ${auth['imsToken']}`,
})
            };

            const res = await fetch(baseUrl, requestOptions);

            if (res.ok) {
                setReferences(await res.json());
}
        })()
    })

const onCloseHandler = () => {
        guestConnection.host.modal.close()
    }

return (
<Provider theme={defaultTheme}>
<Content>
<Flex direction="column"gap="size-125">
{
Object.entries(references).map(([path, title]) => {
return <Text>
<div>{title}</div>
<div>
<a target="_blank"
href={`https://${guestConnection.sharedContext.get('aemHost')}/bin/wcmcommand?cmd=open&path=${path}`}>
{path}
</a>
</div>
</Text>
})
                    }
</Flex>
<Flex width="100%"justifyContent="end"alignItems="center"height="70px">
<ButtonGroup align="end">
<Button variant="primary"onClick={onCloseHandler}>Close</Button>
</ButtonGroup>
</Flex>
</Content>
</Provider>
)
}