@next-k8s/client 1.0.9

package/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+.next

package/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

package/CHANGELOG.md

@@ -0,0 +1,72 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [1.0.9](https://github.com/mathiscode/next-k8s-boilerplate/compare/@next-k8s/client@1.0.8...@next-k8s/client@1.0.9) (2022-07-06)
+
+**Note:** Version bump only for package @next-k8s/client
+
+
+
+
+
+## 1.0.8 (2022-07-06)
+
+**Note:** Version bump only for package @next-k8s/client
+
+
+
+
+
+## 1.0.7 (2022-07-06)
+
+**Note:** Version bump only for package @next-k8s/client
+
+
+
+
+
+## 1.0.6 (2022-07-06)
+
+**Note:** Version bump only for package @next-k8s/client
+
+
+
+
+
+## 1.0.5 (2022-07-05)
+
+**Note:** Version bump only for package @next-k8s/client
+
+
+
+
+
+## 1.0.4 (2022-07-05)
+
+**Note:** Version bump only for package @next-k8s/client
+
+
+
+
+
+## 1.0.3 (2022-07-05)
+
+**Note:** Version bump only for package @next-k8s/client
+
+
+
+
+
+## 1.0.2 (2022-07-05)
+
+**Note:** Version bump only for package @next-k8s/client
+
+
+
+
+
+## 1.0.1 (2022-07-05)
+
+**Note:** Version bump only for package @next-k8s/client

package/Dockerfile

@@ -0,0 +1,8 @@
+FROM node:alpine
+
+WORKDIR /app
+COPY package.json .
+RUN npm install
+COPY . .
+
+CMD ["npm", "run", "dev"]

package/README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

package/api/client.ts

@@ -0,0 +1,25 @@
+import type { IncomingMessage } from 'http'
+
+interface APIClient {
+  baseURL: String;
+  options: Object;
+}
+
+class APIClient {
+  constructor ({ req, ingress }: { req?: IncomingMessage, ingress?: String }) {
+    const isServer = typeof window === 'undefined'
+    const baseURL = isServer ? ingress || 'http://ingress-nginx-controller.ingress-nginx.svc.cluster.local' : ''
+    const headers = isServer && req ? req.headers as any : {}
+    const options = isServer ? { headers } : {}
+
+    this.baseURL = baseURL || ''
+    this.options = options || {}
+  }
+
+  async request (path: String) {
+    const response = await fetch(`${this.baseURL}/api${path}`, this.options)
+    return await response.json()
+  }
+}
+
+export default APIClient

package/components/Header/Header.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link'
+import { useContext } from 'react'
+
+import Container from 'react-bootstrap/Container'
+import Nav from 'react-bootstrap/Nav'
+import Navbar from 'react-bootstrap/Navbar'
+
+import RootContext from '../../context/root'
+
+const Header = () => {
+  const { user } = useContext(RootContext)
+
+  return (
+    <Navbar sticky='top' bg='dark' variant='dark' expand='lg'>
+      <Container fluid>
+        <Link href='/' passHref><Navbar.Brand>Next.K8S Boilerplate</Navbar.Brand></Link>
+
+        <Navbar.Toggle aria-controls='top-nav' />
+        <Navbar.Collapse id='top-nav'>
+          <Nav fill className='ms-auto'>
+            {
+              !user &&
+                <>
+                  <Link href='/users/signin' passHref><Nav.Link>Sign In</Nav.Link></Link>
+                  <Link href='/users/signup' passHref><Nav.Link>Sign Up</Nav.Link></Link>
+                </>
+            }
+
+            {
+              user &&
+                <>
+                  <Link href='/users/signout' passHref><Nav.Link>Sign Out</Nav.Link></Link>
+                </>
+            }
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  )
+}
+
+export default Header

package/context/root.ts

@@ -0,0 +1,12 @@
+import { createContext } from 'react'
+
+interface RootContext {
+  user?: Object;
+  setContext: Function;
+}
+
+const RootContext = createContext<RootContext>({
+  setContext: () => {}
+})
+
+export default RootContext

package/hooks/use-request.ts

@@ -0,0 +1,45 @@
+import { useState } from 'react'
+
+export interface UseRequestHook {
+  doRequest: Function;
+  errors: Array<Object>;
+}
+
+export interface RequestError {
+  code: Number,
+  message: String
+}
+
+export interface RequestOptions {
+  url: RequestInfo | URL,
+  method?: String,
+  body?: Object,
+  customHeaders?: Object,
+  onSuccess?: Function
+}
+
+const defaultHeaders = { 'Content-Type': 'application/json' }
+
+const useRequest = ({ url, method, body, customHeaders, onSuccess }: RequestOptions) => {
+  const [errors, setErrors] = useState<Array<RequestError>>([])
+
+  const doRequest = async () => {
+    const headers = customHeaders ? { ...defaultHeaders, ...customHeaders } : defaultHeaders
+    const options: any = { headers, method: method?.toUpperCase() || 'GET' }
+    if (body) options.body = JSON.stringify(body)
+
+    const response = await fetch(url, options)
+    const data = await response.json()
+  
+    let errorsData: Array<RequestError> = []
+    if (data.error) errorsData = data.error?.data?.map?.((err: any) => ({ code: response.status, message: err.msg })) || [{ code: response.status, message: data.error.message }]
+    setErrors(errorsData)
+
+    if (errorsData.length === 0 && onSuccess) onSuccess(data)
+    return data
+  }
+
+  return { doRequest, errors }
+}
+
+export default useRequest

package/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package/next.config.js

@@ -0,0 +1,24 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+
+  sassOptions: {
+    additionalData: `@import "styles/_variables.scss";`
+  },
+
+  webpackDevMiddleware: config => {
+    config.watchOptions.poll = 300
+    return config
+  },
+
+  // async rewrites () {
+  //   return [
+  //     {
+  //       source: '/api/:path*',
+  //       destination: 'http://skaffold.local/:path*'
+  //     }
+  //   ]
+  // }
+}
+
+module.exports = nextConfig

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@next-k8s/client",
+  "version": "1.0.9",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "bootstrap": "^5.1.3",
+    "next": "12.1.6",
+    "react": "18.1.0",
+    "react-bootstrap": "^2.4.0",
+    "react-dom": "18.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "17.0.42",
+    "@types/react": "18.0.12",
+    "@types/react-dom": "18.0.5",
+    "bootswatch": "^5.1.3",
+    "eslint": "8.17.0",
+    "eslint-config-next": "12.1.6",
+    "sass": "^1.52.3",
+    "typescript": "4.7.3"
+  },
+  "gitHead": "e28ae26195b5a105e974ff366741832500b17b31"
+}

package/pages/_app.tsx

@@ -0,0 +1,50 @@
+import type { NextComponentType, NextPageContext } from 'next'
+import type { AppProps } from 'next/app'
+import type { User } from '../types/user'
+
+import Head from 'next/head'
+import { useState } from 'react'
+
+import '../styles/globals.scss'
+import RootContext from '../context/root'
+import ApiClient from '../api/client'
+import Header from '../components/Header/Header'
+
+interface AppComponentProps extends AppProps {
+  user: User;
+}
+
+interface AppContext {
+  Component: NextComponentType;
+  ctx: NextPageContext;
+}
+
+function AppComponent({ Component, pageProps, user }: AppComponentProps) {
+  const [context, setContext] = useState({ user })
+
+  return (
+    <RootContext.Provider value={{ ...context, setContext }}>
+      <Head>
+        <title>Next.K8S Boilerplate</title>
+        <meta name='description' content='Kubernetes + NextJS Boilerplate Application' />
+        <link rel='icon' href='/favicon.ico' />
+      </Head>
+
+      <Header />
+      <Component {...pageProps} />
+    </RootContext.Provider>
+  )
+}
+
+AppComponent.getInitialProps = async ({ Component, ctx }: AppContext) => {
+  const pageProps = Component.getInitialProps?.(ctx) || {}
+  const api = new ApiClient({ req: ctx.req })
+  try {
+    const { user } = await api.request('/users/current')
+    return { pageProps, user }
+  } catch {
+    return { pageProps }
+  }
+}
+
+export default AppComponent

package/pages/index.tsx

@@ -0,0 +1,22 @@
+import type { NextPage } from 'next'
+
+import { useContext } from 'react'
+
+import Container from 'react-bootstrap/Container'
+
+import RootContext from '../context/root'
+
+const Home: NextPage = () => {
+  const { user } = useContext(RootContext)
+
+  return (
+    <Container>
+      <main>
+        <h1>K8S Ticketing</h1>
+        <pre>{JSON.stringify(user, null, 2)}</pre>
+      </main>
+    </Container>
+  )
+}
+
+export default Home

package/pages/users/signin.tsx

@@ -0,0 +1,67 @@
+import type { NextPage } from 'next'
+import type { ChangeEvent, MouseEvent } from 'react'
+import type { User } from '../../types/user'
+
+import { useContext, useEffect, useState } from 'react'
+import Router from 'next/router'
+
+import Alert from 'react-bootstrap/Alert'
+import Button from 'react-bootstrap/Button'
+import Container from 'react-bootstrap/Container'
+import Form from 'react-bootstrap/Form'
+
+import RootContext from '../../context/root'
+import useRequest, { UseRequestHook } from '../../hooks/use-request'
+
+const AuthSignin: NextPage = () => {
+  const { user, setContext } = useContext(RootContext)
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const { doRequest, errors }: UseRequestHook = useRequest({
+    url: '/api/users/signin',
+    method: 'POST',
+    body: { email, password },
+    onSuccess: ({ user }: { user: User }) => {
+      setContext((ctx: RootContext) => ({ ...ctx, user }))
+      Router.push('/')
+    }
+  })
+
+  const signup = async (e: MouseEvent) => {
+    e.preventDefault()
+    if (email === '' || password === '') return
+    setLoading(true)
+    await doRequest()
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    if (user) Router.push('/')
+  }, [user])
+
+  return (
+    <Container>
+      <h1>Signin</h1>
+      <Form>
+        <Form.Group className='mb-3' controlId='email'>
+          <Form.Label>Email Address</Form.Label>
+          <Form.Control type='email' value={email} onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} placeholder='Enter your email address' />
+        </Form.Group>
+
+        <Form.Group className='mb-3' controlId='password'>
+          <Form.Label>Password</Form.Label>
+          <Form.Control type='password' value={password} onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} placeholder='Enter your password' />
+        </Form.Group>
+
+        {errors.map((err: any, index: number) => <Alert key={index} variant='danger'>{err.message}</Alert>)}
+
+        <Button variant='primary' disabled={loading} onClick={e => signup(e)}>Signin</Button>
+      </Form>
+    </Container>
+  )
+}
+
+export default AuthSignin

package/pages/users/signout.tsx

@@ -0,0 +1,31 @@
+import type { NextPage } from 'next'
+
+import Router from 'next/router'
+import { useContext, useEffect } from 'react'
+
+import Container from 'react-bootstrap/Container'
+
+import RootContext from '../../context/root'
+import useRequest, { UseRequestHook } from '../../hooks/use-request'
+
+const AuthSignout: NextPage = () => {
+  const { setContext } = useContext(RootContext)
+
+  const { doRequest }: UseRequestHook = useRequest({
+    url: '/api/users/signout',
+    onSuccess: () => {
+      setContext((ctx: RootContext) => ({ ...ctx, user: null }))
+      Router.push('/')
+    }
+  })
+
+  useEffect(() => { doRequest() }, []) // eslint-disable-line
+
+  return (
+    <Container>
+      <h1>Signing you out, one moment...</h1>
+    </Container>
+  )
+}
+
+export default AuthSignout

package/pages/users/signup.tsx

@@ -0,0 +1,67 @@
+import type { NextPage } from 'next'
+import type { ChangeEvent, MouseEvent } from 'react'
+import type { User } from '../../types/user'
+
+import { useContext, useEffect, useState } from 'react'
+import Router from 'next/router'
+
+import Alert from 'react-bootstrap/Alert'
+import Button from 'react-bootstrap/Button'
+import Container from 'react-bootstrap/Container'
+import Form from 'react-bootstrap/Form'
+
+import RootContext from '../../context/root'
+import useRequest, { UseRequestHook } from '../../hooks/use-request'
+
+const AuthSignup: NextPage = () => {
+  const { user, setContext } = useContext(RootContext)
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const { doRequest, errors }: UseRequestHook = useRequest({
+    url: '/api/users/signup',
+    method: 'POST',
+    body: { email, password },
+    onSuccess: ({ user }: { user: User }) => {
+      setContext((ctx: RootContext) => ({ ...ctx, user }))
+      Router.push('/')
+    }
+  })
+
+  const signup = async (e: MouseEvent) => {
+    e.preventDefault()
+    if (email === '' || password === '') return
+    setLoading(true)
+    await doRequest()
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    if (user) Router.push('/')
+  }, [user])
+
+  return (
+    <Container>
+      <h1>Signup</h1>
+      <Form>
+        <Form.Group className='mb-3' controlId='email'>
+          <Form.Label>Email Address</Form.Label>
+          <Form.Control type='email' value={email} onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)} placeholder='Enter your email address' />
+        </Form.Group>
+
+        <Form.Group className='mb-3' controlId='password'>
+          <Form.Label>Password</Form.Label>
+          <Form.Control type='password' value={password} onChange={(e: ChangeEvent<HTMLInputElement>) => setPassword(e.target.value)} placeholder='Enter your password' />
+        </Form.Group>
+
+        {errors.map((err: any, index: number) => <Alert key={index} variant='danger'>{err.message}</Alert>)}
+
+        <Button variant='primary' disabled={loading} onClick={e => signup(e)}>Signup</Button>
+      </Form>
+    </Container>
+  )
+}
+
+export default AuthSignup