Merge pull request #67 from eyra/endless-growing-page

Fixed endless growing page, made Footer optional and created basic default flow

src/framework/processing/py/port/api/props.py

@@ -401,15 +401,20 @@ class PropsUIPageDonation:
     platform: str
     header: PropsUIHeader
     body: PropsUIPromptRadioInput | PropsUIPromptConsentForm | PropsUIPromptFileInput | PropsUIPromptConfirm | PropsUIPromptQuestionnaire
-    footer: PropsUIFooter
+    footer: Optional[PropsUIFooter]
+
+    def translate_footer(self):
+        if self.footer is None:
+            return None
+        return self.footer.toDict()
 
     def toDict(self):
         dict = {}
         dict["__type__"] = "PropsUIPageDonation"
         dict["platform"] = self.platform
         dict["header"] = self.header.toDict()
         dict["body"] = self.body.toDict()
-        dict["footer"] = self.footer.toDict()
+        dict["footer"] = self.translate_footer()
         return dict
 
 

src/framework/processing/py/port/script.py

@@ -8,80 +8,59 @@
 def process(sessionId):
     yield donate(f"{sessionId}-tracking", '[{ "message": "user entered script" }]')
 
-    platforms = ["Twitter", "Facebook", "Instagram", "Youtube"]
-
-    subflows = len(platforms)
-    steps = 2
-    step_percentage = (100/subflows)/steps
-
-    # progress in %
-    progress = 0
-
-    for index, platform in enumerate(platforms):
-        meta_data = []
-        meta_data.append(("debug", f"{platform}: start"))
-
-        # STEP 1: select the file
-        progress += step_percentage
-        data = None
-        while True:
-            meta_data.append(("debug", f"{platform}: prompt file"))
-            promptFile = prompt_file(platform, "application/zip, text/plain")
-            fileResult = yield render_donation_page(platform, promptFile, progress)
-            if fileResult.__type__ == 'PayloadString':
-                meta_data.append(("debug", f"{platform}: extracting file"))
-                extractionResult = doSomethingWithTheFile(platform, fileResult.value)
-                if extractionResult != 'invalid':
-                    meta_data.append(("debug", f"{platform}: extraction successful, go to consent form"))
-                    data = extractionResult
-                    break
-                else:
-                    meta_data.append(("debug", f"{platform}: prompt confirmation to retry file selection"))
-                    retry_result = yield render_donation_page(platform, retry_confirmation(platform), progress)
-                    if retry_result.__type__ == 'PayloadTrue':
-                        meta_data.append(("debug", f"{platform}: skip due to invalid file"))
-                        continue
-                    else:
-                        meta_data.append(("debug", f"{platform}: retry prompt file"))
-                        break
-            else:
-                meta_data.append(("debug", f"{platform}: skip to next step"))
+    key = "zip-contents-example"
+    meta_data = []
+    meta_data.append(("debug", f"{key}: start"))
+
+    # STEP 1: select the file
+    data = None
+    while True:
+        meta_data.append(("debug", f"{key}: prompt file"))
+        promptFile = prompt_file("application/zip, text/plain")
+        fileResult = yield render_donation_page(promptFile)
+        if fileResult.__type__ == 'PayloadString':
+            meta_data.append(("debug", f"{key}: extracting file"))
+            extractionResult = doSomethingWithTheFile(fileResult.value)
+            if extractionResult != 'invalid':
+                meta_data.append(("debug", f"{key}: extraction successful, go to consent form"))
+                data = extractionResult
                 break
+            else:
+                meta_data.append(("debug", f"{key}: prompt confirmation to retry file selection"))
+                retry_result = yield render_donation_page(retry_confirmation())
+                if retry_result.__type__ == 'PayloadTrue':
+                    meta_data.append(("debug", f"{key}: skip due to invalid file"))
+                    continue
+                else:
+                    meta_data.append(("debug", f"{key}: retry prompt file"))
+                    break
 
-        # STEP 2: ask for consent
-        progress += step_percentage
-        if data is not None:
-            meta_data.append(("debug", f"{platform}: prompt consent"))
-            prompt = prompt_consent(platform, data, meta_data)
-            consent_result = yield render_donation_page(platform, prompt, progress)
-            if consent_result.__type__ == "PayloadJSON":
-                meta_data.append(("debug", f"{platform}: donate consent data"))
-                yield donate(f"{sessionId}-{platform}", consent_result.value)
+    # STEP 2: ask for consent
+    if data is not None:
+        meta_data.append(("debug", f"{key}: prompt consent"))
+        prompt = prompt_consent(data, meta_data)
+        consent_result = yield render_donation_page(prompt)
+        if consent_result.__type__ == "PayloadJSON":
+            meta_data.append(("debug", f"{key}: donate consent data"))
+            yield donate(f"{sessionId}-{key}", consent_result.value)
 
     yield exit(0, "Success")
-    yield render_end_page()
-
 
-def render_end_page():
-    page = props.PropsUIPageEnd()
-    return CommandUIRender(page)
 
-
-def render_donation_page(platform, body, progress):
+def render_donation_page(body):
     header = props.PropsUIHeader(props.Translatable({
-        "en": platform,
-        "nl": platform
+        "en": "Port flow example",
+        "nl": "Port voorbeeld flow"
     }))
 
-    footer = props.PropsUIFooter(progress)
-    page = props.PropsUIPageDonation(platform, header, body, footer)
+    page = props.PropsUIPageDonation("Zip", header, body, None)
     return CommandUIRender(page)
 
 
-def retry_confirmation(platform):
+def retry_confirmation():
     text = props.Translatable({
-        "en": f"Unfortunately, we cannot process your {platform} file. Continue, if you are sure that you selected the right file. Try again to select a different file.",
-        "nl": f"Helaas, kunnen we uw {platform} bestand niet verwerken. Weet u zeker dat u het juiste bestand heeft gekozen? Ga dan verder. Probeer opnieuw als u een ander bestand wilt kiezen."
+        "en": "Unfortunately, we cannot process your file. Continue, if you are sure that you selected the right file. Try again to select a different file.",
+        "nl": "Helaas, kunnen we uw bestand niet verwerken. Weet u zeker dat u het juiste bestand heeft gekozen? Ga dan verder. Probeer opnieuw als u een ander bestand wilt kiezen."
     })
     ok = props.Translatable({
         "en": "Try again",
@@ -94,16 +73,16 @@ def retry_confirmation(platform):
     return props.PropsUIPromptConfirm(text, ok, cancel)
 
 
-def prompt_file(platform, extensions):
+def prompt_file(extensions):
     description = props.Translatable({
-        "en": f"Please follow the download instructions and choose the file that you stored on your device. Click “Skip” at the right bottom, if you do not have a {platform} file. ",
-        "nl": f"Volg de download instructies en kies het bestand dat u opgeslagen heeft op uw apparaat. Als u geen {platform} bestand heeft klik dan op “Overslaan” rechts onder."
+        "en": "Please select any zip file stored on your device.",
+        "nl": "Selecteer een willekeurige zip file die u heeft opgeslagen op uw apparaat."
     })
 
     return props.PropsUIPromptFileInput(description, extensions)
 
 
-def doSomethingWithTheFile(platform, filename):
+def doSomethingWithTheFile(filename):
     return extract_zip_contents(filename)
 
 
@@ -121,7 +100,7 @@ def extract_zip_contents(filename):
         return "invalid"
 
 
-def prompt_consent(id, data, meta_data):
+def prompt_consent(data, meta_data):
 
     table_title = props.Translatable({
         "en": "Zip file contents",
@@ -143,5 +122,6 @@ def prompt_consent(id, data, meta_data):
 def donate(key, json_string):
     return CommandSystemDonate(key, json_string)
 
+
 def exit(code, info):
     return CommandSystemExit(code, info)

src/framework/processing/worker_engine.ts

@@ -1,13 +1,12 @@
 import { CommandHandler, ProcessingEngine } from '../types/modules'
-import { CommandSystemDonate, CommandUIRender, isCommand, Response } from '../types/commands'
+import { CommandSystemDonate, isCommand, Response } from '../types/commands'
 
 export default class WorkerProcessingEngine implements ProcessingEngine {
   sessionId: String
   worker: Worker
   commandHandler: CommandHandler
 
   resolveInitialized!: () => void
-  resolveContinue!: () => void
 
   constructor (sessionId: string, worker: Worker, commandHandler: CommandHandler) {
     this.sessionId = sessionId
@@ -60,9 +59,8 @@ export default class WorkerProcessingEngine implements ProcessingEngine {
     console.log('[WorkerProcessingEngine] started')
 
     const waitForInitialization: Promise<void> = this.waitForInitialization()
-    const waitForSplashScreen: Promise<void> = this.waitForSplashScreen()
 
-    Promise.all([waitForInitialization, waitForSplashScreen]).then(
+    waitForInitialization.then(
       () => { this.firstRunCycle() },
       () => {}
     )
@@ -75,23 +73,6 @@ export default class WorkerProcessingEngine implements ProcessingEngine {
     })
   }
 
-  async waitForSplashScreen (): Promise<void> {
-    return await new Promise<void>((resolve) => {
-      this.resolveContinue = resolve
-      this.renderSplashScreen()
-    })
-  }
-
-  renderSplashScreen (): void {
-    const command: CommandUIRender = { __type__: 'CommandUIRender', page: { __type__: 'PropsUIPageSplashScreen' } }
-    if (isCommand(command)) {
-      this.commandHandler.onCommand(command).then(
-        (_response) => this.resolveContinue(),
-        () => {}
-      )
-    }
-  }
-
   firstRunCycle (): void {
     this.worker.postMessage({ eventType: 'firstRunCycle', sessionId: this.sessionId })
   }

src/framework/types/pages.ts

@@ -9,36 +9,27 @@ import {
 } from './prompts'
 
 export type PropsUIPage =
-  PropsUIPageSplashScreen |
   PropsUIPageDonation |
   PropsUIPageEnd |
   PropsUIPageError
 
 export function isPropsUIPage (arg: any): arg is PropsUIPage {
   return (
-    isPropsUIPageSplashScreen(arg) ||
     isPropsUIPageDonation(arg) ||
     isPropsUIPageEnd(arg) ||
     isPropsUIPageError(arg)
   )
 }
 
-export interface PropsUIPageSplashScreen {
-  __type__: 'PropsUIPageSplashScreen'
-}
-export function isPropsUIPageSplashScreen (arg: any): arg is PropsUIPageSplashScreen {
-  return isInstanceOf<PropsUIPageSplashScreen>(arg, 'PropsUIPageSplashScreen', [])
-}
-
 export interface PropsUIPageDonation {
   __type__: 'PropsUIPageDonation'
   platform: string
   header: PropsUIHeader
   body: PropsUIPromptFileInput | PropsUIPromptConfirm | PropsUIPromptConsentForm | PropsUIPromptRadioInput | PropsUIPromptQuestionnaire
-  footer: PropsUIFooter
+  footer?: PropsUIFooter
 }
 export function isPropsUIPageDonation (arg: any): arg is PropsUIPageDonation {
-  return isInstanceOf<PropsUIPageDonation>(arg, 'PropsUIPageDonation', ['platform', 'header', 'body', 'footer'])
+  return isInstanceOf<PropsUIPageDonation>(arg, 'PropsUIPageDonation', ['platform', 'header', 'body'])
 }
 
 export interface PropsUIPageEnd {

src/framework/visualisation/react/factory.tsx

@@ -1,9 +1,9 @@
 
 import { EndPage } from './ui/pages/end_page'
-import { isPropsUIPageEnd, isPropsUIPageDonation, PropsUIPage, isPropsUIPageSplashScreen, isPropsUIPageError } from '../../types/pages'
+import { isPropsUIPageEnd, isPropsUIPageDonation, PropsUIPage, isPropsUIPageError } from '../../types/pages'
 import { DonationPage } from './ui/pages/donation_page'
 import { Payload } from '../../types/commands'
-import { SplashScreen } from './ui/pages/splash_screen'
+
 import { ErrorPage } from './ui/pages/error_page'
 
 export interface ReactFactoryContext {
@@ -13,9 +13,6 @@ export interface ReactFactoryContext {
 
 export default class ReactFactory {
   createPage (page: PropsUIPage, context: ReactFactoryContext): JSX.Element {
-    if (isPropsUIPageSplashScreen(page)) {
-      return <SplashScreen {...page} {...context} />
-    }
     if (isPropsUIPageEnd(page)) {
       return <EndPage {...page} {...context} />
     }

src/framework/visualisation/react/ui/pages/donation_page.tsx

@@ -52,30 +52,26 @@ export const DonationPage = (props: Props): JSX.Element => {
     resolve?.({ __type__: 'PayloadFalse', value: false })
   }
 
-  const footer: JSX.Element = (
-    <Footer
-      middle={<Progress percentage={props.footer.progressPercentage} />}
+  function renderFooter (props: Props): JSX.Element | undefined {
+    if (props.footer != null) {
+      return <Footer
+      middle={<Progress percentage={props.footer?.progressPercentage ?? 0} />}
       right={
         <div className='flex flex-row'>
           <div className='flex-grow' />
           <ForwardButton label={forwardButton} onClick={handleSkip} />
         </div>
-      }
-    />
-  )
+      } />
+    } else {
+      return undefined
+    }
+  }
 
-  // COMMENT BY NIEK: I TURNED OFF THE SIDEBAR (UGLY)
-  // const sidebar: JSX.Element = (
-  //  <Sidebar
-  //    logo={LogoSvg}
-  //    content={
-  //      <Instructions platform={platform} locale={locale} />
-  //    }
-  //  />
-  // )
-  // COMMENT BY KASPER: MADE SIDEBAR OPTIONAL IN <Page /> COMPONENT,
-  // SO THAT IT DOESN'T AFFECT THE LAYOUT OF THE PAGE
-  // const sidebar: JSX.Element = <></>
+  const footer: JSX.Element | undefined = (
+    <>
+      {renderFooter(props)}
+    </>
+  )
 
   const body: JSX.Element = (
     <>