Code Monkey home page Code Monkey logo

devnotes's Introduction

Notes taken on my developer journey

WinterSunset95

import { DynamoDBClient, UpdateItemCommand } from '@aws-sdk/client-dynamodb'
import { DynamoDBDocumentClient } from '@aws-sdk/lib-dynamodb'

const dbClient = new DynamoDBClient()
const docClient = DynamoDBDocumentClient.from(dbClient)

const command = new UpdateItemCommand({
    TableName: 'my-table',
    Key: { id: { S: 'my-id' } },
    UpdateExpression: 'SET myList = list_append(myList, :myValue)',
    ExpressionAttributeNames: { 
        'myList': { L: [{ S: 'value1' }] }
    },
})

await docClient.send(command)
import NextAuth from 'next-auth'
import CognitoProvider from 'next-auth/providers/cognito'

const handler = NextAuth({
    providers: [
        CognitoProvider({
            clientId: process.env.COGNITO_CLIENT_ID,    // Get from aws
            clientSecret: process.env.COGNITO_CLIENT_SECRET,    // Get from aws
            issuer: process.env.COGNITO_ISSUER,    // Get from aws
        }),
    ]
})

Environment variables NextAuth uses:

  • NEXTAUTH_URL - Base URL of the site (e.g. https://example.com for prod or http://localhost:3000 for dev)
  • NEXTAUTH_SECRET - Not needed for development, but required for production On client components, use useSession hook to get session data. To invoke the login, use signIn method from next-auth/client. example.tsx
import { signIn } from 'next-auth/client'

export default function SignIn() {
    return (
        <button onClick={() => signIn()}>Sign in</button>
    )
}
  • Use next-auth on a server page If you already have the /api/auth/[...nextauth]/route.ts file, you can use the getServerSession method from next-auth to get the session data. /admin.tsx
import { getServerSession } from 'next-auth/server'

export async function Page() {
    const session = await getServerSession()
    if (!session) {
        return {
            redirect: {
                destination: '/',
                permanent: false,
            },
        }
    }
    return {
        <div>
            <h1>Admin page</h1>
        </div>
    }
}
const command = new GetCommand({
    TableName: 'my-table',
    Key: { id: { S: 'my-id' } },
})
  • Handle image uploads with Next.js Recieve the file, and then convert it to a buffer/blob
const handleImageChange = (e) => {
    const file = e.target.files[0]
    const url = URL.createObjectURL(file)
}

You can then use the url to display the image on the client side.

import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'
import { fromIni } from '@aws-sdk/credential-provider-ini'
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'

export const getPresignedUrl = async (key: string) => {
    const client = new S3Client({
        credentials: fromIni(),
        region: 'us-west-2',
    })
    const command = new PutObjectCommand({
        Bucket: 'my-bucket',
        Key: key,
    })
    return getSignedUrl(client, command, { expiresIn: 3600 })
}

Use this from the client javascript

import { getPresignedUrl } from 'whateverfile'
const url = await getPresignedUrl('my-key')

Then use the url to upload the file to S3

const response = await fetch(url, {
    method: 'POST',
    headers: {
        'Content-Length': file.size,
    },
    body: JSON.stringify
})
  • [ADD a new item on to a dynamodb map]
const query = new UpdateItemCommand({
    TableName: "Table",
    Key: {
        "id": { S: "my-id" }
    },
    UpdateExpression: "ADD myMap.#key :value",
    ExpressionAttributeNames: {
        "#key": "new-key"
    },
    ExpressionAttributeValues: {
        ":value": { S: "new-value" }
    }
})

devnotes's People

Contributors

wintersunset95 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.