Mirroring/my-links
1
0
Fork 0
mirror of https://github.com/Sonny93/my-links.git synced 2025-12-08 22:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Revert "Add: tRPC + register on first time login"

Browse Source 
This reverts commit cb5f9017a9a3e1e0886bfa67b9b9f5554f527d35.
This commit is contained in:
Sonny
2023-04-16 19:24:22 +02:00
parent 7074901dcb
commit 056a398f25
12 changed files with 1767 additions and 4403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/FormLayout.tsx
View File

@@ -1,12 +1,12 @@
import Head from "next/head"; import Head from "next/head";
import Link from "next/link"; import Link from "next/link";
import { FormEvent } from "react";
import { config } from "../config";
import MessageManager from "./MessageManager"; import MessageManager from "./MessageManager";
import styles from "../styles/create.module.scss"; import styles from "../styles/create.module.scss";
import { config } from "../config";
interface FormProps { interface FormProps {
title: string; title: string;
errorMessage?: string; errorMessage?: string;
@@ -14,7 +14,7 @@ interface FormProps {
infoMessage?: string; infoMessage?: string;
canSubmit: boolean; canSubmit: boolean;
handleSubmit: (event: FormEvent<HTMLFormElement>) => void; handleSubmit: (event) => void;
textBtnConfirm?: string; textBtnConfirm?: string;
classBtnConfirm?: string; classBtnConfirm?: string;

5659
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

8
package.json
View File

@@ -10,11 +10,6 @@
"dependencies": { "dependencies": {
"@prisma/client": "^4.10.0", "@prisma/client": "^4.10.0",
"@svgr/webpack": "^6.5.1", "@svgr/webpack": "^6.5.1",
"@tanstack/react-query": "^4.24.6",
"@trpc/client": "^10.11.1",
"@trpc/next": "^10.11.1",
"@trpc/react-query": "^10.11.1",
"@trpc/server": "^10.11.1",
"axios": "^1.3.2", "axios": "^1.3.2",
"next": "^13.1.6", "next": "^13.1.6",
"next-auth": "^4.19.2", "next-auth": "^4.19.2",
@@ -26,8 +21,7 @@
"react-select": "^5.7.0", "react-select": "^5.7.0",
"sass": "^1.58.0", "sass": "^1.58.0",
"sharp": "^0.31.3", "sharp": "^0.31.3",
"toastr": "^2.1.4", "toastr": "^2.1.4"
"zod": "^3.20.6"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^18.13.0", "@types/node": "^18.13.0",

73
pages/_app.tsx
View File

@@ -1,49 +1,44 @@
import { SessionProvider } from "next-auth/react"; import { useEffect } from 'react';
import type { AppProps } from "next/app"; import { SessionProvider } from 'next-auth/react';
import { useRouter } from "next/router";
import nProgress from "nprogress";
import { useEffect } from "react";
import AuthRequired from "../components/AuthRequired"; import { useRouter } from 'next/router';
import { trpc } from "../utils/trpc"; import nProgress from 'nprogress';
import 'nprogress/nprogress.css';
import "nprogress/nprogress.css"; import AuthRequired from '../components/AuthRequired';
import "../styles/globals.scss";
import '../styles/globals.scss';
interface MyAppProps extends AppProps {
Component: any; // TODO: fix type
}
function MyApp({ function MyApp({
Component, Component,
pageProps: { session, ...pageProps }, pageProps: { session, ...pageProps }
}: MyAppProps) { }) {
const router = useRouter(); const router = useRouter();
useEffect(() => { useEffect(() => { // Chargement pages
// Chargement pages router.events.on('routeChangeStart', nProgress.start);
router.events.on("routeChangeStart", nProgress.start); router.events.on('routeChangeComplete', nProgress.done);
router.events.on("routeChangeComplete", nProgress.done); router.events.on('routeChangeError', nProgress.done);
router.events.on("routeChangeError", nProgress.done);
return () => { return () => {
router.events.off("routeChangeStart", nProgress.start); router.events.off('routeChangeStart', nProgress.start);
router.events.off("routeChangeComplete", nProgress.done); router.events.off('routeChangeComplete', nProgress.done);
router.events.off("routeChangeError", nProgress.done); router.events.off('routeChangeError', nProgress.done);
}; }
}); });
return ( return (
<SessionProvider session={session}> <SessionProvider session={session}>
{Component.authRequired ? ( {Component.authRequired ? (
<AuthRequired> <AuthRequired>
<Component {...pageProps} /> <Component {...pageProps} />
</AuthRequired> </AuthRequired>
) : ( ) : (
<Component {...pageProps} /> <Component {...pageProps} />
)} )}
</SessionProvider> </SessionProvider>
); );
} }
export default trpc.withTRPC(MyApp); export default MyApp;

143
pages/api/auth/[...nextauth].ts
View File

@@ -1,101 +1,64 @@
import NextAuth from "next-auth"; import NextAuth from 'next-auth';
import GoogleProvider from "next-auth/providers/google"; import GoogleProvider from 'next-auth/providers/google';
import { PrismaClient } from "@prisma/client"; import { PrismaClient } from '@prisma/client';
const prisma = new PrismaClient(); const prisma = new PrismaClient();
export default NextAuth({ export default NextAuth({
providers: [ providers: [
GoogleProvider({ GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID, clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET, clientSecret: process.env.GOOGLE_CLIENT_SECRET,
authorization: { authorization: {
params: { params: {
prompt: "consent", prompt: 'consent',
access_type: "offline", access_type: 'offline',
response_type: "code", response_type: 'code'
}, }
}, }
}), })
], ],
callbacks: { callbacks: {
async signIn({ account: accountParam, profile }) { async signIn({ account: accountParam, profile }) { // TODO: Auth
// TODO: Auth console.log('Connexion via', accountParam.provider, accountParam.providerAccountId, profile.email, profile.name)
console.log( if (accountParam.provider !== 'google') {
"Connexion via", return '/signin?error=' + encodeURI('Authentitifcation via Google requise');
accountParam.provider, }
accountParam.providerAccountId,
profile.email,
profile.name
);
if (accountParam.provider !== "google") {
return (
"/signin?error=" + encodeURI("Authentitifcation via Google requise")
);
}
const email = profile?.email; const email = profile?.email;
if (email === "") { if (email === '') {
return ( return '/signin?error=' + encodeURI('Impossible de récupérer l\'email associé à ce compte Google');
"/signin?error=" + }
encodeURI(
"Impossible de récupérer l'email associé à ce compte Google"
)
);
}
const googleId = profile?.sub; const googleId = profile?.sub;
if (googleId === "") { if (googleId === '') {
return ( return '/signin?error=' + encodeURI('Impossible de récupérer l\'identifiant associé à ce compte Google');
"/signin?error=" + }
encodeURI(
"Impossible de récupérer l'identifiant associé à ce compte Google"
)
);
}
try { try {
const account = await prisma.user.findFirst({ const account = await prisma.user.findFirst({
where: { where: {
google_id: googleId, google_id: googleId,
email, email
}, }
}); });
const accountCount = await prisma.user.count();
if (!account) { if (!account) {
if (accountCount === 0) { return '/signin?error=' + encodeURI('Vous n\'êtes pas autorisé à vous connecter avec ce compte Google');
await prisma.user.create({ } else {
data: { return true;
email, }
google_id: googleId, } catch (error) {
}, console.error(error);
}); return '/signin?error=' + encodeURI('Une erreur est survenue lors de l\'authentification');
return true; }
}
return (
"/signin?error=" +
encodeURI(
"Vous n'êtes pas autorisé à vous connecter avec ce compte Google"
)
);
} else {
return true;
} }
} catch (error) {
console.error(error);
return (
"/signin?error=" +
encodeURI("Une erreur est survenue lors de l'authentification")
);
}
}, },
}, pages: {
pages: { signIn: '/signin',
signIn: "/signin", error: '/signin'
error: "/signin", },
}, session: {
session: { maxAge: 60 * 60 * 6 // Session de 6 heures
maxAge: 60 * 60 * 6, // Session de 6 heures }
},
}); });

10
pages/api/trpc/[trpc].ts
View File

@@ -1,10 +0,0 @@
import * as trpcNext from "@trpc/server/adapters/next";
import { appRouter } from "../../../server/routers/_app";
// export API handler
// @see https://trpc.io/docs/api-handler
export default trpcNext.createNextApiHandler({
router: appRouter,
createContext: () => ({}),
});

108
pages/category/create.tsx
View File

@@ -1,72 +1,64 @@
import axios, { AxiosResponse } from "axios"; import { useEffect, useState } from 'react';
import { useRouter } from "next/router";
import nProgress from "nprogress";
import { FormEvent, useMemo, useState } from "react";
import FormLayout from "../../components/FormLayout"; import nProgress from 'nprogress';
import TextBox from "../../components/TextBox"; import axios, { AxiosResponse } from 'axios';
import { Category } from "../../types"; import FormLayout from '../../components/FormLayout';
import { HandleAxiosError } from "../../utils/front"; import TextBox from '../../components/TextBox';
import { trpc } from "../../utils/trpc";
import styles from "../../styles/create.module.scss"; import styles from '../../styles/create.module.scss';
import { HandleAxiosError } from '../../utils/front';
import { useRouter } from 'next/router';
function CreateCategory() { function CreateCategory() {
const hello = trpc.hello.useQuery({ text: "client" }); const info = useRouter().query?.info as string;
const info = useRouter().query?.info as string; const [name, setName] = useState<string>('');
const [name, setName] = useState<string>("");
const [error, setError] = useState<string | undefined>(); const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | undefined>(); const [success, setSuccess] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(false); const [canSubmit, setCanSubmit] = useState<boolean>(false);
const canSubmit = useMemo<boolean>( useEffect(() => setCanSubmit(name.length !== 0), [name]);
() => name.length !== 0 && !loading,
[loading, name.length]
);
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
setSuccess(undefined);
setError(undefined);
setLoading(true);
nProgress.start();
try { const handleSubmit = async (event) => {
const payload = { name }; event.preventDefault();
const { data }: AxiosResponse<{ success: string; category: Category }> = setSuccess(null);
await axios.post("/api/category/create", payload); setError(null);
setCanSubmit(false);
nProgress.start();
console.log(data); try {
setSuccess(data.success); const payload = { name };
} catch (error) { const { data }: AxiosResponse<any> = await axios.post('/api/category/create', payload);
setError(HandleAxiosError(error)); setSuccess(data?.success || 'Categorie créée avec succès');
} finally { setCanSubmit(false);
setLoading(false); } catch (error) {
nProgress.done(); setError(HandleAxiosError(error));
setCanSubmit(true);
} finally {
nProgress.done();
}
} }
};
return ( return (<>
<FormLayout <FormLayout
title="Créer une catégorie" title='Créer une catégorie'
errorMessage={error} errorMessage={error}
successMessage={success} successMessage={success}
infoMessage={info} infoMessage={info}
canSubmit={canSubmit} canSubmit={canSubmit}
handleSubmit={handleSubmit} handleSubmit={handleSubmit}
> >
<TextBox <TextBox
name="name" name='name'
label="Nom de la catégorie" label='Nom de la catégorie'
onChangeCallback={(value) => setName(value)} onChangeCallback={(value) => setName(value)}
value={name} value={name}
fieldClass={styles["input-field"]} fieldClass={styles['input-field']}
placeholder="Nom..." placeholder='Nom...'
/> />
{JSON.stringify(hello)} </FormLayout>
</FormLayout> </>);
);
} }
CreateCategory.authRequired = true; CreateCategory.authRequired = true;

95
pages/index.tsx
View File

@@ -13,64 +13,67 @@ import { prisma } from "../utils/back";
import { config } from "../config"; import { config } from "../config";
interface HomeProps { interface HomeProps {
categories: Category[]; categories: Category[];
favorites: Link[]; favorites: Link[];
} }
function Home({ categories, favorites }: HomeProps) { function Home({ categories, favorites }: HomeProps) {
const { data } = useSession({ required: true }); const { data } = useSession({ required: true });
const [categoryActive, setCategoryActive] = useState<Category | null>( const [categoryActive, setCategoryActive] = useState<Category | null>(
categories?.[0] categories?.[0]
); );
const handleSelectCategory = (category: Category) => const handleSelectCategory = (category: Category) =>
setCategoryActive(category); setCategoryActive(category);
return ( return (
<> <>
<Head> <Head>
<title>{config.siteName}</title> <title>{config.siteName}</title>
</Head> </Head>
<div className="App"> <div className="App">
<Menu <Menu
categories={categories} categories={categories}
favorites={favorites} favorites={favorites}
handleSelectCategory={handleSelectCategory} handleSelectCategory={handleSelectCategory}
categoryActive={categoryActive} categoryActive={categoryActive}
session={data} session={data}
/> />
<Links category={categoryActive} /> <Links category={categoryActive} />
</div> </div>
</> </>
); );
} }
export async function getServerSideProps() { export async function getServerSideProps() {
const categoriesDB = await prisma.category.findMany({ const categoriesDB = await prisma.category.findMany({
include: { links: true }, include: { links: true },
}); });
const favorites = [] as Link[]; const favorites = [] as Link[];
const categories = categoriesDB.map((categoryDB) => { const categories = categoriesDB.map((categoryDB) => {
const category = BuildCategory(categoryDB); const category = BuildCategory(categoryDB);
category.links.map((link) => (link.favorite ? favorites.push(link) : null)); category.links.map((link) =>
return category; link.favorite ? favorites.push(link) : null
}); );
return category;
});
if (categories.length === 0) {
return {
redirect: {
destination:
"/category/create?info=Veuillez créer une catégorie",
},
};
}
if (categories.length === 0) {
return { return {
redirect: { props: {
destination: "/category/create", categories: JSON.parse(JSON.stringify(categories)),
}, favorites: JSON.parse(JSON.stringify(favorites)),
},
}; };
}
return {
props: {
categories: JSON.parse(JSON.stringify(categories)),
favorites: JSON.parse(JSON.stringify(favorites)),
},
};
} }
Home.authRequired = true; Home.authRequired = true;

19
server/routers/_app.ts
View File

@@ -1,19 +0,0 @@
import { z } from "zod";
import { procedure, router } from "../trpc";
export const appRouter = router({
hello: procedure
.input(
z.object({
text: z.string(),
})
)
.query(({ input }) => {
return {
greeting: `hello ${input.text}`,
};
}),
});
// export type definition of API
export type AppRouter = typeof appRouter;

9
server/trpc.ts
View File

@@ -1,9 +0,0 @@
import { initTRPC } from "@trpc/server";
// Avoid exporting the entire t-object
// since it's not very descriptive.
// For instance, the use of a t variable
// is common in i18n libraries.
const t = initTRPC.create();
// Base router and procedure helpers
export const router = t.router;
export const procedure = t.procedure;

19
tsconfig.json
View File

@@ -1,5 +1,5 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es5", "target": "es5",
"lib": [ "lib": [
"dom", "dom",
@@ -8,7 +8,7 @@
], ],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"strict": true, "strict": false,
"forceConsistentCasingInFileNames": true, "forceConsistentCasingInFileNames": true,
"noEmit": true, "noEmit": true,
"esModuleInterop": true, "esModuleInterop": true,
@@ -18,13 +18,14 @@
"isolatedModules": true, "isolatedModules": true,
"jsx": "preserve", "jsx": "preserve",
"incremental": true "incremental": true
}, },
"include": [ "include": [
"next-env.d.ts", "next-env.d.ts",
"**/*.ts", "**/*.ts",
"**/*.tsx" "**/*.tsx"
], ],
"exclude": [ "exclude": [
"node_modules" "node_modules"
] ]
} }

21
utils/trpc.ts
View File

@@ -1,21 +0,0 @@
import { httpBatchLink } from "@trpc/client";
import { createTRPCNext } from "@trpc/next";
import type { AppRouter } from "../server/routers/_app";
const getBaseUrl = () =>
typeof window !== "undefined"
? ""
: `http://localhost:${process.env.PORT ?? 3000}`;
export const trpc = createTRPCNext<AppRouter>({
config({ ctx }) {
return {
links: [
httpBatchLink({
url: `${getBaseUrl()}/api/trpc`,
}),
],
};
},
ssr: false,
});