Skip to content

Commit 30705c5

Browse files
danieljtrowbridgedanieljtrowbridge
authored
Merge pull request #6 from lambda-feedback-segp-sandbox/allow-arbitrary-response-types
Allow arbitrary response types
2 parents 99a91f9 + 5a3b43d commit 30705c5

File tree

13 files changed

+331
-226
lines changed

13 files changed

+331
-226
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@lambda-feedback-segp-sandbox/sandbox-addon",
3-
"version": "0.5.4",
3+
"version": "0.6.0",
44
"description": "lambda feedback sandbox addon",
55
"keywords": [
66
"storybook-addons",

‎src/components/AnswerButton.tsx

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,13 @@ export const AnswerButton = memo(function MyAddonSelector() {
1111
const isActive = !!globals[KEY];
1212

1313
function saveAnswer() {
14-
localStorage.setItem('answer', localStorage.getItem('response'));
15-
window.dispatchEvent(new Event('storage'));
14+
localStorage.setItem("answer", localStorage.getItem("response"));
15+
window.dispatchEvent(new Event("storage"));
1616
}
1717

1818
return (
19-
<IconButton
20-
key={TOOL_ID}
21-
title="Save Answer"
22-
onClick={saveAnswer}
23-
>
19+
<IconButton key={TOOL_ID} title="Save Answer" onClick={saveAnswer}>
2420
<LightningIcon />
2521
</IconButton>
2622
);
27-
});
23+
});

‎src/components/Evaluate.tsx

Lines changed: 105 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,113 @@
1-
import React, { useState } from 'react';
2-
import {Form} from './Form';
1+
import React, { useState } from "react";
2+
import { Form } from "./Form";
33
import axios from "axios";
4-
import { color, typography, StorybookTheme } from 'storybook/internal/theming';
4+
import { color, typography } from "storybook/internal/theming";
5+
6+
function parseStoredString(responseString: string): string | any[] | object {
7+
if (!responseString) {
8+
return "";
9+
}
10+
const firstChar = Array.from(responseString)[0];
11+
switch (firstChar) {
12+
case "[":
13+
return eval(responseString);
14+
case "{":
15+
return JSON.parse(responseString);
16+
case "\\":
17+
return responseString.substring(1);
18+
default:
19+
return responseString;
20+
}
21+
}
522

623
export function Evaluate() {
7-
const [response, updateResponse] = useState<string>('');
8-
async function evaluate(url: string, params: JSON) {
9-
console.log("remote eval");
10-
console.log(url);
11-
console.log(params);
12-
const answer = localStorage.getItem('answer');
13-
14-
const response = localStorage.getItem('response');
15-
console.log(response);
24+
const [response, updateResponse] = useState<string>("");
25+
async function evaluate(url: string, params: JSON) {
26+
console.log("remote eval");
27+
console.log(url);
28+
console.log(params);
29+
30+
const answer = parseStoredString(localStorage.getItem("answer"));
31+
32+
const response = parseStoredString(localStorage.getItem("response"));
33+
console.log(response);
1634

17-
const request = {"url": url, "response": response, "answer": answer, "params": params};
18-
19-
const res = await axios.post("http://localhost:3070", request);
20-
console.log(res);
21-
updateResponse(JSON.stringify(res.data));
22-
// {homes.map(home => <div>{home.name}</div>)}
23-
}
24-
return (
25-
<div style={evaluateStyles.mainDiv}>
26-
<div style={{width: '100%', display: 'table'}}>
27-
<div style={{display: 'table-row'}}>
28-
<div style={evaluateStyles.halfDiv}>
29-
<Form evalFunc={evaluate}></Form>
30-
</div>
31-
<div style={evaluateStyles.halfDiv}>
32-
<table>
33-
<tr>
34-
<td style={evaluateStyles.labelColumn}><label>Response JSON:</label></td>
35-
<td style={evaluateStyles.inputColumn}><p style={evaluateStyles.responseInput}>{response.length ? response : "..."}</p></td>
36-
</tr>
37-
</table>
38-
</div>
39-
</div>
40-
</div>
35+
const request = {
36+
url: url,
37+
response: response,
38+
answer: answer,
39+
params: params,
40+
};
41+
42+
const res = await axios.post("http://localhost:3070", request);
43+
console.log(res);
44+
updateResponse(JSON.stringify(res.data));
45+
// {homes.map(home => <div>{home.name}</div>)}
46+
}
47+
return (
48+
<div style={evaluateStyles.mainDiv}>
49+
<div style={{ width: "100%", display: "table" }}>
50+
<div style={{ display: "table-row" }}>
51+
<div style={evaluateStyles.halfDiv}>
52+
<Form evalFunc={evaluate}></Form>
53+
</div>
54+
<div style={evaluateStyles.halfDiv}>
55+
<table>
56+
<tr>
57+
<td style={evaluateStyles.labelColumn}>
58+
<label>Response JSON:</label>
59+
</td>
60+
<td style={evaluateStyles.inputColumn}>
61+
<p style={evaluateStyles.responseInput}>
62+
{response.length ? response : "..."}
63+
</p>
64+
</td>
65+
</tr>
66+
</table>
67+
</div>
4168
</div>
42-
);
43-
};
69+
</div>
70+
</div>
71+
);
72+
}
4473

4574
const evaluateStyles = {
46-
mainDiv: {
47-
padding: '20px',
48-
fontFamily: typography.fonts.base
49-
},
50-
headDiv: {
51-
padding: '10px'
52-
},
53-
halfDiv: {
54-
width: '50%',
55-
height: '100%',
56-
display: 'table-cell',
57-
padding: '20px',
58-
verticalAlign: 'top'
59-
},
60-
responseInput: {
61-
borderWidth: '3px',
62-
borderStyle: 'solid',
63-
borderColor: color.dark,
64-
backgroundColor: color.darkest,
65-
padding: '5px',
66-
margin: '0px 10px 5px 15px',
67-
color: 'white',
68-
fontFamily: typography.fonts.mono,
69-
verticalAlign: 'top',
70-
},
71-
labelColumn: {
72-
fontFamily: 'inherit',
73-
fontWeight: typography.weight.bold,
74-
whiteSpace: 'nowrap',
75-
verticalAlign: 'top',
76-
padding: '5px 0px',
77-
height: '100%'
78-
},
79-
inputColumn: {
80-
fontFamily: typography.fonts.mono,
81-
fontWeight: typography.weight.regular,
82-
width: '100%'
83-
},
75+
mainDiv: {
76+
padding: "20px",
77+
fontFamily: typography.fonts.base,
78+
},
79+
headDiv: {
80+
padding: "10px",
81+
},
82+
halfDiv: {
83+
width: "50%",
84+
height: "100%",
85+
display: "table-cell",
86+
padding: "20px",
87+
verticalAlign: "top",
88+
},
89+
responseInput: {
90+
borderWidth: "3px",
91+
borderStyle: "solid",
92+
borderColor: color.dark,
93+
backgroundColor: color.darkest,
94+
padding: "5px",
95+
margin: "0px 10px 5px 15px",
96+
color: "white",
97+
fontFamily: typography.fonts.mono,
98+
verticalAlign: "top",
99+
},
100+
labelColumn: {
101+
fontFamily: "inherit",
102+
fontWeight: typography.weight.bold,
103+
whiteSpace: "nowrap",
104+
verticalAlign: "top",
105+
padding: "5px 0px",
106+
height: "100%",
107+
},
108+
inputColumn: {
109+
fontFamily: typography.fonts.mono,
110+
fontWeight: typography.weight.regular,
111+
width: "100%",
112+
},
84113
};

0 commit comments

Comments
 (0)