Datx next example

examples/nextjs/.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_JSONAPI_URL="http://localhost:3000/api/jsonapi/"

examples/nextjs/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_JSONAPI_URL="http://localhost:3000/api/jsonapi/"

examples/nextjs/.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["@infinumjs/eslint-config-react-ts", "plugin:@next/next/recommended"]
+}

examples/nextjs/.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+.next
+
+# typescript
+*.tsbuildinfo
+
+!/typings

examples/nextjs/.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Next.js: debug server-side",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev"
+    },
+    {
+      "name": "Next.js: debug client-side",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "url": "http://localhost:3000"
+    },
+    {
+      "name": "Next.js: debug full stack",
+      "type": "node-terminal",
+      "request": "launch",
+      "command": "npm run dev",
+      "console": "integratedTerminal",
+      "serverReadyAction": {
+        "pattern": "started server on .+, url: (https?://.+)",
+        "uriFormat": "%s",
+        "action": "debugWithChrome"
+      }
+    }
+  ]
+}

examples/nextjs/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/nextjs/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/nextjs/next.config.js

@@ -0,0 +1,18 @@
+const withPlugins = require('next-compose-plugins');
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+
+/** @type {import('next').NextConfig} */
+const config = {
+  reactStrictMode: true,
+  productionBrowserSourceMaps: true,
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
+
+module.exports = withPlugins([[withBundleAnalyzer], config]);

examples/nextjs/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "nextjs",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "NODE_OPTIONS='--inspect' next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "analyze": "ANALYZE=true yarn build",
+    "analyze:sourcemap": "source-map-explorer .next/static/**/*.js"
+  },
+  "dependencies": {
+    "@datx/core": "^2.5.0-beta.0",
+    "@datx/jsonapi": "^2.5.0-beta.1",
+    "@datx/swr": "^2.5.0-beta.3",
+    "@next/bundle-analyzer": "^12.2.2",
+    "mobx": "^6.6.0",
+    "next": "^13.2.4",
+    "next-api-router": "^1.0.4",
+    "next-compose-plugins": "2.2.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swr": "^2.1.0",
+    "uuid": "^8.3.2"
+  },
+  "devDependencies": {
+    "@infinumjs/eslint-config-react-ts": "^2.9.0",
+    "@next/eslint-plugin-next": "12.1.5",
+    "@types/node": "^17.0.41",
+    "@types/react": "^18.0.12",
+    "@types/uuid": "^8.3.4",
+    "eslint": "^8.17.0",
+    "eslint-config-next": "12.0.4",
+    "source-map-explorer": "2.5.2",
+    "typescript": "~4.7.3"
+  }
+}

examples/nextjs/src/api/db.ts

@@ -0,0 +1,4 @@
+export const db = new Map();
+
+db.set('todos', [{ id: '1', message: 'test 1' }, { id: '2', message: 'test 2' }]);
+db.set('posts', [{ id: '1', title: 'Title 1', body: 'Body 1' }, { id: '2', title: 'Title 2', body: 'Body 2' }]);

examples/nextjs/src/api/handler.ts

@@ -0,0 +1,55 @@
+import { IModelConstructor, PureModel } from '@datx/core';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { v4 } from 'uuid';
+
+import { db } from './db';
+import { serializeMany, serializeOne, Record, serializeErrors } from './serializer';
+
+const findModel = (type: string) => (model: IModelConstructor<PureModel>) => model.type === type;
+const findRecord = (id: string) => (record: Record) => record.id === id;
+
+interface IHandlerSettings {
+  types: Array<IModelConstructor<PureModel>>;
+}
+
+export const createHandler =
+  ({ types }: IHandlerSettings) =>
+  (req: NextApiRequest, res: NextApiResponse) => {
+    const {
+      query: { slug },
+    } = req;
+
+    const [type, id] = slug as Array<string>;
+
+    const Model = types.find(findModel(type));
+
+    if (Model) {
+      let records = db.get(type);
+
+      if (id) {
+        const record = records.find((item: Record) => item.id === id);
+
+        res.status(200).json(serializeOne(record, type));
+        return;
+      }
+
+      if (req.method === 'POST') {
+        const id = v4();
+        const {
+          data: { attributes },
+        } = JSON.parse(req.body);
+        const record = db
+          .set(type, [...records, { id, ...(attributes || {}) }])
+          .get(type)
+          .find(findRecord(id));
+
+        res.status(201).json(serializeOne(record, type));
+        return;
+      }
+
+      res.status(200).json(serializeMany(records, type));
+      return;
+    }
+
+    res.status(404).json(serializeErrors([{ status: 404, title: 'Not Found ' }]));
+  };

examples/nextjs/src/api/serializer.ts

@@ -0,0 +1,47 @@
+export interface Record {
+  id: string;
+}
+
+export function serializeRecord<T extends Record = Record>(data: T, type: string) {
+  if (!data) {
+      return undefined;
+  }
+
+  const { id, ...attributes } = data;
+
+  return {
+    id,
+    type,
+    attributes
+  }
+}
+
+export function serializeOne<T extends Record = Record>(data: T, type: string) {
+  return {
+    data: serializeRecord(data, type) || null,
+  }
+}
+
+export function serializeMany<T extends Record = Record>(data: Array<T>, type: string) {
+  return {
+    data: data?.map((record) => serializeRecord(record, type)) || null
+  }
+}
+
+interface IJsonApiError {
+  status: number;
+  title: string;
+}
+
+export function serializeError({ status, title }: IJsonApiError) {
+  return {
+    status,
+    title
+  }
+}
+
+export function serializeErrors(errors: Array<IJsonApiError>) {
+  return {
+    errors
+  };
+}

examples/nextjs/src/components/features/posts/Posts.queries.ts

@@ -0,0 +1,7 @@
+import { IGetManyExpression } from '@datx/swr';
+import { Post } from 'src/models/Post';
+
+export const postsQuery: IGetManyExpression<typeof Post> = {
+  op: 'getMany',
+  type: Post.type,
+};

examples/nextjs/src/components/features/posts/Posts.tsx

@@ -0,0 +1,34 @@
+import { useDatx } from '@datx/swr';
+import { FC, useState } from 'react';
+
+import { ErrorFallback } from '../../shared/errors/ErrorFallback/ErrorFallback';
+import { postsQuery } from './Posts.queries';
+
+export const Posts: FC = () => {
+  const [pageIndex, setPageIndex] = useState(0);
+
+  const { data, error } = useDatx(postsQuery);
+
+  if (error) {
+    return <ErrorFallback error={error} />;
+  }
+
+  if (!data) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      {data.data?.map((post) => (
+        // <NextLink href={`${base}/todos/${post.id}`} key={post.id}>
+        <a style={{ display: 'block' }} key={post.id}>
+          {post.body}
+        </a>
+        // </NextLink>
+      ))}
+
+      <button onClick={() => setPageIndex(pageIndex - 1)}>Previous</button>
+      <button onClick={() => setPageIndex(pageIndex + 1)}>Next</button>
+    </div>
+  );
+};

examples/nextjs/src/components/features/todo/Todo.queries.ts

@@ -0,0 +1,11 @@
+import { IGetOneExpression } from '@datx/swr';
+import { Todo } from '../../../models/Todo';
+
+export const getTodoQuery = (id?: string) =>
+  id
+    ? ({
+        id,
+        op: 'getOne',
+        type: 'todos',
+      } as IGetOneExpression<typeof Todo>)
+    : null;

examples/nextjs/src/components/features/todo/Todo.tsx

@@ -0,0 +1,24 @@
+import { useDatx } from '@datx/swr';
+import { FC } from 'react';
+
+import { ErrorFallback } from '../../shared/errors/ErrorFallback/ErrorFallback';
+
+import { getTodoQuery } from './Todo.queries';
+
+export interface ITodoProps {
+  id?: string;
+}
+
+export const Todo: FC<ITodoProps> = ({ id }) => {
+  const { data, error } = useDatx(getTodoQuery(id));
+
+  if (error) {
+    return <ErrorFallback error={error} />;
+  }
+
+  if (!data) {
+    return <div>Loading todo...</div>;
+  }
+
+  return <div>{data?.data?.message}</div>;
+};

examples/nextjs/src/components/features/todos/Todos.mutations.ts

@@ -0,0 +1,12 @@
+import { getModelEndpointUrl, modelToJsonApi } from '@datx/jsonapi';
+import { IClientInstance } from '@datx/swr';
+
+import { Todo } from '../../../models/Todo';
+
+export const createTodo = (client: IClientInstance, message: string | undefined) => {
+  const model = new Todo({ message });
+  const url = getModelEndpointUrl(model);
+  const data = modelToJsonApi(model);
+
+  return client.requestSingle<Todo>(url, 'POST', { data });
+};

examples/nextjs/src/components/features/todos/Todos.queries.ts

@@ -0,0 +1,8 @@
+import { IGetManyExpression } from '@datx/swr';
+
+import { Todo } from '../../../models/Todo';
+
+export const todosQuery: IGetManyExpression<typeof Todo> = {
+  op: 'getMany',
+  type: 'todos',
+};