Merge pull request #6 from gigantz/ojr/res-component

[Updates] Res sub-components

Author: gigantz

.babelrc

@@ -1,6 +1,4 @@
 {
-  "presets": [
-    "@babel/preset-env"
-  ],
+  "presets": ["@babel/preset-env"],
   "plugins": ["@babel/plugin-transform-react-jsx"]
-}
+}

.eslintrc

@@ -0,0 +1,16 @@
+{
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": ["error"],
+    "react/prop-types": "warn",
+    "react/jsx-filename-extension": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "react/jsx-props-no-spreading": 0,
+    "react/require-default-props": 0,
+    "react/forbid-prop-types": 0,
+    "jsx-a11y/alt-text": 0,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": 0
+  }
+}

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "printWidth": 100,
+  "singleQuote": true
+}

README.md

@@ -18,8 +18,8 @@ It works with express.js framework to run Node.js server. Custom renderer we hav
 ### Code Example
 
 ```js
-import React from "react";
-import { ReactXpress, App, Static, Router, Get, Post } from "../lib";
+import React from 'react';
+import { ReactXpress, App, Static, Router, Get, Post } from '../lib';
 
 const HomePage = () => <h1>Welcome to home page</h1>;
 const AboutPage = () => <h1>About Company</h1>;
@@ -35,7 +35,7 @@ const ExpressApp = () => (
       <Get path="/about" content={<AboutPage />} />
     </Router>
     <Router path="/api">
-      <Post path="/status" content={{ msg: "It is okay, bro" }} />
+      <Post path="/status" content={{ msg: 'It is okay, bro' }} />
     </Router>
   </App>
 );

examples/advanced/components.js

@@ -1,7 +1,7 @@
-import React from "react";
+import React from 'react';
 
 export const PostItem = ({ userId, id, title, body }) => (
-  <div style={{ width: 500, margin: "0 auto" }}>
+  <div style={{ width: 500, margin: '0 auto' }}>
     <p>
       UserID: {userId} / PostID: {id}
     </p>

examples/advanced/handlers.js

@@ -1,25 +1,23 @@
-import React from "react";
-import axios from "axios";
+import React from 'react';
+import axios from 'axios';
 
-import { PostItem } from "./components";
+import { PostItem } from './components';
 
 export const postHandler = async (req, res, _, renderPage) => {
   const { id } = req.params;
   try {
-    const { data } = await axios(
-      `https://jsonplaceholder.typicode.com/posts/${id}`
-    );
+    const { data } = await axios(`https://jsonplaceholder.typicode.com/posts/${id}`);
     renderPage(() => <PostItem {...data} />);
   } catch (error) {
-    res.status(500).end("Error");
+    res.status(500).end('Error');
   }
 };
 
 export const postsHandler = async (req, res, _, renderPage) => {
   try {
-    const { data } = await axios("https://jsonplaceholder.typicode.com/posts");
+    const { data } = await axios('https://jsonplaceholder.typicode.com/posts');
     renderPage(() => data.map((post) => <PostItem key={post.id} {...post} />));
   } catch (error) {
-    res.status(500).end("Error");
+    res.status(500).end('Error');
   }
 };

examples/advanced/index.js

@@ -1,14 +1,14 @@
-import React from "react";
-import { ReactXpress, App, Static, Router, Get } from "../../lib";
-import { postHandler, postsHandler } from "./handlers";
+import React from 'react';
+import { ReactXpress, App, Static, Router, Get } from '../../lib';
+import { postHandler, postsHandler } from './handlers';
 
 const ExpressApp = () => (
   <App port={8080}>
     <Static publicPath="/public" />
     <Router path="/">
       <Get path="/posts" handler={postsHandler} />
       <Get path="/posts/:id" handler={postHandler} />
-      <Get path="*" content="Not Found" status={404} />
+      <Get path="*" text="Not Found" status={404} />
     </Router>
   </App>
 );

examples/basic/index.js

@@ -1,18 +1,18 @@
-import React from "react";
-import { ReactXpress, App, Static, Router, Get } from "../../lib";
+import React from 'react';
+import { ReactXpress, App, Static, Router, Get } from '../../lib';
 
 const ExpressApp = () => (
   <App port={8080}>
     <Static publicPath="/public" />
     <Router path="/">
       <Get
-        content={() => (
+        render={() => (
           <div>
             <h1>Hello World</h1>
           </div>
         )}
       />
-      <Get path="*" content="Not Found" status={404} />
+      <Get path="*" text="Not Found" status={404} />
     </Router>
   </App>
 );

lib/components/App.js

@@ -1,5 +1,5 @@
-import React from "react";
-import PropTypes from "prop-types";
+import React from 'react';
+import PropTypes from 'prop-types';
 
 export const App = ({ children, port }) => <app port={port}>{children}</app>;
 

lib/components/Res.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Render = ({ component }) => <param type="render" content={component} />;
+
+Render.propTypes = {
+  component: PropTypes.func,
+};
+
+const Content = ({ json, contentType, text }) => {
+  const ComponentsArray = [];
+
+  if (contentType)
+    ComponentsArray.push(<param key="contentType" type="content-type" content={contentType} />);
+  if (json) ComponentsArray.push(<param key="json" type="json" content={json} />);
+  if (text) ComponentsArray.push(<param key="text" type="text" content={text} />);
+
+  return ComponentsArray;
+};
+
+Content.propTypes = {
+  json: PropTypes.any,
+  contentType: PropTypes.string,
+  text: PropTypes.string,
+};
+
+const Status = ({ statusCode }) => <param type="status" content={statusCode} />;
+
+Status.propTypes = {
+  statusCode: PropTypes.number,
+};
+
+const Redirect = ({ path, statusCode }) => <param type="redirect" content={{ path, statusCode }} />;
+
+Redirect.propTypes = {
+  path: PropTypes.string.isRequired,
+  statusCode: PropTypes.number,
+};
+
+const SendFile = ({ path, options, onError = () => {} }) => (
+  <param type="send-file" content={{ path, options, onError }} />
+);
+
+SendFile.propTypes = {
+  path: PropTypes.string.isRequired,
+  options: PropTypes.object,
+  onError: PropTypes.func,
+};
+
+export const Res = {
+  Render,
+  Content,
+  Status,
+  Redirect,
+  SendFile,
+};