From 7b82a95e014780d34c730dc8646906809c726e4c Mon Sep 17 00:00:00 2001 From: Silas Date: Fri, 26 Nov 2021 20:04:45 -0500 Subject: [PATCH] implement just for you pages with phoenix-react --- assets/.babelrc | 3 +- assets/css/app.css | 2 +- assets/js/app.js | 48 +- assets/js/pages/ForPage.tsx | 61 + assets/js/pages/JustPage.tsx | 57 + assets/js/pages/SplashPage.tsx | 31 +- assets/js/pages/YouPage.tsx | 50 + assets/package-lock.json | 11914 ++-------------- assets/package.json | 4 +- assets/webpack.config.js | 6 +- lib/entendu_web.ex | 2 + lib/entendu_web/templates/layout/app.html.eex | 2 +- .../templates/layout/root.html.leex | 19 +- lib/entendu_web/templates/link/for.html.eex | 7 +- lib/entendu_web/templates/link/just.html.eex | 11 +- lib/entendu_web/templates/link/you.html.eex | 7 +- lib/entendu_web/templates/page/index.html.eex | 13 +- mix.exs | 3 +- mix.lock | 1 + package-lock.json | 3 - 20 files changed, 1246 insertions(+), 10998 deletions(-) create mode 100644 assets/js/pages/ForPage.tsx create mode 100644 assets/js/pages/JustPage.tsx create mode 100644 assets/js/pages/YouPage.tsx delete mode 100644 package-lock.json diff --git a/assets/.babelrc b/assets/.babelrc index ce33b24..fd6b16f 100644 --- a/assets/.babelrc +++ b/assets/.babelrc @@ -1,5 +1,6 @@ { "presets": [ - "@babel/preset-env" + "@babel/preset-env", + "@babel/preset-react" ] } diff --git a/assets/css/app.css b/assets/css/app.css index bc41c57..0ae2a25 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -1,5 +1,5 @@ /* This file is for your main application css. */ -@import "./phoenix.css"; +/* @import "./phoenix.css"; */ /* LiveView specific classes for your customizations */ .phx-no-feedback.invalid-feedback, diff --git a/assets/js/app.js b/assets/js/app.js index 7ec1248..7c585c1 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -1,7 +1,8 @@ // We need to import the CSS so that webpack will load it. // The MiniCssExtractPlugin is used to separate it out into // its own CSS file. -// import "../css/app.css" +import "react-phoenix" +import "../css/app.css" // const _css = require("../css/app.css"); // webpack automatically bundles all modules in your @@ -17,10 +18,11 @@ import "phoenix_html" import {Socket} from "phoenix" import topbar from "topbar" import {LiveSocket} from "phoenix_live_view" -import React from "react"; -import ReactDOM from "react-dom"; + import SplashPage from './pages/SplashPage'; -import { GlobalStyle } from '@intended/intended-ui'; +import JustPage from './pages/JustPage' +import ForPage from './pages/ForPage' +import YouPage from './pages/YouPage' let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}}) @@ -39,10 +41,34 @@ liveSocket.connect() // >> liveSocket.disableLatencySim() window.liveSocket = liveSocket -ReactDOM.render(
- - -
- , - document.getElementById("root") -); \ No newline at end of file +window.Components = { + SplashPage, JustPage, ForPage, YouPage +} + +// const root_el = document.getElementById("root"); +// const page = root_el.getAttribute("page") +// let result; + +// switch(page) { +// case "splash": +// result = +// break; +// case "just": +// result = +// break; +// case "for": +// case "you": +// case "identify": +// case "revealed": +// default: +// null +// break; +// } + +// ReactDOM.render( +// +// { result } +// +// , +// root_el +// ); \ No newline at end of file diff --git a/assets/js/pages/ForPage.tsx b/assets/js/pages/ForPage.tsx new file mode 100644 index 0000000..737fba2 --- /dev/null +++ b/assets/js/pages/ForPage.tsx @@ -0,0 +1,61 @@ +import React, { useState } from "react"; + +import { ProgressIndicator, Header2, Button, IconArrow, Label, Input, Select, CenteredContainer, SpaceBetweenContainer, Spacer, TextAlignWrapper, GlobalStyle } from "@intended/intended-ui"; + +const ForPage = () => { + const [recipientInput, setRecipientInput] = useState(""); + const [serviceSelect, setServiceSelect] = useState(""); + + const handleRecipientInputChange = ( + e: React.ChangeEvent + ) => { + setRecipientInput(e.target.value); + }; + + const handleServiceChange = (e: React.ChangeEvent) => { + setServiceSelect(e.target.value); + }; + + return ( + + + + + + Tell Someone + + + + + + + + + + - - - +<%= react_component("Components.JustPage") %> diff --git a/lib/entendu_web/templates/link/you.html.eex b/lib/entendu_web/templates/link/you.html.eex index 0489925..98af3f0 100644 --- a/lib/entendu_web/templates/link/you.html.eex +++ b/lib/entendu_web/templates/link/you.html.eex @@ -1,6 +1 @@ -
-

Create a secret!

-

There will be a form here

-

And a file input here

-

Then a next button

-
+<%= react_component("Components.YouPage") %> diff --git a/lib/entendu_web/templates/page/index.html.eex b/lib/entendu_web/templates/page/index.html.eex index 66d392e..3ae67c1 100644 --- a/lib/entendu_web/templates/page/index.html.eex +++ b/lib/entendu_web/templates/page/index.html.eex @@ -1,10 +1,7 @@ -
-

Überauth + Phoenix Example

-

- This is an application to show an example of how to wire up - Überauth with - Phoenix. -

+
+ + <%= react_component("Components.SplashPage") %> + <%= if @current_user do %>

Welcome, <%= @current_user.name %>!

@@ -13,7 +10,7 @@ <%= link "Logout", to: Routes.auth_path(@conn, :delete), method: "delete", class: "button" %>
<% else %> -