initial commit

Author: keonik

.env

@@ -0,0 +1,7 @@
+# Environment variables declared in this file are automatically made available to Prisma.
+# See the documentation for more detail: https://pris.ly/d/prisma-schema#using-environment-variables
+
+# Prisma supports the native connection string format for PostgreSQL, MySQL and SQLite.
+# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
+
+DATABASE_URL="file:./dev.db"

.eslintignore

@@ -1,4 +1,6 @@
 .next/
 node_modules/
 charts/
-prisma/
+prisma/
+gen/
+next.config.js

.gitignore

@@ -5,9 +5,7 @@
 
 # misc
 .DS_Store
-.env
 .env.local
-.env
 .env.development.local
 .env.test.local
 .env.production.local

.prettierignore

@@ -4,4 +4,5 @@ charts/
 prisma/migrations/
 prisma/schema.prisma
 CHANGELOG.md
-coverage/
+coverage/
+gen/

README.md

@@ -1,10 +1,25 @@
-# Next.js TypeScript Material UI quality checking project
+# Next.js TypeScript Material UI quality checking project <!-- omit in toc -->
 
 Includes TypeScript, Material UI, ESLint, Jest, and React Testing Library
 
--   [Deploy your own](#deploy-your-own)
--   [How to use](#how-to-use)
+-   [App startup](#app-startup)
+    -   [SQLite](#sqlite)
+    -   [Postgres](#postgres)
+-   [Using Prisma](#using-prisma)
+    -   [Adding a table to your database](#adding-a-table-to-your-database)
+    -   [Creating migrations](#creating-migrations)
+    -   [Seeding sample data](#seeding-sample-data)
+    -   [Using prisma client to perform database actions](#using-prisma-client-to-perform-database-actions)
 -   [Scripts](#scripts)
+    -   [generate-types](#generate-types)
+    -   [watch-queries](#watch-queries)
+    -   [generate](#generate)
+    -   [migrate](#migrate)
+    -   [deploy](#deploy)
+    -   [reset](#reset)
+    -   [seed](#seed)
+    -   [studio](#studio)
+    -   [prisma](#prisma)
     -   [build](#build)
     -   [dev](#dev)
     -   [format](#format)
@@ -15,28 +30,152 @@ Includes TypeScript, Material UI, ESLint, Jest, and React Testing Library
     -   [quality](#quality)
 -   [Accessibility ](#accessibility)
 
-## Deploy your own
+## App startup
 
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+Choose how to start your development server based on your database configuration below.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest)
+### SQLite
 
-## How to use
+First time starting your app make sure to run `prisma` then start your app.
 
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+```
+npm run prisma && npm run dev
+```
+
+### Postgres
+
+Ensure you have a `.env` file with a `DATABASE_URL` variable following the [format required by prisma](https://www.prisma.io/docs/concepts/database-connectors/postgresql#connection-details) and using the credentials found in your `docker-compose.yml` file.
+
+```
+DATABASE_URL=postgresql://[POSTGRES_USER]:[POSTGRES_PASSWORD]@[POSTGRES_HOST]:[PORT]?schema=public
+```
+
+Start up your development server with the following command:
+
+```
+docker-compose up
+```
+
+Once your development server is up and running, in a new terminal run the following command:
+
+```
+ npm run prisma && npm run dev
+```
+
+`npm run prisma` will do a few things for us:
+
+-   Format your `prisma/schema.prisma` file (`prisma format`) | [prisma format documentation](https://www.prisma.io/docs/reference/api-reference/command-reference#format)
+-   Keeps your `prisma/schema.prisma` file in sync with your database by auto generating migrations when needed (`npm run migrate`) | [prisma migration documentation](https://www.prisma.io/docs/concepts/components/prisma-migrate)
+-   Seed your database with (`npm run seed`) | [prisma seeding documentation](https://www.prisma.io/docs/guides/database/seed-database/)
+
+## Using Prisma
+
+> Prisma helps app developers build faster and make fewer errors with an open source ORM for PostgreSQL, MySQL and SQLite. | [Source](https://www.prisma.io/)
+
+### Adding a table to your database
+
+Adding a table is as easy as adding a model to your `schema.prisma` file, followed by [creating a migration](#Creating-migrations). For a tutorial on this visit the [prisma schema documentation](https://www.prisma.io/docs/concepts/components/prisma-schema).
+
+### Creating migrations
+
+Once you've made the [appropriate changes to your `schema.prisma`](#Adding-a-table-to-your-database) file you can auto generate a migration using
 
 ```bash
-npx create-next-app --example https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest
-# or
-yarn create next-app --example https://github.com/MileTwo/nextjs-typescript-material-ui-eslint-jest
+npm run migrate
 ```
 
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+This will generate a new folder under `prisma/migrations` with a SQL file outlining the changes to be reflected to your database and also generate new TypeScript code for prisma client usage.
+
+To learn more visit the [prisma migration documentation](https://www.prisma.io/docs/concepts/components/prisma-migrate) or the [prisma generate documentation](https://www.prisma.io/docs/reference/api-reference/command-reference#generate).
+
+### Seeding sample data
+
+To seed your database, using [prisma client](#Using-prisma-client-to-perform-database-actions), add in sample data in the `prisma/seed.ts` file.
+
+To learn more visit the [prisma seeding documentation](https://www.prisma.io/docs/guides/database/seed-database/).
+
+### Using prisma client to perform database actions
+
+Using the prisma client you can do the various actions required to build applications utilizing a database.
+
+To learn more visit [working with the prisma client](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient).
 
 ## Scripts
 
 All scripts can be run by prefixing with `npm run`, for example `npm run build`
 
+### generate-types
+
+Using [graphql code generator](https://www.graphql-code-generator.com/) this generates types based on the `codegen.yml` configuration. In the initial setup this will update files under the `gen/` directory.
+
+```bash
+npm run generate-types
+```
+
+### watch-queries
+
+Using [graphql code generator](https://www.graphql-code-generator.com/) this command listens for changes based on the `documents` key in the `codegen.yml` file, and generates types.
+
+```bash
+npm run watch-queries
+```
+
+### generate
+
+See the [prisma generate documentation](https://www.prisma.io/docs/reference/api-reference/command-reference#generate).
+
+```bash
+npm run generate
+```
+
+### migrate
+
+See the [prisma migration documentation](https://www.prisma.io/docs/concepts/components/prisma-migrate).
+
+```bash
+npm run migrate
+```
+
+### deploy
+
+> To apply pending migrations to development, staging, or testing environments, run the `migrate deploy` command as part of your CI/CD pipeline | [Source](https://www.prisma.io/docs/guides/deployment/deploy-database-changes-with-prisma-migrate).
+
+```bash
+npm run deploy
+```
+
+### reset
+
+When you want to reset your database to a clean slate, this clears all migrations and re-runs the migration list, then seeds the database. For more visit [prisma migrate reset](https://www.prisma.io/docs/reference/api-reference/command-reference/#migrate-reset).
+
+```bash
+npm run reset
+```
+
+### seed
+
+Runs the `prisma/seed.ts` script to seed your database. See the [prisma seeding documentation](https://www.prisma.io/docs/guides/database/seed-database/).
+
+```bash
+npm run seed
+```
+
+### studio
+
+Allows you to interact with and manage your data interactively. For more visit [prisma studio](https://www.prisma.io/docs/reference/api-reference/command-reference/#studio).
+
+```bash
+npm run studio
+```
+
+### prisma
+
+An aggregate command used to format your schema file, check for differences from schema to db, generate a prisma client, and seed your database.
+
+```bash
+npm run prisma
+```
+
 ### build
 
 Builds the production application in the .next folder.
@@ -49,7 +188,7 @@ npm run build
 
 Starts the application in development mode with hot-code reloading, error reporting, and more:
 
-The application will start at http://localhost:3000 by default. The default port can be changed with -p, like so:
+The application will start at http://localhost:3000 by default. The default port can be changed with `-p`, like so:
 
 ```bash
 npm run dev -p 4000

codegen.yml

@@ -0,0 +1,15 @@
+## codegen.yml
+overwrite: true
+schema: 'http://localhost:3000/api/graphql'
+documents: '{components,pages}/**/*.{ts,tsx}'
+generates:
+    types/gen/graphql-types.tsx:
+        config:
+            dedupeOperationSuffix: true
+            withHooks: true
+            withComponent: false
+            withHOC: false
+        plugins:
+            - 'typescript'
+            - 'typescript-operations'
+            - 'typescript-react-apollo'

components/Image.tsx

@@ -1,10 +1,11 @@
 import React, { ReactElement } from 'react';
 import NextImage from 'next/image';
 import { Avatar, createStyles, makeStyles, Theme } from '@material-ui/core';
-import { Image as ImageType } from '../pages';
+
+import { Maybe } from '../types/gen/graphql-types';
 
 interface Props {
-    image: ImageType | undefined;
+    image: Maybe<string> | undefined;
     name: string;
 }
 
@@ -25,14 +26,14 @@ export default function Image({ image, name }: Props): ReactElement {
         return <Avatar className={classes.avatar}>{firstLetter}</Avatar>;
     }
 
-    if (image.src.startsWith('/')) {
-        return <NextImage src={image.src || firstLetter} width={50} height={50} alt={name} data-testid="image" />;
+    if (image.startsWith('/')) {
+        return <NextImage src={image || firstLetter} width={50} height={50} alt={name} data-testid="image" />;
     }
 
     return (
         <>
             {/* used for non optimizable entries (files not stored in public directory) */}
-            <img data-testid="image" src={image.src || firstLetter} width={50} height={50} alt={name} />
+            <img data-testid="image" src={image || firstLetter} width={50} height={50} alt={name} />
         </>
     );
 }