Skip to content

Commit

Permalink
Merge pull request #425 from microlinkhq/next
Browse files Browse the repository at this point in the history 
Next
  • Loading branch information
@Kikobeats
Kikobeats authored Jul 1, 2019
2 parents 9f364ec + 8e07209 commit c1e64a0
Show file tree
Hide file tree
Showing 4 changed files with 56 additions and 48 deletions.
13 changes: 6 additions & 7 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,10 +37,9 @@
"gatsby"
],
"dependencies": {
"@microlink/demo-links": "~1.0.1",
"@microlink/demo-links": "~1.0.2",
"@microlink/mql": "~0.3.13",
"@microlink/react": "~4.0.1",
"@rebass/components": "~4.0.0-1",
"@tippy.js/react": "~2.2.2",
"autoprefixer": "~9.6.0",
"beauty-error": "~1.2.2",
Expand All @@ -53,16 +52,16 @@
"download": "~7.1.0",
"exists-file": "~3.0.2",
"fromentries": "~1.1.0",
"gatsby": "~2.10.5",
"gatsby": "~2.11.7",
"gatsby-plugin-canonical-urls": "~2.1.0",
"gatsby-plugin-catch-links": "~2.1.0",
"gatsby-plugin-google-analytics": "~2.1.0",
"gatsby-plugin-google-analytics": "~2.1.1",
"gatsby-plugin-meta-redirect": "~1.1.1",
"gatsby-plugin-netlify": "~2.1.0",
"gatsby-plugin-react-helmet": "~3.1.0",
"gatsby-plugin-remove-trailing-slashes": "~2.1.0",
"gatsby-plugin-sass": "~2.1.0",
"gatsby-plugin-sitemap": "~2.2.0",
"gatsby-plugin-sitemap": "~2.2.1",
"gatsby-plugin-styled-components": "~3.1.0",
"gatsby-redirect-from": "~0.2.1",
"gatsby-source-filesystem": "~2.1.1",
Expand All @@ -73,7 +72,7 @@
"git-jiggy": "~1.1.1",
"graphiql": "~0.13.2",
"graphiql-explorer": "~0.4.3",
"graphql": "~14.4.0",
"graphql": "~14.4.1",
"human-number": "~1.0.4",
"humanize-url": "~2.1.0",
"json-future": "~2.2.4",
Expand All @@ -98,7 +97,7 @@
"react-json-view": "~1.19.1",
"react-live": "~2.1.2",
"react-stripe-elements": "~3.0.0",
"react-syntax-highlighter": "~11.0.0",
"react-syntax-highlighter": "~11.0.1",
"react-timeago": "~4.4.0",
"rebass": "~3.1.1",
"remark-slug": "~5.1.2",
Expand Down
56 changes: 20 additions & 36 deletions src/components/elements/PricePicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,48 +2,36 @@ import React, { Component } from 'react'
import { Box, Select, Label } from 'components/elements'
import humanNumber from 'human-number'

const createReqsLabels = reqsPerDay => ({
reqsPerDay,
humanReqsPerDay: humanNumber(reqsPerDay),
monthlyPrice: calculateMonthlyPrice(reqsPerDay)
})

const calculateMonthlyPrice = reqsPerDay =>
(reqsPerDay / 1000) * BASE_PLAN_PRICE

export const BASE_PLAN_PRICE = 12

export const BASE_PLAN_REQS = 1000

export const DEFAULT_PLAN = {
planId: 'pro-1k-v2',
reqsPerDay: BASE_PLAN_REQS,
humanReqsPerDay: humanNumber(BASE_PLAN_REQS),
monthlyPrice: calculateMonthlyPrice(BASE_PLAN_REQS)
}
export const PLANS = [
{ planId: 'pro-1k-v2', ...createReqsLabels(1000) },
{ planId: 'pro-2k-v2', ...createReqsLabels(2000) },
{ planId: 'pro-3k-v2', ...createReqsLabels(3000) },
{ planId: 'pro-10k-v2', ...createReqsLabels(10000) },
{ planId: 'pro-50k-v2', ...createReqsLabels(50000) }
]

export const PLANS = [DEFAULT_PLAN]
.concat([
{ planId: 'pro-3k-v2', reqsPerDay: 3000 },
{ planId: 'pro-10k-v2', reqsPerDay: 10000 },
{ planId: 'pro-50k-v2', reqsPerDay: 50000 },
{ planId: 'pro-100k-v2', reqsPerDay: 100000 },
{ planId: 'pro-500k-v2', reqsPerDay: 500000 },
{ planId: 'pro-1m-v2', reqsPerDay: 1000000 }
])
.reduce(
(acc, { planId, reqsPerDay }) => ({
...acc,
[reqsPerDay]: {
planId,
humanReqsPerDay: humanNumber(reqsPerDay),
monthlyPrice: calculateMonthlyPrice(reqsPerDay)
}
}),
{}
)
export const DEFAULT_PLAN = PLANS[1]

export default class extends Component {
state = { ...DEFAULT_PLAN }

handleChange = event => {
event.preventDefault()
const { value: reqsPerDay } = event.target
const newState = { reqsPerDay, ...PLANS[reqsPerDay] }
const { value: humanReqsPerDay } = event.target
const newState = PLANS.find(
plan => plan.humanReqsPerDay === humanReqsPerDay
)
this.setState(newState)
this.props.onChange(newState)
}
Expand All @@ -54,15 +42,11 @@ export default class extends Component {
<Select
mx='auto'
width={['3.2rem', '3.8rem']}
value={this.state.reqs}
value={this.state.humanReqsPerDay}
onChange={this.handleChange}
>
{Object.keys(PLANS).map(plan => (
<option
key={plan}
value={plan}
children={PLANS[plan].humanReqsPerDay}
/>
<option key={plan}>{PLANS[plan].humanReqsPerDay}</option>
))}
</Select>
<Label ml={1} display='inline' children=' reqs' suffix='/day' />
Expand Down
16 changes: 11 additions & 5 deletions src/components/patterns/PricingTable/PricingTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,8 @@ const getPlanDescription = reqs => `${toLocale(reqs)} daily requests`
const TOOLTIPS = {
'Rate Limit':
'Maximum number of requests you can consume until reach the quota.',
Caching: 'Speed up response timing caching payload for same API calls.',
'Caching Layer':
'Speed up response timing caching payload for same API calls.',
'Media Detection':
'Ability to detect the original streaming source for video or audio',
'Color Detection':
Expand All @@ -40,7 +41,8 @@ const TOOLTIPS = {
'Technical assistance for resolving questions and help you integrate the service.',
'Contextual Information':
'Detection of extra information based on the type of data.',
Proxy: 'Setup a proxy between API requests and target URL destination.'
'Proxy Resolution':
'Setup a proxy between API requests and target URL destination.'
}

const Price = styled(Subhead)`
Expand Down Expand Up @@ -206,8 +208,8 @@ function PricingTable ({ apiKey, stripeKey, apiEndpoint }) {
]}
/>
<PricingRow children={['Tech Support', 'Community', 'Priority']} />
<PricingRow children={['Caching', 'Fixed', 'Customizable']} />
<PricingRow children={['Proxy', 'No', 'Yes']} />
<PricingRow children={['Caching Layer', 'Fixed', 'Customizable']} />
<PricingRow children={['Proxy Resolution', 'No', 'Yes']} />
<PricingRow
py={3}
children={[
Expand Down Expand Up @@ -245,7 +247,11 @@ function PricingTable ({ apiKey, stripeKey, apiEndpoint }) {
alignItems='center'
pt={[4, 4, 4, 5]}
>
<Subhead color='gray8' fontSize={2} children='Do you need more?' />
<Subhead
color='gray8'
fontSize={2}
children='Do you need custom plan?'
/>
<Text as='div' mt={1} fontSize={1} color='gray8'>
<LinkSolid
data-event-category='Checkout'
Expand Down
19 changes: 19 additions & 0 deletions src/pages/docs/api/api-parameters/proxy.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,3 +23,22 @@ module.exports = async () => {
/>

The proxy server provided needs follow the schema `host:port:username:password`.

You can esure proxy bypass is properly done checking `x-fetch-mode` header on response, whose value should be `fetch-proxy`.

<MultiCodeEditor languages={{
Shell: `curl -I -s -X GET https://api.microlink.io?url=https://www.instagram.com/p/BvDTdWdnzkj&apiKey=MyApiToken&proxy=superproxy.cool:22225:603f60f5:***** | grep -i "x-fetch-mode"`,
'Node.js': `const mql = require('@microlink/mql')
module.exports = async () => {
const { status, data, response } = await mql(
'https://www.instagram.com/p/BvDTdWdnzkj/', {
apiKey: 'MyApiToken',
proxy: 'superproxy.cool:22225:603f60f5:*****'
})
console.log(response.headers['x-fetch-mode']) // => fetch-proxy
}
`
}}
/>

0 comments on commit c1e64a0

Please sign in to comment.