Merge pull request #24 from vevcom/refactor/typescript

Refactor/typescript

.github/workflows/build.yml

@@ -13,6 +13,7 @@ jobs:
     - name: checkout
       uses: actions/checkout@v3
     - name: build
-      run: docker-compose build --env-file default.env
+      run: docker-compose --env-file default.env build
     - name: up
-      run: docker-compose up -d --env-file default.env
+      run: docker-compose --env-file default.env up -d
+

package.json

@@ -30,6 +30,12 @@
   },
   "devDependencies": {
     "@prisma/client": "^5.4.2",
-    "prisma": "^5.4.2"
+    "@types/google-map-react": "^2.1.9",
+    "@types/node": "^20.8.9",
+    "@types/react": "^18.2.33",
+    "@types/react-dom": "^18.2.14",
+    "@types/uuid": "^9.0.6",
+    "prisma": "^5.4.2",
+    "typescript": "^5.2.2"
   }
 }

src/app/(auth)/login/page.js → src/app/(auth)/login/page.tsx

@@ -1,8 +1,8 @@
-import Input from '@/app/components/Input/Input'
+import FormInput from '@/components/FormInput/FormInput'
 import styles from './page.module.scss'
 import magiskHatt from "@/images/magisk_hatt.png"
 import Image from 'next/image'
-import PrimaryButton from '@/app/components/PrimaryButton/PrimaryButton'
+import PrimaryButton from '@/components/PrimaryButton/PrimaryButton'
 import CsrfToken from '../CsrfToken'
 
 export default async function LogIn() {
@@ -11,13 +11,13 @@ export default async function LogIn() {
         <div className={styles.card}>
             <form className={styles.form} method="post" action="/api/auth/callback/credentials">
                 <CsrfToken />
-                <Input name="username" label="E-post"/>
-                <Input name="password" label="Passord" type="password"/>
+                <FormInput name="username" label="E-post"/>
+                <FormInput name="password" label="Passord" type="password"/>
 
                 <PrimaryButton text="Logg inn"></PrimaryButton>
             </form>
             <div className={styles.image}>
-                <Image width={200} src={magiskHatt} />
+                <Image alt='en kappemann sin hatt' width={200} src={magiskHatt} />
             </div>
         </div>
     </div>

src/app/(auth)/logout/page.js → src/app/(auth)/logout/page.tsx

@@ -3,7 +3,7 @@ import { getCsrfToken } from "next-auth/react"
 import styles from './page.module.scss'
 import magiskHatt from "@/images/magisk_hatt.png"
 import Image from 'next/image'
-import PrimaryButton from '@/app/components/PrimaryButton/PrimaryButton'
+import PrimaryButton from '@/components/PrimaryButton/PrimaryButton'
 import CsrfToken from '../CsrfToken'
 
 export default async function LogOut() {
@@ -17,7 +17,7 @@ export default async function LogOut() {
                 <PrimaryButton text="Logg ut"></PrimaryButton>
             </form>
             <div className={styles.image}>
-                <Image width={200} src={magiskHatt} />
+                <Image alt='en kappemann sin hatt' width={200} src={magiskHatt} />
             </div>
         </div>
     </div>

src/app/(home)/Section.js → src/app/(home)/Section.tsx

@@ -1,8 +1,18 @@
-import Image from 'next/image'
+import Image, { StaticImageData } from 'next/image'
 import Link from 'next/link'
 import styles from './Section.module.scss'
 
-function Section({children, img, name, lesMer, right, imgWidth, id}) {
+type PropTypes = {
+    children: React.ReactNode,
+    img: StaticImageData,
+    name: string,
+    lesMer: string,
+    right?: boolean,
+    imgWidth: number,
+    id?: string,
+}
+
+function Section({children, img, name, lesMer, right, imgWidth, id}: PropTypes) {
     const alt = "image of " + name
     const imgContainer = (
         <div style={{width: imgWidth}} className={styles.imgContainer}>

src/app/(home)/page.js → src/app/(home)/page.tsx

@@ -68,7 +68,6 @@ export default function Home() {
       <div className={`${styles.part} ${styles.taktlause}`}>
         <div className={styles.emptyPart} />
         <GoogleMap height={500} location = {{
-          address: '1600 Amphitheatre Parkway, Mountain View, california.',
           lat: 37.42216,
           lng: -122.08427,
         }}/>

src/app/api/users/[id]/route.ts

@@ -0,0 +1,20 @@
+import prisma from "@/prisma"
+import { NextRequest, NextResponse } from "next/server"
+
+type ParamType = {
+    params: {
+        id: number
+    }
+}
+
+export async function GET(request: NextRequest, { params }: ParamType) {
+    const user = await prisma.user.findUnique({
+        where: {
+            id: Number(params.id)
+        }
+    })
+    if (!user) return new NextResponse("user not found", {
+        status: 404,
+    })
+    return NextResponse.json(user)
+}

src/app/api/users/route.js → src/app/api/users/route.ts

@@ -1,20 +1,21 @@
 import { Prisma } from '@prisma/client'
 
 import prisma from "@/prisma"
+import { NextRequest, NextResponse } from 'next/server'
 
 export async function GET() {
     const users = await prisma.user.findMany()
 
-    return Response.json(users)
+    return NextResponse.json(users)
 }
 
-export async function POST(req) {  
+export async function POST(req: NextRequest) {  
     const body = await req.json()
 
     const { username, password, email, firstname, lastname } = body;
 
     if (!username || !password || !email || !firstname || !lastname) {
-        return Response.json({}, { status: 400 })
+        return NextResponse.json({}, { status: 400 })
     }
 
     try {
@@ -28,17 +29,17 @@ export async function POST(req) {
             }
         })
 
-        return Response.json(user)
+        return NextResponse.json(user)
     } catch (error) {  
         // synes dette er en veldig stygg måte å håndtere feil på
         if (
             error instanceof Prisma.PrismaClientKnownRequestError &&
             error.code === 'P2002'
         ) 
         {
-            return Response.json({}, { status: 409 })
+            return NextResponse.json({}, { status: 409 })
         }   
 
-        return Response.json({}, { status: 500 })
+        return NextResponse.json({}, { status: 500 })
     }   
 }

src/app/components/Checkbox/Checkbox.js → src/app/components/Checkbox/Checkbox.tsx

@@ -1,8 +1,11 @@
 import { v4 as uuid } from 'uuid'
 import styles from "./Checkbox.module.scss";
 
-function Checkbox({ label }) {
+type PropTypes = {
+    label: string
+}
 
+function Checkbox({ label }: PropTypes) {
     const id = "id_input_" + uuid();
 
     return <div className={styles.Checkbox}>

src/app/components/FormInput/FormInput.tsx

@@ -0,0 +1,23 @@
+import { v4 as uuid } from 'uuid'
+import styles from "./FormInput.module.scss"
+
+type PropTypes = {
+    label?: string,
+    type?: string,
+    id?: string,
+    name: string,
+}
+
+function FormInput({label, type, id, name} : PropTypes) {
+    label ??=  ''
+    type  ??= (type  !== undefined) ? type  : 'text'
+    id    ??= "id_input_" + uuid()
+
+    return <div className={styles.Input}>
+        <input type={type} id={id} name={name} required/>
+        <label htmlFor={id}>{label}</label>
+    </div>
+
+}
+
+export default FormInput

src/app/components/GoogleMap/GoogleMap.js → src/app/components/GoogleMap/GoogleMap.tsx

@@ -1,16 +1,20 @@
 'use client'
-
 import styles from './GoogleMap.module.scss'
-
 import GoogleMapReact from "google-map-react";
+import { Coords } from 'google-map-react';
+
+type PropTypes = {
+    location: Coords,
+    height: number,
+}
 
-function GoogleMap({ location, height }) {
+function GoogleMap({ location, height } : PropTypes) {
     return (
         <div style={{height: height+'px'}} className={styles.GoogleMap}>
             <GoogleMapReact 
                 defaultCenter={location} 
                 defaultZoom={15}  
-                bootstrapURLKeys={{ key: process.env.GOOGLE_MAPS_API_KEY }}
+                bootstrapURLKeys={{ key: process.env.GOOGLE_MAPS_API_KEY ?? 'no_key' }}
             />
         </div>
     )