From 7d78bf4d2111af87636069ee2d35d6323ffc96be Mon Sep 17 00:00:00 2001 From: Jan Tuomi Date: Sat, 5 Feb 2022 15:18:48 +0200 Subject: Get stuff running --- src/App.css | 42 -------------------------------- src/App.module.css | 35 +++++++++++++++++++++++++++ src/App.tsx | 69 +++++++++++++++++++++++++---------------------------- src/api.ts | 50 ++++++++++++++++++++++++++++++++++++++ src/favicon.png | Bin 0 -> 6482 bytes src/favicon.svg | 15 ------------ src/index.css | 33 ++++++++++++++++++------- src/main.tsx | 10 ++++---- 8 files changed, 148 insertions(+), 106 deletions(-) delete mode 100644 src/App.css create mode 100644 src/App.module.css create mode 100644 src/api.ts create mode 100644 src/favicon.png delete mode 100644 src/favicon.svg (limited to 'src') diff --git a/src/App.css b/src/App.css deleted file mode 100644 index 8da3fde..0000000 --- a/src/App.css +++ /dev/null @@ -1,42 +0,0 @@ -.App { - text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -button { - font-size: calc(10px + 2vmin); -} diff --git a/src/App.module.css b/src/App.module.css new file mode 100644 index 0000000..0bf5f42 --- /dev/null +++ b/src/App.module.css @@ -0,0 +1,35 @@ +.app { +} + +.header { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; + font-size: var(--font-xxl); + width: auto; + margin: auto; +} + +.iconRow { + display: flex; + flex-flow: row nowrap; + align-items: center; + margin-bottom: -10px; +} + +.iconRow img { + width: auto; + height: 40px; + margin-right: 10px; +} + +.header small { + font-style: italic; + font-size: var(--font-s); + font-weight: 400; +} + +.error { + color: var(--red) +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 3d9bd71..5645dcc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,43 +1,40 @@ -import { useState } from 'react' -import logo from './logo.svg' -import './App.css' +import { useSnippets } from "./api" +import styles from "./App.module.css" +import icon from "./favicon.png" -function App() { - const [count, setCount] = useState(0) +const App = () => { + const snippets = useSnippets() + + const renderSnippets = () => { + if (snippets.type === "failed") { + return
+ Unexpected error loading snippets. See console for details. +
+ } + + if (snippets.type === "loading") { + return
Loading snippets...
+ } + + return snippets.data.map((snippet) => +
{snippet.title}
, + ) + } return ( -
-
- logo -

Hello Vite + React!

-

- -

-

- Edit App.tsx and save to test HMR updates. -

-

- - Learn React - - {' | '} - - Vite Docs - -

+
+
+
+ + SLAM +
+
+ A Mere Stack Language +
+
+ {renderSnippets()} +
) } diff --git a/src/api.ts b/src/api.ts new file mode 100644 index 0000000..7fd9e64 --- /dev/null +++ b/src/api.ts @@ -0,0 +1,50 @@ +import useSWR, { SWRResponse } from "swr" + +const API_URL = import.meta.env.VITE_API_URL + +const fetcher = (path: string) => fetch(`${API_URL}${path}`) + .then(res => res.json()) + .catch((err) => { + console.error(`An error occurred when fetching API path ${path}`) + console.error(err) + throw err + }) + +interface Snippet { + id: string + title: string + content: string +} + +interface APISuccess { + readonly type: "success" + data: D +} + +interface APILoading { + readonly type: "loading" +} + +interface APIFailed { + readonly type: "failed" + error: E +} + +type APIResult = APISuccess | APILoading | APIFailed + +const mapSWRResult = ({ data, error }: SWRResponse): APIResult => { + if (error !== undefined) { + return { type: "failed", error } + } + + const isLoading = data === undefined + if (isLoading) { + return { type: "loading" } + } + + return { type: "success", data } +} + +export const useSnippets = () => mapSWRResult( + useSWR("/snippets", fetcher), +) diff --git a/src/favicon.png b/src/favicon.png new file mode 100644 index 0000000..5527fb4 Binary files /dev/null and b/src/favicon.png differ diff --git a/src/favicon.svg b/src/favicon.svg deleted file mode 100644 index de4aedd..0000000 --- a/src/favicon.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/src/index.css b/src/index.css index ec2585e..910f8af 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,30 @@ -body { - margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif; +:root { + --dark-grey: #282c34; + --white: #fff; + --red: #ff7e7e; + + --font-xxl: 44px; + --font-xl: 38px; + --font-l: 32px; + --font-m: 26px; + --font-s: 20px; +} + +html { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + background-color: var(--dark-grey); + color: var(--white); } -code { - font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', - monospace; +body { + margin: 60px auto; + padding: 0 10px; + max-width: 900px; + text-align: left; } + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 606a3cf..9a11046 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,11 +1,11 @@ -import React from 'react' -import ReactDOM from 'react-dom' -import './index.css' -import App from './App' +import React from "react" +import ReactDOM from "react-dom" +import "./index.css" +import App from "./App" ReactDOM.render( , - document.getElementById('root') + document.getElementById("root"), ) -- cgit v1.3