From 97b518ea8926b13418e8cf145266eec155e605c7 Mon Sep 17 00:00:00 2001 From: Sacha Date: Sat, 9 Nov 2019 19:58:28 +0000 Subject: [PATCH 1/8] move contact form to contact --- src/components/forms/contact.js | 44 ++++++++++++++++++++++++++++++ src/pages/contact.js | 17 ++++++++++++ src/pages/index.js | 47 +-------------------------------- 3 files changed, 62 insertions(+), 46 deletions(-) create mode 100644 src/components/forms/contact.js create mode 100644 src/pages/contact.js diff --git a/src/components/forms/contact.js b/src/components/forms/contact.js new file mode 100644 index 0000000..f44a8bb --- /dev/null +++ b/src/components/forms/contact.js @@ -0,0 +1,44 @@ +import TextField from "@material-ui/core/TextField"; +import Form, { InputContainer } from "components/form"; +import { Container } from "components/layout"; + +const ContactForm = () => ( + +
+ + + + + + + + + + +
+ +); + +export default ContactForm; \ No newline at end of file diff --git a/src/pages/contact.js b/src/pages/contact.js new file mode 100644 index 0000000..80208bc --- /dev/null +++ b/src/pages/contact.js @@ -0,0 +1,17 @@ +import React from "react"; +import ContactForm from "components/forms/contact"; +import Typography from "@material-ui/core/Typography"; +import { Container } from "components/layout"; + +export default class PostPage extends React.Component { + render() { + return ( + + + Get in touch + + + + ); + } +} diff --git a/src/pages/index.js b/src/pages/index.js index 65ca5c8..535e8ab 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,13 +1,11 @@ import React from "react"; import Typography from "@material-ui/core/Typography"; -import TextField from "@material-ui/core/TextField"; -import Paper from "@material-ui/core/Paper"; -import Form, { InputContainer } from "components/form"; import { Container } from "components/layout"; import Grid from "components/grid"; import Post from "components/post"; import Link from "next/link"; import { inject } from "mobx-react"; + @inject("store") class IndexPage extends React.Component { render() { @@ -29,49 +27,6 @@ class IndexPage extends React.Component { - - - - - Get in touch - -
- - - - - - - - - - -
- - - ); } From 2c9c0a1453ede41dc508a90b11324a7fbd42a4a2 Mon Sep 17 00:00:00 2001 From: Sacha Date: Sun, 21 Mar 2021 16:20:56 +0000 Subject: [PATCH 2/8] peacock settings --- .vscode/settings.json | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 0888821..8392c9c 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,8 +1,18 @@ { "workbench.colorCustomizations": { - "activityBar.background": "#273104", - "titleBar.activeBackground": "#374506", - "titleBar.activeForeground": "#F7FDE1" + "activityBar.background": "#1a3500", + "activityBar.foreground": "#e7e7e7", + "activityBar.inactiveForeground": "#e7e7e799", + "activityBarBadge.background": "#005ebf", + "activityBarBadge.foreground": "#e7e7e7", + "titleBar.activeBackground": "#010200", + "titleBar.inactiveBackground": "#01020099", + "titleBar.activeForeground": "#e7e7e7", + "titleBar.inactiveForeground": "#e7e7e799", + "statusBar.background": "#010200", + "statusBarItem.hoverBackground": "#1a3500", + "statusBar.foreground": "#e7e7e7" }, - "eslint.enable": true + "eslint.enable": true, + "peacock.color": "#010200" } \ No newline at end of file From c2f34783d407533dfd784c0d4dccd22377958cf4 Mon Sep 17 00:00:00 2001 From: Sacha Date: Mon, 22 Mar 2021 00:10:14 +0000 Subject: [PATCH 3/8] add bookmarks page --- .prettierrc | 4 + .vscode/settings.json | 10 +- package-lock.json | 130 +++++++++++++++++++++- package.json | 7 +- src/pages/_app.js | 1 + src/pages/bookmarks.js | 247 +++++++++++++++++++++++++++++++++++++++++ 6 files changed, 393 insertions(+), 6 deletions(-) create mode 100644 .prettierrc create mode 100644 src/pages/bookmarks.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..5a938ce --- /dev/null +++ b/.prettierrc @@ -0,0 +1,4 @@ +{ + "tabWidth": 4, + "useTabs": false +} diff --git a/.vscode/settings.json b/.vscode/settings.json index 8392c9c..fc1362f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -11,8 +11,14 @@ "titleBar.inactiveForeground": "#e7e7e799", "statusBar.background": "#010200", "statusBarItem.hoverBackground": "#1a3500", - "statusBar.foreground": "#e7e7e7" + "statusBar.foreground": "#e7e7e7", + "activityBar.activeBackground": "#1a3500", + "activityBar.activeBorder": "#005ebf" }, "eslint.enable": true, - "peacock.color": "#010200" + "peacock.color": "#010200", + "editor.defaultFormatter": "esbenp.prettier-vscode", + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3e1e762..4ca242a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1698,6 +1698,11 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.2.tgz", "integrity": "sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q==" }, + "@graphql-typed-document-node/core": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@graphql-typed-document-node/core/-/core-3.1.0.tgz", + "integrity": "sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==" + }, "@jest/console": { "version": "24.7.1", "resolved": "https://registry.npmjs.org/@jest/console/-/console-24.7.1.tgz", @@ -2245,6 +2250,13 @@ "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.8.1" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } } }, "regenerator-runtime": { @@ -2295,6 +2307,13 @@ "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.8.1" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } } }, "regenerator-runtime": { @@ -2331,6 +2350,13 @@ "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.8.1" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } } }, "regenerator-runtime": { @@ -2376,6 +2402,11 @@ "react-is": "^16.8.1" } }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, "regenerator-runtime": { "version": "0.13.2", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz", @@ -2695,6 +2726,15 @@ } } }, + "@urql/core": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@urql/core/-/core-2.0.0.tgz", + "integrity": "sha512-Qj24CG8ullqZZsYmjrSH0JhH+nY7kj8GbVbA9si3KUjlYs75A/MBQU3i97j6oWyGldDBapyis2CfaQeXKbv8rA==", + "requires": { + "@graphql-typed-document-node/core": "^3.1.0", + "wonka": "^4.0.14" + } + }, "@vibrant/color": { "version": "3.2.0-alpha", "resolved": "https://registry.npmjs.org/@vibrant/color/-/color-3.2.0-alpha.tgz", @@ -5990,6 +6030,14 @@ "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.8.1" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true + } } } } @@ -7545,6 +7593,11 @@ "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz", "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=" }, + "graphql": { + "version": "15.5.0", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-15.5.0.tgz", + "integrity": "sha512-OmaM7y0kaK31NKG31q4YbD2beNYa6jBBKtMFT6gLYJljHLJr42IqJ8KX08u3Li/0ifzTU5HjmoOOrwa5BRLeDA==" + }, "growly": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz", @@ -7709,6 +7762,13 @@ "integrity": "sha512-0XsbTXxgiaCDYDIWFcwkmerZPSwywfUqYmwT4jzewKTQSWoE6FCMoUVOeBJWK3E/CrWbxRG3m5GzY4lnIwGRBA==", "requires": { "react-is": "^16.7.0" + }, + "dependencies": { + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + } } }, "homedir-polyfill": { @@ -8338,6 +8398,27 @@ "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, + "isomorphic-unfetch": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/isomorphic-unfetch/-/isomorphic-unfetch-3.1.0.tgz", + "integrity": "sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==", + "requires": { + "node-fetch": "^2.6.1", + "unfetch": "^4.2.0" + }, + "dependencies": { + "node-fetch": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.1.tgz", + "integrity": "sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==" + }, + "unfetch": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/unfetch/-/unfetch-4.2.0.tgz", + "integrity": "sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==" + } + } + }, "isstream": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz", @@ -10507,6 +10588,11 @@ "react-is": "^16.8.1" } }, + "react-is": { + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", + "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" + }, "regenerator-runtime": { "version": "0.13.3", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz", @@ -10597,9 +10683,22 @@ "object-assign": "^4.1.1", "react-is": "^16.8.1" } + }, + "react-is": { + "version": "16.8.6", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", + "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" } } }, + "next-urql": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/next-urql/-/next-urql-3.0.0.tgz", + "integrity": "sha512-7sT5jLo7XqdVDRP43oo3KJf1c49cnytTcVXIiPuZInfUt5wL4Mri/33MbCF0dFFKNeYE3LluGrKV55uR7sNAWA==", + "requires": { + "react-ssr-prepass": "^1.2.1" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -11618,6 +11717,12 @@ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", "dev": true + }, + "react-is": { + "version": "16.13.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true } } }, @@ -11895,9 +12000,14 @@ } }, "react-is": { - "version": "16.8.6", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.6.tgz", - "integrity": "sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==" + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz", + "integrity": "sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==" + }, + "react-ssr-prepass": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/react-ssr-prepass/-/react-ssr-prepass-1.4.0.tgz", + "integrity": "sha512-0SzdmiQUtHvhxCabHg9BI/pkJfijGkQ0jQL6fC4YFy7idaDOuaiQLsajIkkNxffFXtJFHIWFITlve2WB88e0Jw==" }, "react-syntax-highlighter": { "version": "11.0.2", @@ -14198,6 +14308,15 @@ } } }, + "urql": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/urql/-/urql-2.0.1.tgz", + "integrity": "sha512-UTYLaMMw/N2iM2nHbcZ1XvN+opZxtWKwJaczV+MAco8buFpR3JR9CFrgKvx9p4uz+EayqQ69LZTWreJx+c196w==", + "requires": { + "@urql/core": "^2.0.0", + "wonka": "^4.0.14" + } + }, "use": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz", @@ -14472,6 +14591,11 @@ "string-width": "^1.0.2 || 2" } }, + "wonka": { + "version": "4.0.15", + "resolved": "https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz", + "integrity": "sha512-U0IUQHKXXn6PFo9nqsHphVCE5m3IntqZNB9Jjn7EB1lrR7YTDY3YWgFvEvwniTzXSvOH/XMzAZaIfJF/LvHYXg==" + }, "wordwrap": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", diff --git a/package.json b/package.json index 5c57037..ea02461 100644 --- a/package.json +++ b/package.json @@ -28,6 +28,8 @@ "contentful": "^7.8.2", "dateformat": "^3.0.3", "dotenv": "^8.0.0", + "graphql": "^15.5.0", + "isomorphic-unfetch": "^3.1.0", "lodash": "^4.17.13", "material-design-icons": "^3.0.1", "mobx": "^5.13.0", @@ -35,13 +37,16 @@ "mobx-state-tree": "^3.14.1", "next": "^9.0.3", "next-images": "^1.1.2", + "next-urql": "^3.0.0", "react": "^16.8.6", "react-dom": "^16.8.6", + "react-is": "^17.0.1", "react-syntax-highlighter": "^11.0.2", "sharp": "^0.23.0", "sqip-plugin-data-uri": "^1.0.0-alpha.27", "sqip-plugin-primitive": "^1.0.0-alpha.27", - "sqip-plugin-svgo": "^1.0.0-alpha.27" + "sqip-plugin-svgo": "^1.0.0-alpha.27", + "urql": "^2.0.1" }, "bit": { "env": { diff --git a/src/pages/_app.js b/src/pages/_app.js index 5b609b4..ef80593 100644 --- a/src/pages/_app.js +++ b/src/pages/_app.js @@ -12,6 +12,7 @@ import IconButton from "components/iconbutton"; import Typography from "@material-ui/core/Typography"; import GithubIcon from "static/img/github-circle.svg"; import HomeIcon from "material-design-icons/action/svg/production/ic_home_24px.svg"; +import "isomorphic-unfetch"; @inject("store") class Layout extends React.Component { diff --git a/src/pages/bookmarks.js b/src/pages/bookmarks.js new file mode 100644 index 0000000..b766936 --- /dev/null +++ b/src/pages/bookmarks.js @@ -0,0 +1,247 @@ +import React, { useState } from "react"; +import { createClient, useQuery, useMutation } from "urql"; +import Head from "next/head"; +import { withUrqlClient } from "next-urql"; + +export const client = createClient({ + url: "https://guddoydev.hasura.app/v1/graphql", + fetchOptions: () => ({ + headers: { + "x-hasura-admin-secret": + "SOblgoBVEwt0GfGqqvi3s6IpgrC4aqznyf7kBz1D1FPvYK2PEOZ7YIsBpRu1xgO3", + }, + }), +}); + +const BOOKMARKS_QUERY = ` + query GetBookmarks { + BOOKMARKS { + CREATION_DATE + DISPLAY_NAME + ID + URL + TAGS + } + BOOKMARK_CATEGORIES { + DISPLAY_NAME + ID + ITEMS + } + } +`; + +const ADD_BOOKMARK_CATEGORY_MUTATION = ` + mutation AddBookmarkCategory($DISPLAY_NAME: String = "", $ITEMS: json = "[]") { + insert_BOOKMARK_CATEGORIES_one(object: {ITEMS: $ITEMS, DISPLAY_NAME: $DISPLAY_NAME}) { + DISPLAY_NAME + ITEMS + } + } +`; + +const ADD_BOOKMARK_TO_CATEGORY_MUTATION = ` + mutation AddBookmarkToCategory($_eq: uuid = "", $ITEMS: json = "") { + update_BOOKMARK_CATEGORIES(_set: {ITEMS: $ITEMS}, where: {ID: {_eq: $_eq}}) { + returning { + DISPLAY_NAME + ID + ITEMS + } + } + } +`; + +const ADD_BOOKMARK_MUTATION = ` + mutation AddBookmark($DISPLAY_NAME: String = "", $TAGS: json = "[]", $URL: String = "") { + insert_BOOKMARKS_one(object: {DISPLAY_NAME: $DISPLAY_NAME, TAGS: $TAGS, URL: $URL}) { + DISPLAY_NAME + CREATION_DATE + ID + TAGS + URL + } + } +`; + +const addBookmarkCategory = async (category) => { + const res = await client + .query(ADD_BOOKMARK_CATEGORY_MUTATION, { + DISPLAY_NAME: category, + ITEMS: [], + }) + .toPromise(); + return res; +}; + +const Bookmark = ({ CREATION_DATE, DISPLAY_NAME, URL, TAGS = [] }) => ( +
  • +

    + + {DISPLAY_NAME} + +

    + Added: {new Date(CREATION_DATE).toDateString()} +
    + {URL} +
    + Tags:{" "} +
      + {TAGS.map((tag) => ( +
    • {tag}
      • + ))} +
    +
    • +); + +export const getBookmarks = async () => { + const { data } = await client.query(BOOKMARKS_QUERY).toPromise(); + return data; +}; + +const sortByCategory = (bookmarks, categories) => { + return categories.reduce((acc, cat) => { + const items = cat.ITEMS.map((ID) => bookmarks.find((b) => b.ID === ID)); + return [...acc, { ...cat, resolvedItems: items }]; + }, []); +}; + +const AddCategoryForm = () => { + const [displayName, setDisplayName] = useState(""); + + const submit = async () => { + addBookmarkCategory(displayName); + // window.location = window.location; // pro + }; + return ( +
    +