Merge pull request #14 from timhabermaas/move-frontend-to-nextjs

Frontend -> Next.js/React

app/assets/stylesheets/_base.css.scss

@@ -1,7 +1,10 @@
 body {
   min-width: $width + 32px;
   font-size: 16px;
-  font-family: Verdana, Arial, Helvetica, sans-serif
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 a, a:visited {

app/assets/stylesheets/_content.css.scss

@@ -1,4 +1,6 @@
 #content, div.fancybox-inner {
+  flex: 1 1 0%;
+
   color: white;
   background: #5C7DA0 image-url("content.gif") repeat-x;
   .center {

app/assets/stylesheets/_navigation.css.scss

@@ -1,4 +1,6 @@
 nav.main {
+  flex: none;
+
   border-top: 1px solid $yellow;
   background: image-url("navigation.gif") repeat-x;
   overflow: hidden;
@@ -29,4 +31,4 @@ nav.main {
 }
 nav.main:after {
   @include clear-fix;
-}
+}

app/controllers/sessions_controller.rb

@@ -17,6 +17,15 @@ def create
     end
   end
 
+  def show
+    if self.current_user
+      payload = { :user_id => current_user.id, :exp => Time.now.to_i + 30 * 3600 }
+      render :json => { :user_id => self.current_user, :token => JWT.encode(payload, ENV.fetch("HMAC_SECRET"), "HS256")  }
+    else
+      render :json => { :error => "unauthorized" }, :status => :not_found
+    end
+  end
+
   def destroy
     self.current_user = nil
     flash[:notice] = "You are now logged out."

app/helpers/url_helper.rb

@@ -12,7 +12,7 @@ def subnavigation_path(puzzle)
   end
 
   def csv_download_path(user_id, puzzle_id)
-    payload = { :download_csv_for => current_user.id, :exp => Time.now.to_i + 30 * 3600 }
+    payload = { :user_id => current_user.id, :exp => Time.now.to_i + 30 * 3600 }
     token = JWT.encode payload, ENV.fetch("HMAC_SECRET"), "HS256"
     "/api/singles.csv?user_id=#{user_id}&puzzle_id=#{puzzle_id}&token=#{token}"
   end

app/views/users/new.html.erb

@@ -1,6 +1,6 @@
 <h1>Register</h1>
 
-<%= semantic_form_for @user do |form| %>
+<%= semantic_form_for @user, {url: register_path} do |form| %>
   <%= form.inputs do %>
     <%= form.input :name %>
     <%= form.input :email %>

config/routes.rb

@@ -48,7 +48,8 @@
   resource :session
   match 'login' => 'sessions#new', :as => 'login'
   match 'logout' => 'sessions#destroy', :as => 'logout'
-  match 'register' => 'users#new', :as => 'register'
+  match 'register' => 'users#new', :as => 'register', via: [:get]
+  match 'register' => 'users#create', :as => 'register', via: [:post]
 
   match '*path' => "errors#not_found"
 end

deploy.sh

@@ -2,5 +2,5 @@
 set -e
 
 env DOCKER_BUILDKIT=1 docker-compose -f docker-compose.yml -f docker-compose.prod.yml build web
-docker-compose -f docker-compose.yml -f docker-compose.prod.yml run web bundle exec rake assets:precompile
+docker-compose -f docker-compose.yml -f docker-compose.prod.yml run --rm web bundle exec rake assets:precompile
 env DOCKER_BUILDKIT=1 docker-compose -f docker-compose.yml -f docker-compose.prod.yml build

docker-compose.override.yml

@@ -1,18 +1,39 @@
 version: "3.7"
 services:
+  frontend:
+    build:
+      target: dev-runner
+    command: ["yarn", "dev", "-p", "4000"]
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules/
+    ports:
+      - "4000:4000"
   nginx:
     volumes:
       - ./public:/home/assets
       - ./nginx/empty_ssl.conf:/etc/nginx/ssl.conf
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
     ports:
       - "443:443"
       - "8080:80"
   records:
     ports:
       - "8081:8081"
+  records-build:
+    build:
+      context: ./records
+      dockerfile: Dockerfile
+      target: builder
+    depends_on:
+      - db
+    volumes:
+      - ./records:/home/rust/src/records
   web:
     ports:
       - "3000:3000"
+    environment:
+      RAILS_ENV: development
   db:
     ports:
       - "5432:5432"

docker-compose.prod.yml

@@ -1,5 +1,8 @@
 version: "3.7"
 services:
+  frontend:
+    build:
+      target: prod-runner
   nginx:
     volumes:
       - /etc/letsencrypt:/etc/letsencrypt

docker-compose.yml

@@ -5,6 +5,12 @@ services:
     restart: always
     volumes:
       - postgres-volume:/var/lib/postgresql/data
+  frontend:
+    restart: always
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    image: timhabermaas/cubemania_frontend
   nginx:
     restart: always
     build:
@@ -16,6 +22,7 @@ services:
       - records
       - web
       - backup
+      - frontend
   records:
     build:
       context: ./records
@@ -29,15 +36,6 @@ services:
       DATABASE_URL: postgresql://postgres@db/cubemania_production
     depends_on:
       - db
-  records-build:
-    build:
-      context: ./records
-      dockerfile: Dockerfile
-      target: builder
-    depends_on:
-      - db
-    volumes:
-      - ./records:/home/rust/src/records
   web:
     build: .
     image: timhabermaas/cubemania_rails

frontend/.dockerignore

@@ -0,0 +1 @@
+node_modules

frontend/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

frontend/Dockerfile

@@ -0,0 +1,53 @@
+# Install dependencies only when needed
+FROM node:alpine AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+FROM node:alpine AS dev-runner
+WORKDIR /app
+
+COPY --from=deps /app/node_modules ./node_modules
+
+EXPOSE 4000
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD ["yarn", "run", "dev", "-p", "4000"]
+
+# Rebuild the source code only when needed
+FROM node:alpine AS prod-builder
+WORKDIR /app
+COPY . .
+COPY --from=deps /app/node_modules ./node_modules
+RUN yarn build && yarn install --production --ignore-scripts --prefer-offline
+
+
+
+# Production image, copy all the files and run next
+FROM node:alpine AS prod-runner
+WORKDIR /app
+
+ENV NODE_ENV production
+
+# You only need to copy next.config.js if you are NOT using the default configuration
+# COPY --from=builder /app/next.config.js ./
+COPY --from=prod-builder /app/public ./public
+COPY --from=prod-builder /app/.next ./.next
+COPY --from=prod-builder /app/node_modules ./node_modules
+COPY --from=prod-builder /app/package.json ./package.json
+
+
+EXPOSE 4000
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry.
+ENV NEXT_TELEMETRY_DISABLED 1
+
+CMD ["yarn", "start", "-p", "4000"]

frontend/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.js`. 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.js`.
+
+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.

frontend/commons/path.ts

@@ -0,0 +1,15 @@
+export function userPath(slug: string): string {
+  return `/users/${slug}`;
+}
+
+export const timer3x3x3Path: string = "/puzzles/3x3x3/timer";
+
+export const records3x3x3Path: string = "/puzzles/3x3x3/records";
+
+export const usersPath: string = "/users";
+
+export const homePath: string = "/";
+
+export function postPath(postId: number): string {
+  return `/posts/${postId}#comments`;
+}

frontend/commons/types/assertions.ts

@@ -0,0 +1,3 @@
+export function assertExhausted(_x: never): never {
+  throw new Error("not exhausted");
+}

frontend/commons/types/page.ts

@@ -0,0 +1,5 @@
+export type Page = "Home" | "Timer" | "Users" | "Me" | "Records" | "Post";
+
+export function eqPage(a: Page, b: Page) {
+  return a === b;
+}

frontend/components/Flash.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+export function Flash() {
+  return (
+    <div id="flash" className="flash notice" style={{ display: "none" }}>
+      <p>some content</p>
+    </div>
+  );
+}

frontend/components/Footer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export function Footer() {
+  return (
+    <footer>
+      <p>
+        Founded by <a href="http://cubemania.org/users/tim">Tim Habermaas</a>,{" "}
+        <a
+          href="http://www.patrickstadler.de"
+          title="Patrick Stadler's Website"
+        >
+          Patrick Stadler
+        </a>{" "}
+        and Simon Wacker.
+      </p>
+    </footer>
+  );
+}