Version 🐒monke: Add Typegoose + type-graphql, modify architecture on …

…the backend, update packages

.eslintrc.json

@@ -10,20 +10,13 @@
     "es6": true
   },
   "extends": [
-    "airbnb",
+    "next",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:prettier/recommended",
-    "prettier",
-    "prettier/react"
-  ],
-  "plugins": [
-    "@typescript-eslint",
-    "react",
-    "prettier",
-    "graphql",
-    "better-styled-components"
+    "prettier"
   ],
+  "plugins": ["@typescript-eslint", "react", "prettier", "graphql"],
   "rules": {
     "prettier/prettier": "error",
     "no-var": "warn",

.prettierignore

@@ -2,5 +2,4 @@
 package.json
 package-lock.json
 public
-styles/base
 styles/vendors

.stylelintrc

@@ -3,7 +3,7 @@
     "stylelint-scss"
   ],
   "extends": "stylelint-config-standard",
-  "ignoreFiles": ["./styles/base/**", "./styles/vendors/**"],
+  "ignoreFiles": ["./styles/vendors/**"],
   "rules": { 
     "at-rule-no-unknown": null,
     "scss/at-rule-no-unknown": true,

README.md

@@ -9,8 +9,8 @@
   <a href="https://github.com/codica2" target="_blank"><img src="https://img.shields.io/badge/licence-MIT-green.svg" /></a>
 </p>
 
-
 ## Project boostrap built with:
+
 - React.js
 - Next.js
 - Typescript
@@ -19,9 +19,10 @@
 - GraphQl
 - EsLint
 - Prettier
-- Jest tests
+- Jest
 - Nodemon
-- Styled Components
+- Typegoose
+- Type-graphql
 
 ## How to use
 
@@ -42,10 +43,8 @@ Configuration in this project is not perfect - it's just my own preference, and
 
 ## To see before coding;
 
-- [pure-functions-immutability-and-other-software-superpowers](https://medium.com/dailyjs/pure-functions-immutability-and-other-software-superpowers-dfe6039af8f6)
 - [Check out this to read more about /server/graphql workings](https://github.com/Urigo/merge-graphql-schemas)
 - [Context management choice](https://www.youtube.com/watch?v=Q54YDGC_t3Y)
 - [Apollo context management](https://www.apollographql.com/docs/react/data/local-state/)
-- [graphql-tag](https://devstore.io/js/graphql-tag)
 
 PS; I'm always looking for interesting freelance/full time opportunities, hmu @ [email protected]

jest.config.js

@@ -1,41 +1,36 @@
 module.exports = {
   transform: {
-    "^.+\\.(js|jsx)?$": "babel-jest"
+    "^.+\\.(js|jsx)?$": "babel-jest",
   },
+  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.ts?$",
   preset: "ts-jest",
-
+  transform: {
+    "^.+\\.(t|j)sx?$": "ts-jest",
+  },
   testEnvironment: "node",
   globals: {
     jsx: "react",
     "ts-jest": {
-      "tsConfig": "tsconfig.jest.json"
-    }
+      tsConfig: "tsconfig.jest.json",
+    },
   },
-  setupFiles: [
-    "<rootDir>/tests/test-setup.ts"
-  ],
-  moduleFileExtensions: [
-    "ts",
-    "tsx",
-    "js",
-    "jsx"
-  ],
-  transformIgnorePatterns: [
-    "<rootDir>/node_modules/"
-  ],
+  setupFiles: ["<rootDir>/tests/test-setup.ts"],
+  moduleFileExtensions: ["ts", "tsx", "js", "jsx"],
+  transformIgnorePatterns: ["<rootDir>/node_modules/"],
   moduleNameMapper: {
-    "~graphql/(.*)": "<rootDir>/graphql/$1",
-    "~graphqlQ/(.*)": "<rootDir>/graphql/queries/$1",
-    "~graphqlM/(.*)": "<rootDir>/graphql/mutations/$1",
-    "~views/(.*)": "<rootDir>/views/$1",
-    "~viewsUi/(.*)": "<rootDir>/views/ui/$1",
-    "~viewsComp/(.*)": "<rootDir>/views/components/$1",
-    "~viewsLay/(.*)": "<rootDir>/views/layouts/$1",
-    "~styles/(.*)": "<rootDir>/styles/$1",
-    "~lib/(.*)": "<rootDir>/lib/$1",
-    "~assets/(.*)": "<rootDir>/assets/$1",
-    "~styles/(.*)": "<rootDir>/styles/$1",
-    "~static/(.*)": "<rootDir>/public/static/$1"
-  }
-} 
+    "@graphql/(.*)": "<rootDir>/graphql/$1",
+    "@constants/(.*)": "<rootDir>/constants/$1",
+    "@views/(.*)": "<rootDir>/views/$1",
+    "@views/(.*)": "<rootDir>/views/$1",
+    "@viewsUi/(.*)": "<rootDir>/views/ui/$1",
+    "@viewsComp/(.*)": "<rootDir>/views/components/$1",
+    "@viewsLay/(.*)": "<rootDir>/views/layouts/$1",
+    "@styles/(.*)": "<rootDir>/styles/$1",
+    "@lib/(.*)": "<rootDir>/lib/$1",
+    "@assets/(.*)": "<rootDir>/assets/$1",
+    "@styles/(.*)": "<rootDir>/styles/$1",
+    "@static/(.*)": "<rootDir>/public/static/$1",
+  },
+};
 
+

next-env.d.ts

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

next.config.js

@@ -1,56 +1,53 @@
-require('dotenv').config()
-const path = require('path')
-const Dotenv = require('dotenv-webpack')
-const withImages = require('next-images')
+require("dotenv").config();
+const path = require("path");
+const withImages = require("next-images");
 
 const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 
-
 const configureWebpack = (config, { dev }) => {
-	config.plugins = config.plugins || []
-
-	config.plugins.push(
-		// Read the .env file
-		new Dotenv({
-			path: path.join(__dirname, '.env'),
-			systemvars: true
-		})
-  );
-
-
-	if (config.resolve.plugins) {
-		config.resolve.plugins.push(new TsconfigPathsPlugin());
-	} else {
-		config.resolve.plugins = [new TsconfigPathsPlugin()];
-	}
-
-	config.module.rules.push({
-		test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
-		use: {
-			loader: 'url-loader',
-			options: {
-				limit: 100000,
-				name: '[name].[ext]'
-			}
-		}
-	})
-
-	config.module.rules.push({
-		test: /\.(graphql|gql)$/,
-		exclude: /node_modules/,
-		loader: 'graphql-tag/loader'
-	})
-
-	if (dev) {
-		config.module.rules.push({
-			test: /\.jsx?$/,
-			exclude: /node_modules/,
-			loader: 'eslint-loader',
-		})
-	}
+  config.plugins = config.plugins || [];
+
+  if (config.resolve.plugins) {
+    config.resolve.plugins.push(new TsconfigPathsPlugin());
+  } else {
+    config.resolve.plugins = [new TsconfigPathsPlugin()];
+  }
+
+  config.module.rules.push({
+    test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
+    use: {
+      loader: "url-loader",
+      options: {
+        limit: 100000,
+        name: "[name].[ext]",
+      },
+    },
+  });
+
+  config.module.rules.push({
+    test: /\.(graphql|gql)$/,
+    exclude: /node_modules/,
+    loader: "graphql-tag/loader",
+  });
+
+  if (dev) {
+    config.module.rules.push({
+      test: /\.jsx?$/,
+      exclude: /node_modules/,
+      loader: "eslint-loader",
+    });
+    config.devtool = "cheap-module-eval-source-map";
+  }
 
   return config;
 };
 
-
-module.exports = withImages({ webpack: configureWebpack	})
+module.exports = withImages({
+  webpack: {
+    ...configureWebpack,
+    sassOptions: {
+      includePaths: [path.join(__dirname, "styles")],
+    },
+  }
+});
+

nodemon.json

@@ -1,5 +1,6 @@
 {
+  "ignore": [".git", "node_modules/**/node_modules", "*.gql"],
   "watch": ["server/*"],
   "ext": "*",
-  "exec": "ts-node --project tsconfig.server.json -r tsconfig-paths/register server/index.ts"
+  "exec": "ts-node --project tsconfig.server.json -r tsconfig-paths/register -r dotenv/config server/index.ts"
 }