Skip to content

Commit

Permalink
add login
Browse files Browse the repository at this point in the history
  • Loading branch information
danieleguido committed Mar 15, 2024
1 parent c1de209 commit 2dec133
Show file tree
Hide file tree
Showing 15 changed files with 236 additions and 81 deletions.
3 changes: 2 additions & 1 deletion .env
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
GATSBY_PATH_PREFIX=/impresso-datalab
GATSBY_PATH_PREFIX=/impresso-datalab
GATSBY_IMPRESSO_API_URL=http://localhost:8000/api
2 changes: 2 additions & 0 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,6 @@ run-dev:
GIT_REPO=$(shell git config --get remote.origin.url) \
PATH_PREFIX=/datalab \
PREFIX_PATHS=true \
GATSBY_PATH_PREFIX="" \
GATSBY_IMPRESSO_API_URL="https://impresso-project.ch/api" \
yarn start
56 changes: 28 additions & 28 deletions gatsby-browser.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import "./src/styles/fonts.css"
import "bootstrap/dist/css/bootstrap.min.css"
import "./src/styles/style.css"
import Modals from "./src/components/Modals"
import { AvailableModalsViews, useBrowserStore } from "./src/store"
// import { AvailableModalsViews } from "./src/store"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import PrefetchData from "./src/components/PrefetchData"
import PageLayout from "./src/components/PageLayout"
Expand All @@ -13,35 +13,35 @@ import PageLayout from "./src/components/PageLayout"
export function onRouteUpdate({ location, prevLocation }) {
console.log("[Layout] render")
console.log("[gatsby-browser]@onRouteUpdate new pathname", location)
let view = null
let viewId = null
// update zustand with search params, if any
if (location.search) {
const params = new URLSearchParams(location.search)
const paramView = params.get("view")
const paramViewId = params.get("viewId")
// let view = null
// let viewId = null
// // update zustand with search params, if any
// if (location.search) {
// const params = new URLSearchParams(location.search)
// const paramView = params.get("view")
// const paramViewId = params.get("viewId")

if (AvailableModalsViews.includes(paramView)) {
console.log("[gatsby-browser]@onRouteUpdate view:", paramView)
view = String(paramView)
} else {
console.log(
"[gatsby-browser]@onRouteUpdate view not recognized, close everything:",
paramView
)
}
// if (AvailableModalsViews.includes(paramView)) {
// console.log("[gatsby-browser]@onRouteUpdate view:", paramView)
// view = String(paramView)
// } else {
// console.log(
// "[gatsby-browser]@onRouteUpdate view not recognized, close everything:",
// paramView
// )
// }

// test view id against a regex (lowercase letters and numbers, only trailing slash)
if (paramViewId && /^[a-z0-9-]+$/.test(paramViewId)) {
console.log("[gatsby-browser]@onRouteUpdate viewId:", paramViewId)
viewId = String(paramViewId)
} else {
console.log(
"[gatsby-browser]@onRouteUpdate viewId not recognized, close everything:",
paramViewId
)
}
}
// // test view id against a regex (lowercase letters and numbers, only trailing slash)
// if (paramViewId && /^[a-z0-9-]+$/.test(paramViewId)) {
// console.log("[gatsby-browser]@onRouteUpdate viewId:", paramViewId)
// viewId = String(paramViewId)
// } else {
// console.log(
// "[gatsby-browser]@onRouteUpdate viewId not recognized, close everything:",
// paramViewId
// )
// }
// }

// always update store with view and viewId
// useBrowserStore.setState({
Expand Down
20 changes: 19 additions & 1 deletion gatsby-config.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@
/**
* @type {import('gatsby').GatsbyConfig}
*/

const { createProxyMiddleware } = require("http-proxy-middleware")
require("dotenv").config({
path: [`.env.${process.env.NODE_ENV}`, ".env"],
})
const ApiHost = (
process.env.GATSBY_IMPRESSO_API_URL || "http://localhost:8000/api"
).replace("/api", "")

console.log("gatsby-config")
console.log("NODE_ENV", process.env.NODE_ENV)
console.log("PATH_PREFIX", process.env.PATH_PREFIX)
Expand All @@ -13,6 +17,8 @@ console.log("GIT_BUILD_TAG", process.env.GIT_BUILD_TAG)
console.log("GIT_BRANCH", process.env.GIT_BRANCH)
console.log("GIT_REVISION", process.env.GIT_REVISION)
console.log("GIT_REPO", process.env.GIT_REPO)
console.log("GATSBY_IMPRESSO_API_URL", process.env.GATSBY_IMPRESSO_API_URL)
console.log("ApiHost", ApiHost)

module.exports = {
siteMetadata: {
Expand All @@ -24,6 +30,18 @@ module.exports = {
gitRepo: process.env.GIT_REPO,
},
pathPrefix: process.env.PATH_PREFIX || "/",
developMiddleware: (app) => {
app.use(
"/api",
createProxyMiddleware({
target: ApiHost,
changeOrigin: true,
pathRewrite: {
"^/api": "/api",
},
})
)
},
plugins: [
"gatsby-plugin-sitemap",
// {
Expand Down
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,5 +40,8 @@
"react-bootstrap": "^2.10.0",
"react-dom": "^18.2.0",
"zustand": "^4.5.2"
},
"devDependencies": {
"http-proxy-middleware": "^2.0.6"
}
}
4 changes: 3 additions & 1 deletion src/components/Header.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
import { Link } from "gatsby"
import "./Header.css"
import LogoImpressoDataLab from "./_svg/LogoImpressoDataLab"
import UserArea from "./UserArea"

const Header = () => {
return (
Expand Down Expand Up @@ -37,11 +38,12 @@ const Header = () => {
placeholder="search notebooks..."
aria-label="Search Notebooks"
/>
<Button size="sm" variant="dark">
<Button size="sm" variant="transparent">
Search
</Button>
</InputGroup>
</Form>
<UserArea />
</Nav>
</Container>
</Navbar>
Expand Down
100 changes: 76 additions & 24 deletions src/components/ModalLogin.js
Original file line number Diff line number Diff line change
@@ -1,34 +1,86 @@
import React from 'react'
import ModalView from './ModalView'
import { ModalLoginView } from '../store'
import { Button, Form, Modal } from 'react-bootstrap'
import React, { useRef } from "react"
import ModalView from "./ModalView"
import { ModalLoginView } from "../store"
import { Button, Form, Modal } from "react-bootstrap"
import { useMutation } from "@tanstack/react-query"
import axios from "axios"

const ModalLogin = ({ onClose, ...props }) => {
const formPayload = useRef({
email: "",
password: "",
strategy: "local",
})

const { mutate, status, error, data } = useMutation({
mutationFn: (data) => {
console.info("[ModalLogin] mutate", data.email)
return axios
.post("/api/authentication", data)
.then((res) => {
console.info("[ModalLogin] mutate success", res.data)
formPayload.current = {
email: "",
password: "",
strategy: "local",
}
return res.data
})
.catch((err) => {
console.error(
"[ModalLogin] mutate error",
err.code,
err.response?.data
)

return err
})
},
})

const onSubmitHandler = (e) => {
e.preventDefault()
console.info("[ModalLogin] onSubmitHandler", formPayload.current)
mutate(formPayload.current)
}
// # get ac
return (
<ModalView viewName={ModalLoginView} onClose={onClose} {...props}>
<Modal.Header closeButton>
<Modal.Title id='contained-modal-title-vcenter'>
Using Grid in Modal
</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className='mb-3' controlId='ModalLoginForm.email'>
<ModalView
viewName={ModalLoginView}
backdrop="static"
onClose={onClose}
{...props}
>
<Form onSubmit={onSubmitHandler}>
<Modal.Header closeButton>
<Modal.Title id="contained-modal-title-vcenter">Login</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form.Group className="mb-3" controlId="ModalLoginForm.email">
<Form.Label>Email address</Form.Label>
<Form.Control type='email' placeholder='[email protected]' />
<Form.Control
onChange={(e) => (formPayload.current.email = e.target.value)}
type="email"
placeholder="[email protected]"
/>
</Form.Group>
<Form.Group className='mb-3' controlId='ModalLoginForm.password'>
<Form.Group className="mb-3" controlId="ModalLoginForm.password">
<Form.Label>Password</Form.Label>
<Form.Control type='password' />
<Form.Control
onChange={(e) => (formPayload.current.password = e.target.value)}
type="password"
/>
</Form.Group>
</Form>
</Modal.Body>
<Modal.Footer>
<Button variant='secondary' onClick={onClose}>
Close
</Button>
<Button variant='primary'>Understood</Button>
</Modal.Footer>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
discard
</Button>
<Button type="submit" variant="primary" onClick={onSubmitHandler}>
login
</Button>
</Modal.Footer>
</Form>
</ModalView>
)
}
Expand Down
12 changes: 4 additions & 8 deletions src/components/Modals.js
Original file line number Diff line number Diff line change
@@ -1,25 +1,21 @@
import React from "react"
import { AvailableModalsViews } from "../store"
import { AvailableModalsViews, useBrowserStore } from "../store"
import { Button } from "react-bootstrap"
import { navigate } from "gatsby"
import ModalLogin from "./ModalLogin"
import ModalNotebookPreview from "./ModalNotebookPreview"
import ModalTutorial from "./ModalTutorial"

const Modals = ({ debug = false }) => {
const setView = useBrowserStore((state) => state.setView)
const onCloseHandler = () => {
navigate("")
setView(null)
}

return (
<>
{debug &&
AvailableModalsViews.map((modal) => (
<Button
className="mx-1"
key={modal}
onClick={() => navigate(`?view=${modal}`)}
>
<Button className="mx-1" key={modal} onClick={() => setView(modal)}>
{modal}
</Button>
))}
Expand Down
13 changes: 4 additions & 9 deletions src/components/NotebookCard.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
import React from "react"
import { ModalNotebookPreviewView, useDataStore } from "../store"
import { useDataStore } from "../store"
import AuthorCard from "./AuthorCard"
import { Button } from "react-bootstrap"
import "./NotebookCard.css"
import { Link, navigate } from "gatsby"
import { Link } from "gatsby"
import Avatar from "boring-avatars"
import { ArrowRight } from "iconoir-react"
import { DateTime } from "luxon"
Expand All @@ -12,9 +11,7 @@ import { DateTime } from "luxon"
const NotebookCard = ({ name }) => {
const getNotebookByName = useDataStore((state) => state.getNotebookByName)
const notebook = getNotebookByName(name)
const navigateToNotebookPage = () => {
navigate(`?view=${ModalNotebookPreviewView}&viewId=${name}`)
}

const accessTime = notebook?.accessTime
const accessDateTime = DateTime.fromISO(accessTime)

Expand All @@ -33,9 +30,7 @@ const NotebookCard = ({ name }) => {
<div className="date">
<span>{accessDateTime.toFormat("yyyy LLL dd")}</span>
</div>
<h3 className="m-0" onClick={navigateToNotebookPage}>
{notebook?.title}
</h3>
<h3 className="m-0">{notebook?.title}</h3>
<ol className="NotebookCard__authors">
{notebook?.authors.map((name) => (
<li key={name}>
Expand Down
2 changes: 0 additions & 2 deletions src/components/PageLayout.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import { useSpring } from "@react-spring/web"
import { Link } from "gatsby"
import React, { useEffect, useRef, useState } from "react"
import { Button, Modal } from "react-bootstrap"
import ModalNotebookPreview from "./ModalNotebookPreview"

const PageLayout = ({ children, path, pageContext }) => {
console.log("[PageLayout] render props")
Expand Down
2 changes: 1 addition & 1 deletion src/components/TutorialCard.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react"
import "./TutorialCard.css"
import { useDataStore } from "../store"
import { Link, navigate } from "gatsby"
import { Link } from "gatsby"

const TutorialCard = ({ name }) => {
const [, getTutorialByName] = useDataStore((state) => [
Expand Down
34 changes: 34 additions & 0 deletions src/components/UserArea.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { useQuery } from "@tanstack/react-query"
import axios from "axios"
import React from "react"
import { Button } from "react-bootstrap"
import { ModalLoginView, useBrowserStore } from "../store"

const UserArea = () => {
const setView = useBrowserStore((state) => state.setView)
const { status, data, error } = useQuery({
queryKey: ["me"],
queryFn: () => axios.get(`/api/me`),
retry: false,
refetchOnMount: false,
refetchOnReconnect: false,
})

console.log("[UserArea]", status, data, error)
return (
<div className="UserArea">
<Button
size="sm"
variant="transparent"
onClick={() => setView(ModalLoginView)}
>
Log in
</Button>
<Button size="sm" variant="transparent">
Sign up {process.env.GATSBY_IMPRESSO_API_URL}
</Button>
</div>
)
}

export default UserArea
Loading

0 comments on commit 2dec133

Please sign in to comment.