casraf/redar-browser
1
0
Fork 0
mirror of https://github.com/chenasraf/redar-browser.git synced 2026-05-17 17:58:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Version bump, style improvements, icon fixes

Browse Source
This commit is contained in:
Chen Asraf
2018-01-06 13:58:51 +02:00
parent d159bafb13
commit 3ce350d12d
16 changed files with 126 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -1,9 +1,9 @@
# JSON Redar
# Redar Browser
JSON Redar is a Chrome extension designed to make your JSON requests a lot simpler and easier to handle.
Redar Browser is a Chrome extension designed to make your JSON requests a lot simpler and easier to handle.
If you ever got stuck looking at giant JSON arrays of objects trying to figure out relations between them, boy do we have the solution for you!
JSON Redar lets you view your results as data tables which are sortable and filterable, letting you speedily read through the data to get what you want.
Redar Browser lets you view your results as data tables which are sortable and filterable, letting you speedily read through the data to get what you want.
## How do I install?

18
config/templateReplacer.js
View File

@@ -1,21 +1,15 @@
const packageContents = require('../package.json');
const path = require('path')
function TemplateReplacer(content) {
function TemplateReplacer(content, localsPath) {
const locals = require(localsPath)
const exp = /\<%=\s*([a-z\.]+)\s*\%>/ig
content = content.toString()
content = content.replace(exp, (match, $1) => {
const path = $1.split('.')
switch (path[0]) {
case 'package':
return path.slice(1).reduce((accu, cur, _i, _arr) => {
console.log('returning', cur, 'for', content)
return accu[cur]
}, packageContents)
break;
default:
throw new Error(`Can't find mapping for \`${$1}\``)
}
return path.slice(1).reduce((accu, cur, _i, _arr) => {
return accu[cur]
}, locals)
})
return content.toString()

4
config/webpack.config.dev.js
View File

@@ -271,8 +271,8 @@ module.exports = {
from: './public/manifest.json',
to: './manifest.json',
transform: (content, _path) => {
console.log(content)
return TemplateReplacer(content)
const packagePath = path.join(__dirname, '..', 'package.json')
return TemplateReplacer(content, packagePath)
}
},
]),

4
config/webpack.config.prod.js
View File

@@ -354,8 +354,8 @@ module.exports = {
from: './public/manifest.json',
to: './manifest.json',
transform: (content, _path) => {
console.log(content)
return TemplateReplacer(content)
const packagePath = path.join(__dirname, '..', 'package.json')
return TemplateReplacer(content, packagePath)
}
},
])

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "redar-extension",
"version": "0.1.0",
"version": "0.2.0",
"private": true,
"homepage": "https://redar.com/",
"dependencies": {

2
public/index.html
View File

@@ -26,7 +26,7 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>JSON Redar</title>
<title>Redar Browser</title>
</head>
<body>
<noscript>

4
public/manifest.json
View File

@@ -4,12 +4,12 @@
"short_name": "Redar",
"name": "Redar Browser",
"icons": {
"196": "favicon.ico"
"192": "android-chrome-192x192.png"
},
"background": {
"scripts": ["./static/js/background.js"]
},
"browser_action": {
"default_icon": "favicon.ico"
"default_icon": "android-chrome-192x192.png"
}
}

4
src/components/DataTable/DataTable.css
View File

@@ -2,13 +2,15 @@
width: 100%;
grid-area: main;
padding: 5px;
border-spacing: 2px;
border-collapse: separate;
& thead th {
background: #acf;
}
& tbody td, & thead th {
padding: 7px 12px;
padding: 12px;
}
}

28
src/components/Header/Header.css
View File

@@ -1,10 +1,11 @@
.header {
grid-area: browse;
padding: 10px;
padding: 14px;
align-content: center;
border-bottom: 1px solid #ccc;
background-image: linear-gradient(to bottom, white, #f3f3f3 88%, #eee);
display: grid;
grid-row-gap: 7px;
grid-row-gap: 14px;
}
.nav {
@@ -14,8 +15,17 @@
.request-data-container {
display: grid;
grid-template-columns: [type] 10% [payload] auto;
grid-column-gap: 7px;
grid-template-columns: [type] 10% [payload] 40% [headers] 50%;
grid-column-gap: 14px;
max-width: calc(100% - 28px);
& .title {
text-transform: uppercase;
color: #555;
margin-bottom: 5px;
font-weight: bold;
font-size: 0.8em;
}
}
.method {
@@ -34,11 +44,19 @@
.payload {
grid-area: payload;
}
.headers {
grid-area: headers;
}
.payload, .headers {
& textarea {
width: 100%;
height: 100%;
border: 1px solid #ccc;
overflow-x: hidden;
min-height: 50px;
font-family: "Lucida Grande", "Courier New", monospace, serif;
}
}

2
src/components/Header/Header.css.d.ts vendored
View File

@@ -1,7 +1,9 @@
export const header: string;
export const nav: string;
export const requestDataContainer: string;
export const title: string;
export const method: string;
export const address: string;
export const payload: string;
export const headers: string;
export const go: string;

1
src/components/Header/Header.module.d.ts vendored
View File

@@ -7,6 +7,7 @@ export interface IState {
method: string
requestPayload: string
requestType: string
headers: string
}
export type ReqTypeTransformer = (str: string) => string

28
src/components/Header/Header.tsx
View File

@@ -30,6 +30,7 @@ class Header extends React.Component<I.IProps, I.IState> {
method: localStorage.lastMethod || 'GET',
requestPayload: localStorage.lastRequestPayload || '',
requestType: props.store.get(StoreKeys.RequestType, 'JSON'),
headers: localStorage.lastHeaders || '',
}
}
@@ -60,10 +61,27 @@ class Header extends React.Component<I.IProps, I.IState> {
localStorage.lastRequestPayload = requestPayload
}
private changeHeaders(headers: string) {
this.setState({ headers })
localStorage.lastHeaders = headers
}
private get requestHeaders() {
const headers = this.state.headers.split(`\n`).reduce((accu, cur) => {
const [key, val] = cur.split(':').map(s => s.trim())
if (key.length) {
accu[key] = val
}
return accu
}, {})
return headers
}
private go() {
const { method, url: url } = this.state
axios.request({ method, url, data: this.requestPayload })
axios.request({ method, url, data: this.requestPayload, headers: this.requestHeaders })
.then((response: AxiosResponse) => {
const { data } = response
let viewKey = this.props.store.get(StoreKeys.ViewKey, null)
@@ -140,11 +158,19 @@ class Header extends React.Component<I.IProps, I.IState> {
<div className={css.requestDataContainer}>
<RequestTypeSelector {...this.props} />
<div className={css.payload}>
<h4 className={css.title}>Payload</h4>
<textarea name="requestPayload"
value={this.state.requestPayload}
placeholder="Request Payload"
onChange={(e) => this.changeRequestPayload(e.target.value)} />
</div>
<div className={css.headers}>
<h4 className={css.title}>Headers</h4>
<textarea name="headers"
value={this.state.headers}
placeholder="Headers"
onChange={(e) => this.changeHeaders(e.target.value)} />
</div>
</div>
</div>
)

2
src/components/KeyList/KeyList.css
View File

@@ -6,7 +6,7 @@
}
.item {
padding: 7px 10px;
padding: 10px;
cursor: pointer;
color: #888;

6
src/index.css
View File

@@ -1,8 +1,8 @@
@import "./reset.css";
html, body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Calibri", "Segoe UI", "Arial", sans-serif;
font-size: 13px;
font-size: 11pt;
}
* {

48
src/reset.css Normal file
View File

@@ -0,0 +1,48 @@
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

2
tsconfig.json
View File

@@ -31,7 +31,7 @@
"acceptance-tests",
"webpack",
"jest",
"scaffolds",
"scaffold",
"src/setupTests.ts"
]
}