#83: unify selectors: defining a content type's set of queries (with …

…optional variable-getter, either as an object or an array), props-processors and page-components in one place. Single export/import.

src/components/BasePage.tsx

@@ -5,7 +5,7 @@ import Custom404 from './errors/404';
 import CustomError from './errors/Error';
 
 import DefaultPage from "../components/pagetypes/_Default";
-import { pageSelector } from "../selectors/pages";
+import selector, {TypeSelection} from "../selectors/selector";
 
 import {ContentResult} from "../shared/data/fetchContent";
 
@@ -15,7 +15,7 @@ const errorPageSelector = {
     '500': Custom500
 }
 
-const BasePage = ({meta, content, error}: ContentResult) => {
+const BasePage = ({content, meta, error}: ContentResult) => {
     if (error) {
         // @ts-ignore
         const ErrorPage = errorPageSelector[error.code] || CustomError;
@@ -35,7 +35,9 @@ const BasePage = ({meta, content, error}: ContentResult) => {
     }
 
     // @ts-ignore
-    const SelectedPage = pageSelector[meta.type] || DefaultPage;
+    const typeSelection: TypeSelection = (selector || {})[meta.type]
+    const SelectedPage = typeSelection?.page || DefaultPage;
+
     return <SelectedPage {...content} />;
 };
 

src/pages/[[...contentPath]].tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 
 import buildContentFetcher, { ContentFetcher } from "../shared/data/fetchContent";
-import { querySelector, variablesGetterSelector } from "../selectors/queries";
-import {propsProcessorSelector} from "../selectors/propsProcessors";
+import selector from "../selectors/selector";
 import enonicConnectionConfig from "../enonic-connection-config";
 
 import BasePage from "../components/BasePage";
@@ -36,9 +35,7 @@ type EnonicConnectionConfig = {
 
 const fetchContent: ContentFetcher = buildContentFetcher<EnonicConnectionConfig>({
     enonicConnectionConfig,
-    querySelector,
-    variablesGetterSelector,
-    propsProcessorSelector,
+    selector,
     firstMethodKey: true
 });
 
@@ -53,7 +50,7 @@ export const getServerSideProps = async (context: Context) => {
         error = null
     } = await fetchContent(context.params.contentPath, context);
 
-    console.log({ content, meta, error });
+                                                                                                                        console.log({ content, meta, error });
     return {
         props: {
             content,

src/pages/_app.tsx

@@ -7,6 +7,11 @@ import Head from "next/head";
 
 const mainHeading = "Next.xp"
 
+/**
+ *
+ * @param Component Usually triggering [[...contentPath]].tsx, this component is BasePage.tsx
+ * @param pageProps {{content, common, meta, error}}
+ */
 function MyApp({Component, pageProps}: AppProps) {
     const subHeading = pageProps.common?.header?.title || "PoC";
     const layoutProps = {

src/selectors/propsProcessors/processFolder.ts

@@ -1,6 +1,5 @@
 import { List } from "../queries/getList";
 import { getLocalPagePathFromXpPath } from "./paths/paths";
-import {PropsProcessorFunc} from "../propsProcessors";
 import {Context} from "../../pages/[[...contentPath]]";
 import {fromXpParam} from "../../enonic-connection-config";
 
@@ -17,7 +16,7 @@ export type DisplaybleChild = {
 
 
 
-export const processFolderProps: PropsProcessorFunc = (list: List, context?: Context): DisplayableList => {
+const processFolderProps = (list: List, context?: Context): DisplayableList => {
     const requestIsFromXp = !!context?.query[fromXpParam];
     return {
         displayName: list.displayName,
@@ -29,3 +28,5 @@ export const processFolderProps: PropsProcessorFunc = (list: List, context?: Con
             : null
     };
 };
+
+export default processFolderProps;

src/selectors/propsProcessors/processMovie.ts

@@ -1,7 +1,6 @@
 import {DisplayablePhoto, getFirstPhotoData} from "./images/images";
 import {CastItem, Movie} from "../queries/getMovie";
 import { getLocalPagePathFromXpPath } from "./paths/paths";
-import {PropsProcessorFunc} from "../propsProcessors";
 import {Context} from "../../pages/[[...contentPath]]";
 import {fromXpParam} from "../../enonic-connection-config";
 
@@ -60,7 +59,7 @@ const getCast = (cast: CastItem | CastItem[] | undefined, requestIsFromXp: boole
 };
 
 
-export const processMovieProps: PropsProcessorFunc = (movie:Movie, context?: Context): DisplayableMovie => {
+const processMovieProps = (movie:Movie, context?: Context): DisplayableMovie => {
     const requestIsFromXp = !!context?.query[fromXpParam];
     const movieData = movie.data || {};
 
@@ -74,3 +73,5 @@ export const processMovieProps: PropsProcessorFunc = (movie:Movie, context?: Con
         parent: getLocalPagePathFromXpPath(movie.parent?._path, requestIsFromXp)
     };
 };
+
+export default processMovieProps;

src/selectors/propsProcessors/processPerson.ts

@@ -2,7 +2,6 @@ import { Person } from "../queries/getPerson";
 import { DisplayablePhoto, getFirstPhotoData } from "./images/images";
 import { getLocalPagePathFromXpPath } from "./paths/paths";
 import {Context} from "../../pages/[[...contentPath]]";
-import {PropsProcessorFunc} from "../propsProcessors";
 import {fromXpParam} from "../../enonic-connection-config";
 
 
@@ -15,7 +14,7 @@ export type DisplayablePerson = {
 }
 
 
-export const processPersonProps: PropsProcessorFunc = (person: Person, context?: Context): DisplayablePerson => {
+const processPersonProps = (person: Person, context?: Context): DisplayablePerson => {
     const requestIsFromXp = !!context?.query[fromXpParam];
     return {
         displayName: person.displayName,
@@ -24,3 +23,5 @@ export const processPersonProps: PropsProcessorFunc = (person: Person, context?:
         parent: getLocalPagePathFromXpPath(person.parent?._path, requestIsFromXp)
     };
 };
+
+export default processPersonProps;

src/selectors/queries/getList.ts

@@ -1,11 +1,11 @@
 export default `
-query($path:ID!){
+query($path:ID!,$maxChildren:Int){
   guillotine {
     get(key:$path) {
       type
       displayName
       ...on base_Folder {
-        children(first:1000) {
+        children(first:$maxChildren) {
             displayName
             _path
         }
@@ -14,6 +14,11 @@ query($path:ID!){
   }
 }`;
 
+// Since the query uses a $maxChildren parameter
+export const getListVariables = (path:string) => ({ path, maxChildren: 1000 }) ;
+
+
+
 export type Child = {
     displayName: string,
     _path?: string
@@ -23,3 +28,5 @@ export type List = {
     displayName: string,
     children: Child[]
 };
+
+

src/selectors/selector.ts

@@ -0,0 +1,71 @@
+import {Context} from "../pages/[[...contentPath]]";
+
+import {appKey} from "../enonic-connection-config";
+
+import PersonPage from "../components/pagetypes/Person";
+import MoviePage from "../components/pagetypes/Movie";
+import ListPage from "../components/pagetypes/List";
+
+import personQuery from "./queries/getPerson";
+import movieQuery from "./queries/getMovie";
+import listQuery, {getListVariables} from "./queries/getList";
+
+import processPersonProps from "./propsProcessors/processPerson";
+import processMovieProps from "./propsProcessors/processMovie";
+import processFolderProps from "./propsProcessors/processFolder";
+
+
+
+
+////////////////////////////////////////////////////////////////////////  Types:
+
+export type PropsProcessor = (content: any, context?: Context) => any
+
+export type VariablesGetter = (path: string, context?: Context) => {
+    path: string,
+    [variables: string]: any
+};
+
+export type PageComponent = (content:any) => JSX.Element
+
+export type SelectedQueryMaybeVariablesFunc = string |
+    { query:string, variables:VariablesGetter } |
+    [ string, VariablesGetter ]
+
+export type TypeSelection = {
+    query?: SelectedQueryMaybeVariablesFunc,
+    props?: PropsProcessor,
+    page?: PageComponent
+
+}
+
+export type Selector = {
+    [fullContentType:string]: TypeSelection
+}
+
+
+/////////////////////////////////////////////////////////////////////////  Selector:
+
+const selector: Selector = {
+
+    [`${appKey}:person`]: {
+        query: personQuery,
+        props: processPersonProps,
+        page: PersonPage
+    },
+
+    [`${appKey}:movie`]: {
+        query: movieQuery,
+        props: processMovieProps,
+        page: MoviePage
+    },
+
+    'base:folder': {
+        query: [ listQuery, getListVariables ],
+        props: processFolderProps,
+        page: ListPage
+    }
+};
+
+
+export default selector;