Merge pull request #2 from Sunscreen-tech/samtay/presets

Example presets

ui/frontend/ExampleMenu.tsx

@@ -0,0 +1,48 @@
+import React, { Fragment, useCallback } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+
+import MenuGroup from './MenuGroup';
+import SelectOne from './SelectOne';
+
+import * as actions from './actions';
+import State from './state';
+import { Example } from './types';
+
+interface ExampleMenuProps {
+  close: () => void;
+}
+
+const ExampleMenu: React.SFC<ExampleMenuProps> = props => {
+  const example = useSelector((state: State) => state.configuration.example);
+  const dispatch = useDispatch();
+  const changeExample = useCallback((example) => {
+    dispatch(actions.changeExample(example));
+    props.close();
+  }, [dispatch, props]
+  );
+
+  return (
+    <Fragment>
+      <MenuGroup title="Example &mdash; Choose example code to explore">
+        <SelectOne
+          name="Private Information Retrieval"
+          currentValue={example}
+          thisValue={Example.Pir}
+          changeValue={changeExample}
+        >
+          Explore privately querying a database with our FHE compiler.
+        </SelectOne>
+        <SelectOne
+          name="Sudoku"
+          currentValue={example}
+          thisValue={Example.Sudoku}
+          changeValue={changeExample}
+        >
+          Use our ZKP compiler to prove that you have a valid Sudoku solution, without revealing the solution itself.
+        </SelectOne>
+      </MenuGroup>
+    </Fragment>
+  );
+};
+
+export default ExampleMenu;

ui/frontend/Header.tsx

@@ -15,12 +15,15 @@ import * as actions from './actions';
 import * as selectors from './selectors';
 
 import styles from './Header.module.css';
+import ExampleMenu from './ExampleMenu';
+import State from './state';
 
 const Header: React.SFC = () => (
   <div data-test-id="header" className={styles.container}>
     <HeaderSet id="build">
       <SegmentedButtonSet>
         <ExecuteButton />
+        <ExampleMenuButton />
         <BuildMenuButton />
       </SegmentedButtonSet>
     </HeaderSet>
@@ -88,6 +91,20 @@ const BuildMenuButton: React.SFC = () => {
   return <PopButton Button={Button} Menu={BuildMenu} />;
 };
 
+const ExampleMenuButton: React.SFC = () => {
+  // For now just use enum key as label
+  const label = useSelector((state: State) => state.configuration.example);
+
+  const Button = React.forwardRef<HTMLButtonElement, { toggle: () => void }>(({ toggle }, ref) => (
+    <SegmentedButton title="Example &mdash; Choose the example code" ref={ref} onClick={toggle}>
+      <HeaderButton isExpandable>{label}</HeaderButton>
+    </SegmentedButton>
+  ));
+  Button.displayName = 'ExampleMenuButton.Button';
+
+  return <PopButton Button={Button} Menu={ExampleMenu} />;
+};
+
 const ModeMenuButton: React.SFC = () => {
   const label = useSelector(selectors.getModeLabel);
 

ui/frontend/Output/Gist.tsx

@@ -15,7 +15,7 @@ const Gist: React.SFC = () => {
 
   return (
     <div>
-      { showLoader ? <Loader /> : <Links />}
+      {showLoader ? <Loader /> : <Links />}
     </div>
   );
 };
@@ -54,16 +54,16 @@ class Copied extends React.PureComponent<CopiedProps, CopiedState> {
 
 const Links: React.SFC = () => {
   const codeUrl = useSelector(selectors.codeUrlSelector);
-  const gistUrl = useSelector((state: State) => state.output.gist.url);
-  const permalink = useSelector(selectors.permalinkSelector);
-  const urloUrl = useSelector(selectors.urloUrlSelector);
+  // const gistUrl = useSelector((state: State) => state.output.gist.url);
+  // const permalink = useSelector(selectors.permalinkSelector);
+  // const urloUrl = useSelector(selectors.urloUrlSelector);
 
   return (
     <Fragment>
-      <Copied href={permalink}>Permalink to the playground</Copied>
-      <Copied href={gistUrl}>Direct link to the gist</Copied>
+      {/*<Copied href={permalink}>Permalink to the playground</Copied>*/}
+      {/*<Copied href={gistUrl}>Direct link to the gist</Copied>*/}
       <Copied href={codeUrl}>Embedded code in link</Copied>
-      <NewWindow href={urloUrl}>Open a new thread in the Rust user forum</NewWindow>
+      {/*<NewWindow href={urloUrl}>Open a new thread in the Rust user forum</NewWindow>*/}
     </Fragment>
   );
 };

ui/frontend/Router.tsx

@@ -12,12 +12,13 @@ import * as actions from './actions';
 const homeRoute = new Route('/');
 const helpRoute = new Route('/help');
 
-const stateSelector = ({ page, configuration: { channel, mode, edition } }) => ({
+const stateSelector = ({ page, configuration: { channel, mode, edition, example } }) => ({
   page,
   configuration: {
     channel,
     mode,
     edition,
+    example
   },
 });
 
@@ -34,6 +35,7 @@ const stateToLocation = ({ page, configuration }) => {
         version: configuration.channel,
         mode: configuration.mode,
         edition: configuration.edition,
+        example: configuration.example,
       };
       return {
         pathname: `/?${qs.stringify(query)}`,
@@ -42,7 +44,7 @@ const stateToLocation = ({ page, configuration }) => {
   }
 };
 
-const locationToAction = location => {
+const locationToAction = (location, initialPageLoad: boolean) => {
   const matchedHelp = helpRoute.match(location.pathname);
 
   if (matchedHelp) {
@@ -52,7 +54,9 @@ const locationToAction = location => {
   const matched = homeRoute.match(location.pathname);
 
   if (matched) {
-    return actions.indexPageLoad(qs.parse(location.search.slice(1)));
+    let query = qs.parse(location.search.slice(1));
+    query.initialPageLoad = initialPageLoad;
+    return actions.indexPageLoad(query);
   }
 
   return null;

ui/frontend/actions.ts

@@ -18,6 +18,7 @@ import {
   DemangleAssembly,
   Edition,
   Editor,
+  Example,
   Focus,
   Mode,
   Notification,
@@ -61,6 +62,7 @@ const createAction = <T extends string, P extends {}>(type: T, props?: P) => (
 
 export enum ActionType {
   SetPage = 'SET_PAGE',
+  ChangeExample = 'CHANGE_EXAMPLE',
   ChangeEditor = 'CHANGE_EDITOR',
   ChangeKeybinding = 'CHANGE_KEYBINDING',
   ChangeAceTheme = 'CHANGE_ACE_THEME',
@@ -133,6 +135,9 @@ const setPage = (page: Page) =>
 export const navigateToIndex = () => setPage('index');
 export const navigateToHelp = () => setPage('help');
 
+export const changeExample = (example: Example, changeCode: boolean = true) =>
+  createAction(ActionType.ChangeExample, { example, changeCode });
+
 export const changeEditor = (editor: Editor) =>
   createAction(ActionType.ChangeEditor, { editor });
 
@@ -753,6 +758,8 @@ function parseEdition(s: string): Edition | null {
 export function indexPageLoad({
   code,
   gist,
+  example,
+  initialPageLoad,
   version = 'stable',
   mode: modeString = 'release',
   edition: editionString,
@@ -777,6 +784,8 @@ export function indexPageLoad({
       dispatch(editCode(code));
     } else if (gist) {
       dispatch(performGistLoad({ id: gist, channel, mode, edition }));
+    } else if (example) {
+      dispatch(changeExample(example, initialPageLoad))
     }
 
     if (channel) {
@@ -806,6 +815,7 @@ export function showExample(code): ThunkAction {
 
 export type Action =
   | ReturnType<typeof setPage>
+  | ReturnType<typeof changeExample>
   | ReturnType<typeof changePairCharacters>
   | ReturnType<typeof changeAssemblyFlavor>
   | ReturnType<typeof changeBacktrace>