<commit_before>import React, { useEffect, useState } from 'react';
import MailMergeView, {
    microMailMerge,
} from 'components/MailMerge/MailMergeView';
import CollapsiblePanel from 'components/CollapsiblePanel';
import MailMerge from './MailMerge';
import { useRouteMatch } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { getMyQuery, getSearchNearbyQuery } from 'components/MailMerge/MailMergeUtils';
import { studyIslands, searchIslands } from 'containers/Islands/CommonIslands'
import useUrlParams from 'utils/UrlParamsProvider';
import { fetchSearchPageMM, fetchStudyPageHasura, fetchStudyPageHasuraDIS, fetchStudyPageNearby } from 'services/study/actions';
import { useDispatch, useSelector } from 'react-redux';
import { BeatLoader } from 'react-spinners';
import { RootState } from 'reducers';
import { useFragment, schemaTokens } from 'components/MailMerge/MailMergeFragment';
import { introspectionQuery } from 'graphql/utilities';
import { fetchNodeIntrospection, fetchHasuraIntrospection } from 'services/introspection/actions';
import { fetchSearchParams } from 'services/search/actions';

interface Props {
    url?: string;
    arg?: string;
}
type Mode = 'Study' | 'Search_Study' | 'Condition' | 'Search_Condition';

function getClassForMode(mode: Mode) {
    switch (mode) {
        case 'Study':
            return 'ctgov_prod_studies';
        case 'Search_Study':
            return 'ElasticStudy';
        case 'Condition':
            return 'Condition';
        case 'Search_Condition':
            return 'ElasticStudyDIS';
    }
}

export default function GenericPageWrapper(props: Props) {
    const match = useRouteMatch();
    const dispatch = useDispatch();
    const params = useUrlParams();
    const hasuraIntrospection = useSelector((state: RootState) => state.introspection.hasuraIntrospection);
    const nodeIntrospection = useSelector((state: RootState) => state.introspection.nodeIntrospection);

    const studyData = useSelector((state: RootState) => state.study.studyPage);
    const studyList = useSelector((state: RootState) => state.study.studyList);
    const upsertingLabel = useSelector((state: RootState) => state.study.isUpsertingLabel);
    const pageViewData = useSelector((state: RootState) => state.study.pageViewHasura);
    const data = useSelector((state: RootState) => state.search.searchResults);
    const currentPage = pageViewData ? pageViewData?.data?.page_views[0] : null;
    const suggestedLabels = useSelector((state: RootState) => state.study.suggestedLabels);
    const [template, setTemplate] = useState(currentPage?.template);

    const getPageType = (val) => {
        switch (val) {
            case 1:
                return 'Study'
            case 2:
                return 'Search_Study'
            case 3:
                return 'Condition'
            case 4:
                return 'Search_Condition'
            default:
                return "Search_Study"
        }
    }

    useEffect(() => {
      dispatch(fetchSearchParams(params.hash));
    }, [dispatch, params.hash]);
  
    const currentPageType = getPageType(currentPage?.page_type);
    const schemaType = getClassForMode(currentPageType);
    const templateSchemaTokens = schemaTokens(currentPage?.template)

    const [fragmentName, fragment] = useFragment(templateSchemaTokens[1], template || '');
    const GENERIC_QUERY = `${getMyQuery(fragmentName, fragment, templateSchemaTokens[1], templateSchemaTokens[2],templateSchemaTokens[3], templateSchemaTokens[4], templateSchemaTokens[5], templateSchemaTokens[6] && templateSchemaTokens[6]  )}`

    useEffect(() => {

        let searchParams = { ...data?.data?.searchParams };

        switch (pageType) {
            case 'Study':
                dispatch(fetchStudyPageHasura(currentStudy ?? "", GENERIC_QUERY));
                const SEARCH_NEARBY_QUERY = `${getSearchNearbyQuery()}`
                const pageSize = searchParams.searchParams.pageSize = studyList?.data?.search?.recordsTotal
                const finalPageSize = pageSizeHelper(pageSize)
                dispatch(fetchStudyPageNearby({ ...searchParams.searchParams, pageSize: finalPageSize }, SEARCH_NEARBY_QUERY))
                return
            case 'Search_Study':
                dispatch(fetchSearchPageMM(searchParams.searchParams, GENERIC_QUERY));
                return
            case 'Search_Condition':
                dispatch(fetchSearchPageMM(searchParams.searchParams, GENERIC_QUERY));
                return
            case 'Condition':
                dispatch(fetchStudyPageHasuraDIS(props.arg ?? "", GENERIC_QUERY));
                return
            default:
                console.log("No PAGE TYPE ")
                return
        }
    }, [dispatch, currentPage, props.arg, upsertingLabel, params.hash, data, suggestedLabels, studyList?.data?.search?.recordsTotal]);

    useEffect(() => {
      const QUERY = introspectionQuery
      pageType == "Search_Study" ? dispatch(fetchNodeIntrospection(QUERY)): dispatch(fetchHasuraIntrospection(QUERY));
    }, [dispatch]);
  
    const pageSizeHelper = (pageSize) => {
        if (pageSize > 500) {
            return 500
        } else {
            return pageSize
        }
    }

    const searchData = (pageType) => {
        switch (pageType) {
            case 'Study':
                return { ...studyData?.data?.ctgov_prod_studies[0], nextStudy, previousStudy }
            case 'Search_Study':
                let studies: any[] = []
                studyData?.data?.search?.studies?.map((study, index) => {
                    studies.push({ ...study, ALL: 'ALL', hash: 'hash', siteViewUrl: "siteViewUrl", pageViewUrl: 'pageViewUrl', q: 'q', })
                })
                return {
                    studies,
                    recordsTotal: studyData?.data?.search?.recordsTotal
                }
            case 'Search_Condition':
                let diseases: any[] = []
                studyData?.data?.searchDIS.diseases.map((disease, index) => {
                    diseases.push({ ...disease, ALL: 'ALL', hash: 'hash', siteViewUrl: "siteViewUrl", pageViewUrl: 'pageViewUrl', q: 'q', })
                })
                return {
                    diseases,
                    recordsTotal: studyData?.data?.searchDIS.recordsTotal
                }
            case 'Condition':
                return studyData?.data?.disyii2_prod_20210704_2_tbl_conditions[0]
            default:
                console.log("No PAGE TYPE ")
                return
        }
    }

    const currentStudy = match.params['docId']
    console.log("Match?", match)
    const nctIdObject = studyList?.data?.search?.studies?.find(study => study.nctId == currentStudy);
    const currentIndexOfStudyList = studyList?.data?.search?.studies?.indexOf(nctIdObject)
    // console.log('studyList?.data?.search?.studies', studyList?.data?.search?.studies.length);

    const nextStudy = () => {
        const nextNctId = studyList?.data?.search?.studies[currentIndexOfStudyList + 1]
        console.log("currentIndexOfStudyList", currentIndexOfStudyList);
        if (nextNctId && nextNctId.nctId) {
            console.log("nextNctId is", nextNctId.nctId);
            return nextNctId.nctId
        } else {
            console.log("adjust nextButton");
            return document.querySelector(".next-btn")?.classList.add("disabled-btn")
        }
    }

    const previousStudy = () => {
        const previousNctId = studyList?.data?.search?.studies[currentIndexOfStudyList - 1]
        if (previousNctId && previousNctId.nctId) {
            return previousNctId.nctId
        } else {
            return document.querySelector('.prev-btn')?.classList.add('disabled-btn')
        }
    }

    const pageType = getPageType(currentPage?.page_type);

    const title = microMailMerge(currentPage?.title, searchData(pageType)) || "Add a Title";

    const islands = pageType == 'Study' ? studyIslands : searchIslands;
  


  
    if (pageType == 'Study' && !studyData) {
        return <BeatLoader />
    }
    const introspection = pageType == 'Search_Study' ? nodeIntrospection : hasuraIntrospection;

if(!introspection){
  return <BeatLoader/>
}

    const types = introspection.data.__schema.types;
<commit_msg>update MM test with logic from old MMView<commit_after>import React, { useEffect, useState } from 'react';
import MailMergeView, {
    microMailMerge,
} from 'components/MailMerge/MailMergeView';
import CollapsiblePanel from 'components/CollapsiblePanel';
import MailMerge from './MailMerge';
import { useRouteMatch } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import { getMyQuery } from 'components/MailMerge/MailMergeUtils';
import { studyIslands, searchIslands } from 'containers/Islands/CommonIslands'
import useUrlParams from 'utils/UrlParamsProvider';
import { fetchSearchPageMM, fetchStudyPageHasura, fetchStudyPageHasuraDIS, fetchStudyPageNearby } from 'services/study/actions';
import { useDispatch, useSelector } from 'react-redux';
import { BeatLoader } from 'react-spinners';
import { RootState } from 'reducers';
import { useFragment, schemaTokens } from 'components/MailMerge/MailMergeFragment';
import { introspectionQuery } from 'graphql/utilities';
import { fetchNodeIntrospection, fetchHasuraIntrospection } from 'services/introspection/actions';
import { fetchSearchParams } from 'services/search/actions';
import {  useRef } from 'react';
import  {  applyTemplate, compileTemplate } from 'components/MailMerge/MailMergeView';
import { convertDisplayName, fetchIslandConfig, fetchSearchPageAggBuckets } from 'services/search/actions'
import { fetchSuggestedLabels, setShowLoginModal } from '../../services/study/actions';
import {  getSearchQuery, getHasuraStudyQuery, getSearchQueryDIS, getHasuraStudyQueryDIS, getSearchNearbyQuery } from 'components/MailMerge/MailMergeUtils';
import { islandTokens } from 'components/MailMerge/MailMergeFragment';
import { insertPageViewLog } from 'services/genericPage/actions';
import LoginModal from 'components/LoginModal';
import { uniq } from 'ramda';
import useHandlebars from 'hooks/useHandlebars';
interface Props {
    url?: string;
    arg?: string;
}
type Mode = 'Study' | 'Search_Study' | 'Condition' | 'Search_Condition';

function getClassForMode(mode: Mode) {
    switch (mode) {
        case 'Study':
            return 'ctgov_prod_studies';
        case 'Search_Study':
            return 'ElasticStudy';
        case 'Condition':
            return 'Condition';
        case 'Search_Condition':
            return 'ElasticStudyDIS';
    }
}

export default function GenericPageWrapper(props: Props) {
    const match = useRouteMatch();
    const dispatch = useDispatch();
    const params = useUrlParams();
    const hasuraIntrospection = useSelector((state: RootState) => state.introspection.hasuraIntrospection);
    const nodeIntrospection = useSelector((state: RootState) => state.introspection.nodeIntrospection);

    const studyData = useSelector((state: RootState) => state.study.studyPage);
    const studyList = useSelector((state: RootState) => state.study.studyList);
    const upsertingLabel = useSelector((state: RootState) => state.study.isUpsertingLabel);
    const pageViewData = useSelector((state: RootState) => state.study.pageViewHasura);
    const data = useSelector((state: RootState) => state.search.searchResults);
    const currentPage = pageViewData ? pageViewData?.data?.page_views[0] : null;
    const suggestedLabels = useSelector((state: RootState) => state.study.suggestedLabels);
    const [template, setTemplate] = useState(currentPage?.template);

    const currentUser = useSelector((state: RootState) => state.user.current);
    const isFetchingCurrentUser = useSelector((state: RootState) => state.user.isLoading);
    const islandConfig = useSelector((state: RootState) => state.search.islandConfig);
    const searchHash = useSelector((state: RootState) => state.search.searchHash);
    const searchParams = data?.data?.searchParams;
    const showLoginModal = useSelector((state: RootState) => state.study.showLoginModal);
    const getPageType = (val) => {
        switch (val) {
            case 1:
                return 'Study'
            case 2:
                return 'Search_Study'
            case 3:
                return 'Condition'
            case 4:
                return 'Search_Condition'
            default:
                return "Search_Study"
        }
    }

    useEffect(() => {
      dispatch(fetchSearchParams(params.hash));
    }, [dispatch, params.hash]);
  
    const currentPageType = getPageType(currentPage?.page_type);
    const schemaType = getClassForMode(currentPageType);
    const templateSchemaTokens = schemaTokens(currentPage?.template)

    const [fragmentName, fragment] = useFragment(templateSchemaTokens[1], template || '');
    const GENERIC_QUERY = `${getMyQuery(fragmentName, fragment, templateSchemaTokens[1], templateSchemaTokens[2],templateSchemaTokens[3], templateSchemaTokens[4], templateSchemaTokens[5], templateSchemaTokens[6] && templateSchemaTokens[6]  )}`

    useEffect(() => {

        let searchParams = { ...data?.data?.searchParams };

        switch (pageType) {
            case 'Study':
                dispatch(fetchStudyPageHasura(currentStudy ?? "", GENERIC_QUERY));
                const SEARCH_NEARBY_QUERY = `${getSearchNearbyQuery()}`
                const pageSize = searchParams.searchParams.pageSize = studyList?.data?.search?.recordsTotal
                const finalPageSize = pageSizeHelper(pageSize)
                dispatch(fetchStudyPageNearby({ ...searchParams.searchParams, pageSize: finalPageSize }, SEARCH_NEARBY_QUERY))
                return
            case 'Search_Study':
                dispatch(fetchSearchPageMM(searchParams.searchParams, GENERIC_QUERY));
                return
            case 'Search_Condition':
                dispatch(fetchSearchPageMM(searchParams.searchParams, GENERIC_QUERY));
                return
            case 'Condition':
                dispatch(fetchStudyPageHasuraDIS(props.arg ?? "", GENERIC_QUERY));
                return
            default:
                console.log("No PAGE TYPE ")
                return
        }
    }, [dispatch, currentPage, props.arg, upsertingLabel, params.hash, data, suggestedLabels, studyList?.data?.search?.recordsTotal]);

    useEffect(() => {
      const QUERY = introspectionQuery
      pageType == "Search_Study" ? dispatch(fetchNodeIntrospection(QUERY)): dispatch(fetchHasuraIntrospection(QUERY));
    }, [dispatch]);
  
    const pageSizeHelper = (pageSize) => {
        if (pageSize > 500) {
            return 500
        } else {
            return pageSize
        }
    }

    const searchData = (pageType) => {
        switch (pageType) {
            case 'Study':
                return { ...studyData?.data?.ctgov_prod_studies[0], nextStudy, previousStudy }
            case 'Search_Study':
                let studies: any[] = []
                studyData?.data?.search?.studies?.map((study, index) => {
                    studies.push({ ...study, ALL: 'ALL', hash: 'hash', siteViewUrl: "siteViewUrl", pageViewUrl: 'pageViewUrl', q: 'q', })
                })
                return {
                    studies,
                    recordsTotal: studyData?.data?.search?.recordsTotal
                }
            case 'Search_Condition':
                let diseases: any[] = []
                studyData?.data?.searchDIS.diseases.map((disease, index) => {
                    diseases.push({ ...disease, ALL: 'ALL', hash: 'hash', siteViewUrl: "siteViewUrl", pageViewUrl: 'pageViewUrl', q: 'q', })
                })
                return {
                    diseases,
                    recordsTotal: studyData?.data?.searchDIS.recordsTotal
                }
            case 'Condition':
                return studyData?.data?.disyii2_prod_20210704_2_tbl_conditions[0]
            default:
                console.log("No PAGE TYPE ")
                return
        }
    }

    const currentStudy = match.params['docId']
    console.log("Match?", match)
    const nctIdObject = studyList?.data?.search?.studies?.find(study => study.nctId == currentStudy);
    const currentIndexOfStudyList = studyList?.data?.search?.studies?.indexOf(nctIdObject)
    // console.log('studyList?.data?.search?.studies', studyList?.data?.search?.studies.length);

    const nextStudy = () => {
        const nextNctId = studyList?.data?.search?.studies[currentIndexOfStudyList + 1]
        console.log("currentIndexOfStudyList", currentIndexOfStudyList);
        if (nextNctId && nextNctId.nctId) {
            console.log("nextNctId is", nextNctId.nctId);
            return nextNctId.nctId
        } else {
            console.log("adjust nextButton");
            return document.querySelector(".next-btn")?.classList.add("disabled-btn")
        }
    }

    const previousStudy = () => {
        const previousNctId = studyList?.data?.search?.studies[currentIndexOfStudyList - 1]
        if (previousNctId && previousNctId.nctId) {
            return previousNctId.nctId
        } else {
            return document.querySelector('.prev-btn')?.classList.add('disabled-btn')
        }
    }

    const pageType = getPageType(currentPage?.page_type);

    const title = microMailMerge(currentPage?.title, searchData(pageType)) || "Add a Title";

    useEffect(() => {
        !isFetchingCurrentUser && dispatch(insertPageViewLog(currentUser?.id || null, window.location.href))
    }, [dispatch, window.location.href, isFetchingCurrentUser, currentUser]);

    const islands = pageType == 'Study' ? studyIslands : searchIslands;


    const islandKeys = new Set(Object.keys(islands || {}));
    const aggIslandsCurrent = useRef({
        currentAggIslands: [] as any[]
    })
    const wfIslandsCurrent = useRef({
        currentWFIslands: [] as any[]
    })

    console.log(islandKeys)



    const isAgg = island => island.name == "agg";
    const isWFAgg = island => island.name == "wfagg";

    // FETCH ISLAND CONFIG FOR UNIQUE AGG ISLAND IDs AND WF ISLAND IDs
    useEffect(() => {
        const islandKeys = islandTokens(currentPage.template)

        aggIslandsCurrent.current.currentAggIslands = islandKeys.filter(isAgg, islandKeys);
        wfIslandsCurrent.current.currentWFIslands = islandKeys.filter(isWFAgg, islandKeys);
        let uniqueAggs = uniq(aggIslandsCurrent.current.currentAggIslands);
        let aggIdArray: any[] = [];
        let uniqueWFIds = uniq(wfIslandsCurrent.current.currentWFIslands);
        let wfLabels: any[] = [];

        uniqueWFIds.map((WF) => {
            wfLabels.push(parseInt(WF.attribs.id))
        });

        uniqueAggs.map((agg) => {
            aggIdArray.push(parseInt(agg.attribs.id))

        });
        !islandConfig && dispatch(fetchIslandConfig(aggIdArray.concat(wfLabels)));
    }, [dispatch, currentPage]);
    // END 

    // FETCH BUCKETS FOR ISLANDS 
    useEffect(() => {
        // Duplicate code// Refactor // IslandsAggChild is other file
        let uniqueAggs = uniq(aggIslandsCurrent.current.currentAggIslands);
        let aggArray: any[] = [];
        let aggIdArray: any[] = [];
        let aggBucketsWanted: any[] = [];
        let aggSortArray: any[] = [];
        let crowdAggArray: any[] = [];
        let crowdAggIdArray: any[] = [];
        let crowdBucketsWanted: any[] = [];
        let crowdAggSortArray: any[] = [];

        islandConfig && uniqueAggs.map((agg) => {
            const aggID = agg.attribs.id;
            if (islandConfig[aggID]?.defaultToOpen == true) {
                let sort = {
                    id: islandConfig[aggID].order.sortKind,
                    desc: islandConfig[aggID].order.desc
                };

                islandConfig[aggID].aggKind == 'crowdAggs' && crowdAggArray.push(islandConfig[aggID].name);
                islandConfig[aggID].aggKind == 'crowdAggs' && crowdAggIdArray.push({ id: aggID, name: islandConfig[aggID].name });
                islandConfig[aggID].aggKind == 'crowdAggs' && crowdBucketsWanted.push(islandConfig[aggID].visibleOptions);
                islandConfig[aggID].aggKind == 'crowdAggs' && crowdAggSortArray.push(sort);
                islandConfig[aggID].aggKind == 'aggs' && aggArray.push(islandConfig[aggID].name);
                islandConfig[aggID].aggKind == 'aggs' && aggIdArray.push({ id: aggID, name: islandConfig[aggID].name });
                islandConfig[aggID].aggKind == 'aggs' && aggBucketsWanted.push(islandConfig[aggID].visibleOptions);
                islandConfig[aggID].aggKind == 'aggs' && aggSortArray.push(sort);
            }
        });


        if (searchParams && crowdAggArray.length !== 0 || searchParams && aggArray.length !== 0) {

            crowdAggArray.forEach((agg, i) => {

                const variables = {
                    ...searchParams.searchParams,
                    url: params.sv,
                    configType: 'presearch',
                    returnAll: false,
                    agg: `fm_${agg}`,
                    aggOptionsSort: crowdAggSortArray[i],
                    pageSize: 100,
                    page: 1,
                    q: searchParams.searchParams.q,
                    aggBucketsWanted: crowdBucketsWanted[i]

                };

                dispatch(fetchSearchPageAggBuckets(variables, crowdAggIdArray[i].id))
            });
            aggArray.forEach((agg, i) => {

                const variables = {
                    ...searchParams.searchParams,
                    url: params.sv,
                    configType: 'presearch',
                    returnAll: false,
                    agg: agg,
                    aggOptionsSort: aggSortArray[i],
                    pageSize: 25,
                    page: 1,
                    q: searchParams.searchParams.q,
                    aggBucketsWanted: aggBucketsWanted[i]

                };

                dispatch(fetchSearchPageAggBuckets(variables, aggIdArray[i].id))
            });
        }

    }, [dispatch, islandConfig, searchHash, searchParams])
    // END 

    // FETCH BUCKETS FOR WF 
    useEffect(() => {
        let uniqueWFIds = uniq(wfIslandsCurrent.current.currentWFIslands);
        let wfLabels: any[] = [];

        islandConfig && uniqueWFIds.map((WF) => {
            const wfID = WF.attribs.id;
            if (islandConfig[wfID]?.defaultToOpen == true) {
                islandConfig[wfID] && wfLabels.push(islandConfig[wfID].name);
            }
        })

        if (wfLabels) {
            //@ts-ignore
            wfLabels[0] && dispatch(fetchSuggestedLabels(searchData(pageType)?.nct_id, wfLabels));

        }


    }, [dispatch, islandConfig])
    // END
    // WFISLANDS CONVERTDISPLAY NAME 

    useEffect(() => {
        let uniqueWFIds = uniq(wfIslandsCurrent.current.currentWFIslands);

        suggestedLabels && uniqueWFIds.map((WF) => {
            const wfID = WF.attribs.id;
            let currentKeyObjects = suggestedLabels.data.crowd_keys.filter((x) => x.crowd_key === islandConfig[wfID].name)

            if (islandConfig[wfID]?.defaultToOpen == true) {
                const compiled = islandConfig[wfID] && compileTemplate(islandConfig[wfID].displayName)
                const raw = applyTemplate(compiled, currentKeyObjects[0])
                if (raw !== islandConfig[wfID].displayName) {
                    dispatch(convertDisplayName(raw, wfID))
                }
            }
        })

    }, [suggestedLabels])  


  
    if (pageType == 'Study' && !studyData) {
        return <BeatLoader />
    }
    const introspection = pageType == 'Search_Study' ? nodeIntrospection : hasuraIntrospection;

if(!introspection){
  return <BeatLoader/>
}

    const types = introspection.data.__schema.types;

{'fraction_non_alphanumeric': 0.11863980903722937, 'fraction_numerical': 0.003224590644499351, 'mean_word_length': 2.6045283018867926, 'pattern_counts': {'":': 0, '<': 7, '<?xml version=': 0, '>': 67, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3864931', 'n_tokens_mistral': 6908, 'n_tokens_neox': 6509, 'n_words': 1274}