Merge pull request #657 from thedevs-network/chore/update-deps

Update dependencies and delete v1 API

.docker.env

@@ -18,12 +18,6 @@ DB_USER=
 DB_PASSWORD=
 DB_SSL=false
 
-# ONLY NEEDED FOR MIGRATION !!1!
-# Neo4j database credential details
-NEO4J_DB_URI=bolt://localhost
-NEO4J_DB_USERNAME=neo4j
-NEO4J_DB_PASSWORD=pass
-
 # Redis host and port
 REDIS_HOST=redis
 REDIS_PORT=6379
@@ -65,15 +59,6 @@ RECAPTCHA_SECRET_KEY=
 # Get it from https://developers.google.com/safe-browsing/v4/get-started
 GOOGLE_SAFE_BROWSING_KEY=
 
-# Google Analytics tracking ID for universal analytics.
-# Example: UA-XXXX-XX
-GOOGLE_ANALYTICS=
-GOOGLE_ANALYTICS_UNIVERSAL=
-
-# Google Analytics tracking ID for universal analytics
-# This one is used for links
-# GOOGLE_ANALYTICS_UNIVERSAL=
-
 # Your email host details to use to send verification emails.
 # More info on http://nodemailer.com/
 # Mail from example "Kutt <[email protected]>". Leave empty to use MAIL_USER

.eslintrc

@@ -1,40 +1,22 @@
 {
   "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:prettier/recommended"
+    "next/core-web-vitals",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
   ],
-  "parser": "@typescript-eslint/parser",
   "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
     "project": ["./tsconfig.json", "./client/tsconfig.json"]
   },
-  "plugins": ["@typescript-eslint"],
+  "plugins": ["@typescript-eslint", "prettier"],
   "rules": {
-    "eqeqeq": ["warn", "always", { "null": "ignore" }],
-    "no-useless-return": "warn",
-    "no-var": "warn",
-    "no-console": "warn",
-    "no-unused-vars": "off",
-    "max-len": ["warn", { "comments": 80 }],
-    "no-param-reassign": 0,
-    "require-atomic-updates": 0,
-    "@typescript-eslint/interface-name-prefix": "off",
-    "@typescript-eslint/no-unused-vars": "off", // "warn" for production
-    "@typescript-eslint/no-explicit-any": "off", // "warn" for production
-    "@typescript-eslint/no-var-requires": "off",
-    "@typescript-eslint/camelcase": "off",
-    "@typescript-eslint/no-object-literal-type-assertion": "off",
-    "@typescript-eslint/no-parameter-properties": "off",
-    "@typescript-eslint/explicit-function-return-type": "off"
+    "@typescript-eslint/no-explicit-any": ["off"]
   },
   "env": {
     "es6": true,
     "browser": true,
-    "node": true,
-    "mocha": true
-  },
-  "globals": {
-    "assert": true
+    "node": true
   },
   "settings": {
     "react": {

.example.env

@@ -18,12 +18,6 @@ DB_USER=
 DB_PASSWORD=
 DB_SSL=false
 
-# ONLY NEEDED FOR MIGRATION !!1!
-# Neo4j database credential details
-NEO4J_DB_URI=bolt://localhost
-NEO4J_DB_USERNAME=neo4j
-NEO4J_DB_PASSWORD=pass
-
 # Redis host and port
 REDIS_HOST=127.0.0.1
 REDIS_PORT=6379
@@ -68,15 +62,6 @@ RECAPTCHA_SECRET_KEY=
 # Get it from https://developers.google.com/safe-browsing/v4/get-started
 GOOGLE_SAFE_BROWSING_KEY=
 
-# Google Analytics tracking ID for universal analytics.
-# Example: UA-XXXX-XX
-GOOGLE_ANALYTICS=
-GOOGLE_ANALYTICS_UNIVERSAL=
-
-# Google Analytics tracking ID for universal analytics
-# This one is used for links
-# GOOGLE_ANALYTICS_UNIVERSAL=
-
 # Your email host details to use to send verification emails.
 # More info on http://nodemailer.com/
 # Mail from example "Kutt <[email protected]>". Leave empty to use MAIL_USER

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint:nofix

README.md

@@ -13,12 +13,6 @@ _Contributions and bug reports are welcome._
 [![GitHub license](https://img.shields.io/github/license/thedevs-network/kutt.svg)](https://github.com/thedevs-network/kutt/blob/develop/LICENSE)
 [![Twitter](https://img.shields.io/twitter/url/https/github.com/thedevs-network/kutt/.svg?style=social)](https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Fgithub.com%2Fthedevs-network%2Fkutt%2F)
 
-## Migration from v1
-
-The new version of Kutt is here. In version 2, we used TypeScript and we moved from Neo4j to PostgreSQL database in favor of performance and we're working on adding new features.
-
-If you're coming from v1, refer to [MIGRATION.md](MIGRATION.md) to migrate data from Neo4j to PostgreSQL.
-
 ## Table of Contents
 
 - [Key Features](#key-features)

client/components/ALink.tsx

@@ -1,17 +1,18 @@
-import { Box, BoxProps } from "reflexbox/styled-components";
+import { FC } from "react";
+import { Box, BoxProps } from "rebass/styled-components";
 import styled, { css } from "styled-components";
 import { ifProp } from "styled-tools";
+import Link from "next/link";
 
 interface Props extends BoxProps {
   href?: string;
   title?: string;
   target?: string;
   rel?: string;
   forButton?: boolean;
+  isNextLink?: boolean;
 }
-const ALink = styled(Box).attrs({
-  as: "a"
-})<Props>`
+const StyledBox = styled(Box)<Props>`
   cursor: pointer;
   color: #2196f3;
   border-bottom: 1px dotted transparent;
@@ -28,6 +29,20 @@ const ALink = styled(Box).attrs({
   )}
 `;
 
+export const ALink: FC<Props> = (props) => {
+  if (props.isNextLink) {
+    const { href, target, title, rel, ...rest } = props;
+    return (
+      <Link href={href} target={target} title={title} rel={rel} passHref>
+        <StyledBox as="a" {...rest} />
+      </Link>
+    );
+  }
+  return <StyledBox as="a" {...props} />;
+};
+
+ALink.displayName = "ALink";
+
 ALink.defaultProps = {
   pb: "1px",
   forButton: false

client/components/Animation.ts

@@ -1,5 +1,5 @@
 import { fadeInVertical } from "../helpers/animations";
-import { Flex } from "reflexbox/styled-components";
+import { Flex } from "rebass/styled-components";
 import styled from "styled-components";
 import { prop } from "styled-tools";
 import { FC } from "react";
@@ -10,7 +10,7 @@ interface Props extends React.ComponentProps<typeof Flex> {
 }
 
 const Animation: FC<Props> = styled(Flex)<Props>`
-  animation: ${props => fadeInVertical(props.offset)}
+  animation: ${(props) => fadeInVertical(props.offset)}
     ${prop("duration", "0.3s")} ease-out;
 `;
 

client/components/AppWrapper.tsx

@@ -1,7 +1,6 @@
-import { Flex } from "reflexbox/styled-components";
+import { Flex } from "rebass/styled-components";
 import React, { useEffect } from "react";
 import styled from "styled-components";
-import Router from "next/router";
 
 import { useStoreState, useStoreActions } from "../store";
 import PageLoading from "./PageLoading";
@@ -22,11 +21,11 @@ const Wrapper = styled(Flex)`
 `;
 
 const AppWrapper = ({ children }: { children: any }) => {
-  const isAuthenticated = useStoreState(s => s.auth.isAuthenticated);
-  const logout = useStoreActions(s => s.auth.logout);
-  const fetched = useStoreState(s => s.settings.fetched);
-  const loading = useStoreState(s => s.loading.loading);
-  const getSettings = useStoreActions(s => s.settings.getSettings);
+  const isAuthenticated = useStoreState((s) => s.auth.isAuthenticated);
+  const logout = useStoreActions((s) => s.auth.logout);
+  const fetched = useStoreState((s) => s.settings.fetched);
+  const loading = useStoreState((s) => s.loading.loading);
+  const getSettings = useStoreActions((s) => s.settings.getSettings);
 
   const isVerifyEmailPage =
     typeof window !== "undefined" &&
@@ -36,7 +35,7 @@ const AppWrapper = ({ children }: { children: any }) => {
     if (isAuthenticated && !fetched && !isVerifyEmailPage) {
       getSettings().catch(() => logout());
     }
-  }, [isVerifyEmailPage]);
+  }, [isAuthenticated, fetched, isVerifyEmailPage, getSettings, logout]);
 
   return (
     <Wrapper

client/components/Button.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from "styled-components";
 import { switchProp, prop, ifProp } from "styled-tools";
-import { Flex, BoxProps } from "reflexbox/styled-components";
+import { Flex, BoxProps } from "rebass/styled-components";
 
 interface Props extends BoxProps {
   color?: "purple" | "gray" | "blue" | "red";

client/components/Divider.tsx

@@ -1,4 +1,4 @@
-import { Flex } from "reflexbox/styled-components";
+import { Flex } from "rebass/styled-components";
 import styled from "styled-components";
 
 import { Colors } from "../consts";

client/components/Extensions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import styled from "styled-components";
-import { Flex } from "reflexbox/styled-components";
+import { Flex } from "rebass/styled-components";
 import SVG from "react-inlinesvg"; // TODO: another solution
 import { Colors } from "../consts";
 import { ColCenterH } from "./Layout";
@@ -62,7 +62,7 @@ const Icon = styled(SVG)`
   width: 18px;
   height: 18px;
   margin-right: 16px;
-  fill: ${props => props.color || "#333"};
+  fill: ${(props) => props.color || "#333"};
 
   @media only screen and (max-width: 768px) {
     width: 13px;

client/components/Features.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import styled from "styled-components";
-import { Flex } from "reflexbox/styled-components";
+import { Flex } from "rebass/styled-components";
 
 import FeaturesItem from "./FeaturesItem";
 import { ColCenterH } from "./Layout";
 import { Colors } from "../consts";
-import Text, { H3 } from "./Text";
+import { H3 } from "./Text";
 
 const Features = () => (
   <ColCenterH

client/components/FeaturesItem.tsx

@@ -1,6 +1,6 @@
-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 import styled from "styled-components";
-import { Flex } from "reflexbox/styled-components";
+import { Flex } from "rebass/styled-components";
 
 import { fadeIn } from "../helpers/animations";
 import Icon from "./Icon";
@@ -9,6 +9,7 @@ import { Icons } from "./Icon/Icon";
 interface Props {
   title: string;
   icon: Icons;
+  children?: ReactNode;
 }
 
 const Block = styled(Flex).attrs({

client/components/Footer.tsx

@@ -11,7 +11,7 @@ import Text from "./Text";
 const { publicRuntimeConfig } = getConfig();
 
 const Footer: FC = () => {
-  const { isAuthenticated } = useStoreState(s => s.auth);
+  const { isAuthenticated } = useStoreState((s) => s.auth);
 
   useEffect(() => {
     showRecaptcha();
@@ -27,7 +27,7 @@ const Footer: FC = () => {
       {!isAuthenticated && <ReCaptcha />}
       <Text fontSize={[12, 13]} py={2}>
         Made with love by{" "}
-        <ALink href="//thedevs.network/" title="The Devs">
+        <ALink href="//thedevs.network/" title="The Devs" target="_blank">
           The Devs
         </ALink>
         .{" | "}
@@ -39,11 +39,11 @@ const Footer: FC = () => {
           GitHub
         </ALink>
         {" | "}
-        <ALink href="/terms" title="Terms of Service">
+        <ALink href="/terms" title="Terms of Service" isNextLink>
           Terms of Service
         </ALink>
         {" | "}
-        <ALink href="/report" title="Report abuse">
+        <ALink href="/report" title="Report abuse" isNextLink>
           Report Abuse
         </ALink>
         {publicRuntimeConfig.CONTACT_EMAIL && (