Experimental full-stack React framework API

route.jsx

import db from "./db"

export async function get({ queryParams }) {
  try {
    const user = await db.getUser(queryParams.userName);
    if (user) {
      return {
        status: 200,
        body: {
          user,
        },
      };
    } else {
      return {
        status: 404,
      };
    }
  } catch (error) {
    return {
      status: 500,
      body: {
        error,
      },
    };
  }
}

export async function post({ postBody }) {
  if (postBody) {
    try {
      const user = await db.createUser(postBody);
      return {
        status: 201,
        body: {
          user,
        },
      };
    } catch (error) {
      return {
        status: 500,
        body: {
          error,
        },
      };
    }
  } else {
    return {
      status: 401,
    };
  }
}

// makes sense only for reusable components, not routes
// const styles = {
//   default: {
//     color: "var(--color-default)",
//   },
//   danger: {
//     color: "var(--color-danger)",
//   },
// };

export default function User({ user }) {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.bio}</p>
      <form method="post">
        <input type="text" defaultValue={user.name} />
        <input type="textarea" defaultValue={user.bio} />
        <button type="submit">Save</button>
      </form>
    </div>
  );
}