/**
* Rewrites text
* @param {String} text The text to rewrite.
* @returns {Promise.<String[]>} Resolves into a list of about 10 rewritten versions. (Or rejects with an error)
* @example
* var rewritten = await rewrite("Sometimes I just want to code in JavaScript all day.");
* // ⇒ [
* // "I sometimes just want to code JavaScript all day.",
* // "JavaScript is my favorite programming language sometimes.",
* // "I sometimes wish I could code in JavaScript all day.",
* // "JavaScript is sometimes all I want to do all day.",
* // "I like JavaScript sometimes and want to code all day long.",
* // "Some days I just want to work all day in JavaScript.",
* // "It's not uncommon for me to just want to code in JavaScript all day.",
* // "My favorite thing to do sometimes is just code JavaScript all day.",
* // "My favourite coding language is JavaScript, which I can code all day.",
*// "JavaScript is my preferred language sometimes, since it lets me code all day.",
*// ];
*/
function rewrite(text) {
return new Promise(async (resolve, reject) => {
var { suggestions, error_code, error_msg, error_msg_extra } = await fetch(
"https://api.wordtune.com/rewrite-limited",
{
headers: {
accept: "*/*",
"accept-language": "en-US,en;q=0.9",
"content-type": "application/json",
"x-wordtune-origin": "https://www.wordtune.com",
},
referrer: "https://www.wordtune.com/",
body: JSON.stringify({
action: "REWRITE",
text: text,
start: 0,
end: text.length,
selection: {
wholeText: text,
start: 0,
end: text.length,
},
}),
method: "POST",
}
).then((res) => res.json());
if (error_code || error_msg || error_msg_extra) {
reject({
code: error_code,
message: error_msg,
message_extra: error_msg_extra,
});
} else {
resolve(suggestions);
}
});
}
import React from "react"
import Navbar from "./components/Navbar"
import Hero from "./components/Hero"
import Card from "./components/Card"
import data from "./data"
/*
Challenge:
- import the array of data from data.js
- map over the array to create <Card /> components
- display the array of card components under the navbar
(in place of the current <Card /> component)
Note: We haven't styled the group of components yet, so they'll
still be block elements, stacked vertically. We'll add styling later.
*/
export default function App() {
// <Hero />
const cards = data.map(item => {
return (
<Card
img={item.coverImg}
rating={item.stats.rating}
reviewCount={item.stats.reviewCount}
location={item.location}
title={item.title}
price={item.price}
/>
)
})
return (
<div>
<Navbar />
{cards}
</div>
)
}
Comments