add more examples button

new_webapp/src/actions/index.js

@@ -1,7 +1,8 @@
 import * as Consts from "../constants/action-types";
 import _ from "underscore";
-import { hooglePlusTypeSearch, ghciUsage, hooglePlusExampleSearch } from "../gateways";
+import { hooglePlusTypeSearch, ghciUsage, hooglePlusExampleSearch, hooglePlusMoreExamples } from "../gateways";
 import { namedArgsToUsage } from "../utilities/args";
+import { LOADING, DONE } from "../constants/fetch-states";
 
 function makeActionCreator(type, ...argNames) {
     return function (...args) {
@@ -31,6 +32,7 @@ export const setSearchTypeInternal = makeActionCreator(Consts.SET_SEARCH_TYPE, "
 export const setExampleEditingRow = makeActionCreator(Consts.SET_EXAMPLE_EDITING_ROW, "payload");
 export const setExamples = makeActionCreator(Consts.SET_EXAMPLES, "payload");
 export const updateCandidateUsageTable = makeActionCreator(Consts.UPDATE_CANDIDATE_USAGE, "payload");
+export const fetchMoreCandidateUsages = makeActionCreator(Consts.FETCH_MORE_CANDIDATE_USAGES, "payload");
 
 export const setModalOpen = makeActionCreator(Consts.MODAL_OPEN);
 export const setModalClosed = makeActionCreator(Consts.MODAL_CLOSE);
@@ -97,4 +99,17 @@ const handleCandidates = (dispatch, serverPromise) => {
             return value;
         })
         .then(value => dispatch(addCandidate(value)));
+}
+
+export const getMoreExamples = ({candidateId, code, usages}) => (dispatch, getState) => {
+    const {spec} = getState();
+    dispatch(fetchMoreCandidateUsages({candidateId, status: LOADING}));
+    return hooglePlusMoreExamples({code, usages, queryType: spec.searchType})
+        .then(({examples}) => {
+            return dispatch(fetchMoreCandidateUsages({
+                candidateId,
+                status: DONE,
+                result: examples
+            }));
+        });
 }

new_webapp/src/components/CandidateList.js

@@ -1,9 +1,10 @@
 import React from "react";
+import { Button, Card } from "react-bootstrap";
+import Collapsible from "react-collapsible";
 import { connect } from "react-redux";
-import UsageTable from "./UsageTable";
 import { BounceLoader } from "react-spinners";
-import Collapsible from "react-collapsible";
-import { Card } from "react-bootstrap";
+import UsageTable from "./UsageTable";
+import { getMoreExamples } from "../actions";
 
 const mapStateToProps = state => {
     return {
@@ -13,42 +14,61 @@ const mapStateToProps = state => {
     };
 }
 
-const CandidateListBase = ({candidates, numArgs, isFetching}) => (
-    <div>
-        {candidates.map(({code, examples, candidateId}, idx) => {
-            const header = (
-                <Card.Header>
-                    {idx + 1}:
-                    <span>Candidate: <code>{code}</code></span>
-                </Card.Header>
-            );
-            return (
-                <Card key={idx}>
-                    <Collapsible
-                        open={true}
-                        trigger={header}>
-                            <Card.Body>
-                                <UsageTable
-                                    candidateId={candidateId}
-                                    code={code}
-                                    rows={examples}
-                                    numColumns={numArgs + 1}
-                                />
-                            </Card.Body>
-                    </Collapsible>
-                </Card>
-            );
-            })
-        }
-        {/* https://www.npmjs.com/package/react-spinners */}
-        <div className="container">
-            <div className="row justify-content-center">
-                <BounceLoader loading={isFetching}/>
+const mapDispatchToProps = dispatch => {
+    return {
+        getMoreExamples: ({candidateId, code, usages}) => dispatch(getMoreExamples({candidateId, code, usages})),
+    }
+};
+
+const ConnectedCandidateList = (props) => {
+    const {candidates, numArgs, isFetching, getMoreExamples} = props;
+    return (
+        <div>
+            {candidates.map((result, idx) => {
+                const {code, examples, examplesLoading, candidateId} = result;
+                const header = (
+                    <Card.Header>
+                        {idx + 1}:
+                        <span>Candidate: <code>{code}</code></span>
+                    </Card.Header>
+                );
+                const usages = examples.map(ex => ex.usage);
+                const handleClick = () => getMoreExamples({candidateId, code, usages});
+                return (
+                    <Card key={idx}>
+                        <Collapsible
+                            open={true}
+                            trigger={header}>
+                                <Card.Body>
+                                    <UsageTable
+                                        candidateId={candidateId}
+                                        code={code}
+                                        rows={examples}
+                                        numColumns={numArgs + 1}
+                                    />
+                                    <Button
+                                        variant="outline-primary"
+                                        size="sm"
+                                        disabled={examplesLoading}
+                                        onClick={examplesLoading ? null : handleClick}>
+                                        {examplesLoading ? "Loading..." : "More examples"}
+                                    </Button>
+                                </Card.Body>
+                        </Collapsible>
+                    </Card>
+                );
+                })
+            }
+            {/* https://www.npmjs.com/package/react-spinners */}
+            <div className="container">
+                <div className="row justify-content-center">
+                    <BounceLoader loading={isFetching}/>
+                </div>
             </div>
         </div>
-    </div>
-);
+    )
+};
 
-const CandidateList = connect(mapStateToProps)(CandidateListBase);
+const CandidateList = connect(mapStateToProps, mapDispatchToProps)(ConnectedCandidateList);
 
 export default CandidateList;

new_webapp/src/constants/action-types.js

@@ -1,9 +1,10 @@
 export const ADD_CANDIDATE = "ADD_CANDIDATE";
 export const UPDATE_CANDIDATE_USAGE = "UPDATE_CANDIDATE_USAGE";
+export const FETCH_MORE_CANDIDATE_USAGES = "FETCH_MORE_CANDIDATE_USAGES";
+
 export const ADD_FACT = "ADD_FACT";
 export const SET_EXAMPLES = "SET_EXAMPLES";
 export const SET_EXAMPLE_EDITING_ROW = "SET_EDITING_CELLS";
-
 export const SET_SEARCH_TYPE = "SET_SEARCH_TYPE";
 export const SET_NEW_SEARCH = "SET_NEW_SEARCH";
 

new_webapp/src/constants/fetch-states.js

@@ -0,0 +1,3 @@
+export const LOADING = "Loading";
+export const DONE = "Done";
+export const ERROR = "Error";

new_webapp/src/gateways/index.js

@@ -61,4 +61,13 @@ export const ghciUsage = ({code, args}) => {
             } else {
                 return mockError;
             }});
-};
+};
+
+export const hooglePlusMoreExamples = ({code, usages, queryType}) => {
+    const mockExamples = [
+        ["z", "3", "zzz"],
+        ["z", "0", ""]
+    ];
+    return delay(1000)
+        .then(_ => {return {examples: mockExamples}});
+}

new_webapp/src/reducers/candidateReducer.js

@@ -1,11 +1,14 @@
 import * as Consts from "../constants/action-types";
+import { LOADING, DONE } from "../constants/fetch-states";
+import {v4 as uuidv4} from "uuid";
 
 export const initialCandidateState = {
     isFetching: false,
     results: [
         {
             candidateId: "cand1",
             code: "\\arg0 arg1-> replicate arg0 arg1",
+            examplesLoading: false,
             examples: [
                 {
                     id: "0",
@@ -22,6 +25,7 @@ export const initialCandidateState = {
         {
             candidateId: "cand2",
             code: "\\arg0 arg1-> replicate2 arg0 arg1",
+            examplesLoading: false,
             examples: [
                 {
                     id: "0",
@@ -33,6 +37,14 @@ export const initialCandidateState = {
     ]
 };
 
+const usageToExample = (usage) => {
+    return {
+        id: uuidv4(),
+        usage: usage,
+        isLoading: false,
+    };
+}
+
 export function candidateReducer(state = initialCandidateState, action){
     switch(action.type) {
         case Consts.ADD_CANDIDATE:
@@ -45,22 +57,56 @@ export function candidateReducer(state = initialCandidateState, action){
                 results: [],
                 isFetching: true,
             }
+        case Consts.FETCH_MORE_CANDIDATE_USAGES:
+            const {candidateId:fCandidateId, status} = action.payload;
+            switch (status) {
+                case LOADING:
+                    const newLoadingResults = state.results.map((result) => {
+                        if (result.candidateId === fCandidateId) {
+                            return {
+                                ...result,
+                                examplesLoading: true,
+                            };
+                        }
+                        return result;
+                    });
+                    return {...state, results: newLoadingResults};
+                case DONE:
+                    const newExampleResults = state.results.map((result) => {
+                        if (result.candidateId === fCandidateId) {
+                            const newUsages = action.payload.result;
+                            const newExamples = newUsages.map(usageToExample);
+                            return {
+                                ...result,
+                                examplesLoading: false,
+                                examples: result.examples.concat(newExamples)
+                            };
+                        }
+                        return result;
+                    });
+                    return {...state, results: newExampleResults};
+            }
+            return {
+                ...state,
+            };
         case Consts.UPDATE_CANDIDATE_USAGE:
-            const {candidateId, usageId} = action.payload;
+            const {candidateId:uCandidateId, usageId} = action.payload;
             const updatedResults = state.results.map(result => {
-                if(result.candidateId === candidateId) {
+                if(result.candidateId === uCandidateId) {
                     const updatedExamples = result.examples.map(example => {
                         if (example.id === usageId) {
                             if (action.payload.args) {
-                                return {id: example.id,
+                                return {
+                                    id: example.id,
                                     usage: action.payload.args.concat(null),
                                     isLoading: true,
                                 };
                             }
                             if (action.payload.result) {
                                 let updatedUsage = Array.from(example.usage);
                                 updatedUsage[updatedUsage.length - 1] = action.payload.result;
-                                return {id: example.id,
+                                return {
+                                    id: example.id,
                                     usage: updatedUsage,
                                     isLoading: false,
                                 };

new_webapp/src/reducers/specReducer.js

@@ -9,6 +9,7 @@ export const initialSpecState = {
         usage: ["x", "2", "xx"]
     }],
     numArgs: 2,
+    searchType: null,
     searchTypeOptions: [
         "foo",
         "bar"