Add members-only example (SSR) + update packages

This commit is contained in:
Michael
2022-02-17 13:50:34 +01:00
parent 659cad427e
commit 8e9c98ced8
10 changed files with 1040 additions and 2024 deletions

View File

@@ -9,10 +9,11 @@
"next",
"next/core-web-vitals",
"plugin:@typescript-eslint/recommended-requiring-type-checking",
"plugin:sonarjs/recommended",
"plugin:unicorn/recommended"
"plugin:sonarjs/recommended"
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"project": [
"./tsconfig.json"
]
@@ -71,17 +72,6 @@
"allowHigherOrderFunctions": true,
"allowConciseArrowFunctionExpressionsStartingWithVoid": true
}
],
"unicorn/no-null": "off",
"unicorn/filename-case": [
"error",
{
"cases": {
"camelCase": true,
"pascalCase": true,
"kebabCase": true
}
}
]
},
"settings": {

View File

@@ -19,9 +19,14 @@ const Nav = ({ user, signOut }: NavProperties): JSX.Element => {
const NavMenu = (
<>
{user && (
<Link href="/dashboard">
<a className="nav-btn">Dashboard</a>
</Link>
<>
<Link href="/dashboard">
<a className="nav-btn">Dashboard</a>
</Link>
<Link href="/members-only">
<a className="nav-btn">Premium user </a>
</Link>
</>
)}
<Link href="/blog">

View File

@@ -11,58 +11,57 @@
"update-types": "npx openapi-typescript https://vwkxoczhqygxvqzbhkmj.supabase.co/rest/v1/?apikey=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImlhdCI6MTYzMDQwNzE1NCwiZXhwIjoxOTQ1OTgzMTU0fQ.VsWbay8ZrhDe3-elrlh7EGtJfW1INXlUywjeh6h2xgc --output types/database/index.ts"
},
"dependencies": {
"@headlessui/react": "^1.4.2",
"@sendgrid/mail": "^7.6.0",
"@stripe/stripe-js": "^1.22.0",
"@supabase/gotrue-js": "^1.21.7",
"@supabase/supabase-js": "^1.29.1",
"@types/node": "^17.0.4",
"@headlessui/react": "^1.4.3",
"@sendgrid/mail": "^7.6.1",
"@stripe/stripe-js": "^1.23.0",
"@supabase/gotrue-js": "^1.22.1",
"@supabase/supabase-js": "^1.30.3",
"@types/node": "^17.0.18",
"@types/react-dom": "^17.0.11",
"axios": "^0.24.0",
"axios": "^0.26.0",
"cors": "^2.8.5",
"daisyui": "^1.20.0",
"daisyui": "^2.0.6",
"date-fns": "^2.28.0",
"esbuild": "^0.14.11",
"express-rate-limit": "^6.0.1",
"esbuild": "^0.14.22",
"express-rate-limit": "^6.2.1",
"gray-matter": "^4.0.3",
"mdx-bundler": "^8.0.1",
"micro": "^9.3.4",
"next": ">=12.0.7",
"next-seo": "^4.28.1",
"next": ">=12.0.10",
"next-seo": "^5.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-feather": "^2.0.9",
"react-icons": "^4.3.1",
"react-toastify": "^8.1.0",
"stripe": "^8.195.0"
"react-toastify": "^8.2.0",
"stripe": "^8.203.0"
},
"devDependencies": {
"@next/eslint-plugin-next": "^12.0.7",
"@playwright/test": "^1.17.1",
"@tailwindcss/typography": "^0.5.0",
"@next/eslint-plugin-next": "^12.0.10",
"@playwright/test": "^1.19.1",
"@tailwindcss/typography": "^0.5.2",
"@types/cors": "^2.8.12",
"@types/express-rate-limit": "^5.1.3",
"@types/micro": "^7.3.6",
"@types/react": "^17.0.38",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"autoprefixer": "^10.4.0",
"eslint": "^8.5.0",
"@types/react": "^17.0.39",
"@typescript-eslint/eslint-plugin": "^5.12.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.9.0",
"eslint-config-airbnb": "^19.0.4",
"eslint-config-next": "^12.0.7",
"eslint-config-next": "^12.0.10",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-cypress": "^2.12.1",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-simple-import-sort": "^7.0.0",
"eslint-plugin-sonarjs": "^0.11.0",
"eslint-plugin-unicorn": "^40.0.0",
"postcss": "^8.4.5",
"postcss": "^8.4.6",
"prettier": "^2.5.1",
"tailwindcss": "^3.0.7",
"typescript": "^4.5.4"
"tailwindcss": "^3.0.23",
"typescript": "^4.5.5"
}
}

View File

@@ -51,7 +51,6 @@ type Parameters_ = {
allPosts: Items[];
};
// eslint-disable-next-line unicorn/prevent-abbreviations
export const getStaticProps = (): GetStaticPropsResult<Parameters_> => {
const allPosts = getAllPosts([
'title',

View File

@@ -58,11 +58,9 @@ type StaticResult = {
code: string;
};
// eslint-disable-next-line unicorn/prevent-abbreviations
export async function getStaticProps({
params,
}: Parameters_): Promise<GetStaticPropsResult<StaticResult>> {
//const content = await markdownToHtml(post.content || '');
const postData = await getPostData(params.slug);
return {
props: {

View File

@@ -1,4 +1,3 @@
/* eslint-disable unicorn/no-nested-ternary */
import { useEffect, useState } from 'react';
import Dashboard from '../components/Dashboard';
@@ -68,7 +67,7 @@ const DashboardPage = ({
</div>
);
};
// eslint-disable-next-line unicorn/prevent-abbreviations
export async function getServerSideProps(
context: NextPageContext
): Promise<any> {
@@ -113,7 +112,7 @@ export async function getServerSideProps(
planName: plan?.paid_user
? subscription?.items.data[0].plan.nickname
? subscription?.items.data[0].plan.nickname
: '[DEV] Please add a description for your prices'
: '[DEV] Please add a description for your prices (Edit your pricing in the Stripe dashboard)'
: 'Free Tier',
},
};

61
pages/members-only.tsx Normal file
View File

@@ -0,0 +1,61 @@
// SSR Example to handle premium users only
import Layout from 'components/Layout';
import { NextPageContext } from 'next';
import { NextSeo } from 'next-seo';
import { createClient } from '@supabase/supabase-js';
import { definitions } from 'types/database/index';
const MembersOnly = (): JSX.Element => (
<>
<NextSeo
title={`${
process.env.NEXT_PUBLIC_TITLE ? process.env.NEXT_PUBLIC_TITLE : ''
} | Premium`}
description={`This is the premium page for ${
process.env.NEXT_PUBLIC_TITLE ? process.env.NEXT_PUBLIC_TITLE : ''
}`}
/>
<Layout>
<>
<h2 className="text-center mb-10"> Welcome premium user 🎉</h2>
<p className="max-w-md m-auto">
This page check server side if a user is premium. You can use this
example to store your premium app/logic here!
</p>
</>
</Layout>
</>
);
export default MembersOnly;
export async function getServerSideProps(context: NextPageContext) {
const supabaseAdmin = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL || '',
process.env.SUPABASE_ADMIN_KEY || ''
);
const { user } = await supabaseAdmin.auth.api.getUserByCookie(context.req);
console.log(user);
const { data: subscriptions } = await supabaseAdmin
.from<definitions['subscriptions']>('subscriptions')
.select('paid_user, plan')
.eq('id', user?.id)
.single();
console.log(subscriptions);
if (!subscriptions?.paid_user) {
return {
redirect: {
destination: '/',
permanent: false,
},
};
}
return {
props: {
sub: subscriptions?.paid_user,
},
};
}

2907
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,4 +1,3 @@
/* eslint-disable unicorn/prefer-module */
// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = {

View File

@@ -1,8 +1,9 @@
/* eslint-disable unicorn/prefer-module */
module.exports = {
mode: 'jit',
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
content: [
'./pages/**/*.{js,ts,jsx,tsx}',
'./components/**/*.{js,ts,jsx,tsx}',
],
theme: {
fontFamily: {
title: ['Poppins'],