From f079ebce50f425ea50841c60299098dff80ee239 Mon Sep 17 00:00:00 2001 From: pixelerate Date: Tue, 16 Jan 2024 19:40:20 +0000 Subject: [PATCH 01/15] making a start --- .env | 5 ++- package.json | 1 + src/Account.tsx | 102 ++++++++++++++++++++++++++++++++++++++++++ src/App.tsx | 29 ++++++++++-- src/Auth.tsx | 49 ++++++++++++++++++++ src/supabaseClient.ts | 6 +++ yarn.lock | 92 +++++++++++++++++++++++++++++++++++++ 7 files changed, 279 insertions(+), 5 deletions(-) create mode 100644 src/Account.tsx create mode 100644 src/Auth.tsx create mode 100644 src/supabaseClient.ts diff --git a/.env b/.env index 1243542..f3abcc8 100644 --- a/.env +++ b/.env @@ -1,2 +1,5 @@ REACT_APP_API_ENDPOINT=https://api.futurelabourmps.com/ -REACT_APP_API_COLS=A3:AZ70 \ No newline at end of file +REACT_APP_API_COLS=A3:AZ70 + +REACT_APP_SUPABASE_URL=https://vwypfcwdyblmeujwclxu.supabase.co +REACT_APP_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ3eXBmY3dkeWJsbWV1andjbHh1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDU0MzI2NzksImV4cCI6MjAyMTAwODY3OX0.DFOzoPAnv2UjkUSLdK6spq094bz--cn2dVtFL0BwPOE \ No newline at end of file diff --git a/package.json b/package.json index b6e2ba6..8c04255 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@emotion/styled": "^11.11.0", "@mui/material": "^5.14.19", "@phosphor-icons/react": "^2.0.14", + "@supabase/supabase-js": "^2.39.3", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", diff --git a/src/Account.tsx b/src/Account.tsx new file mode 100644 index 0000000..5b1923d --- /dev/null +++ b/src/Account.tsx @@ -0,0 +1,102 @@ +import { + useState, + useEffect, + SetStateAction, + FormEventHandler, + FormEvent, +} from "react"; +import { supabase } from "./supabaseClient"; + +export default function Account({ session }: { session: any }) { + const [loading, setLoading] = useState(true); + const [username, setUsername] = useState(null); + + useEffect(() => { + let ignore = false; + async function getProfile() { + setLoading(true); + const { user } = session; + + const { data, error } = await supabase + .from("profiles") + .select(`username`) + .eq("id", user.id) + .single(); + + if (!ignore) { + if (error) { + console.warn(error); + } else if (data) { + setUsername(data.username); + } + } + + setLoading(false); + } + + getProfile(); + + return () => { + ignore = true; + }; + }, [session]); + + async function updateProfile(event: FormEvent) { + event.preventDefault(); + + setLoading(true); + const { user } = session; + + const updates = { + id: user.id, + username, + updated_at: new Date(), + }; + + const { error } = await supabase.from("profiles").upsert(updates); + + if (error) { + alert(error.message); + } + setLoading(false); + } + + return ( +
+
+ + +
+
+ + setUsername(e.target.value)} + /> +
+ +
+ +
+ +
+ +
+
+ ); +} diff --git a/src/App.tsx b/src/App.tsx index 7896f73..f340ebb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import React, { useCallback } from "react"; +import React, { useCallback, useEffect, useState } from "react"; import "./App.css"; import { Sidebar } from "./components/sidebar/Sidebar"; import Main from "./components/Main"; @@ -10,6 +10,10 @@ import { fetchMPs } from "./data/utils/utils"; import { DataStatus, MP } from "./data/types"; import { SET_DATA_ACTION } from "./state/actions"; import { useAnalytics } from "./analytics"; +import { supabase } from "./supabaseClient"; +import Auth from "./Auth"; +import Account from "./Account"; +import { Session } from "@supabase/supabase-js"; function App() { const view = useSelector((state: AppState) => state.view); @@ -24,15 +28,32 @@ function App() { [dispatch] ); fetchMPs(updateData); - useAnalytics() + useAnalytics(); + + const [session, setSession] = useState(null); + + useEffect(() => { + supabase.auth.getSession().then(({ data: { session } }) => { + setSession(session); + }); + + supabase.auth.onAuthStateChange((_event, session) => { + setSession(session); + }); + }, []); return (
-
+ {!session ? ( + + ) : ( + + )} + {/*
-
+
*/}
); } diff --git a/src/Auth.tsx b/src/Auth.tsx new file mode 100644 index 0000000..3b176e5 --- /dev/null +++ b/src/Auth.tsx @@ -0,0 +1,49 @@ +import { useState } from "react"; +import { supabase } from "./supabaseClient"; + +export default function Auth() { + const [loading, setLoading] = useState(false); + const [email, setEmail] = useState(""); + + const handleLogin = async (event: { preventDefault: () => void }) => { + event.preventDefault(); + + setLoading(true); + const { error } = await supabase.auth.signInWithOtp({ email }); + + if (error) { + alert(error.message); + } else { + alert("Check your email for the login link!"); + } + setLoading(false); + }; + + return ( +
+
+

Supabase + React

+

+ Sign in via magic link with your email below +

+
+
+ setEmail(e.target.value)} + /> +
+
+ +
+
+
+
+ ); +} diff --git a/src/supabaseClient.ts b/src/supabaseClient.ts new file mode 100644 index 0000000..d550e43 --- /dev/null +++ b/src/supabaseClient.ts @@ -0,0 +1,6 @@ +import { createClient } from "@supabase/supabase-js"; + +const supabaseUrl = process.env.REACT_APP_SUPABASE_URL ?? ""; +const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY ?? ""; + +export const supabase = createClient(supabaseUrl, supabaseAnonKey); diff --git a/yarn.lock b/yarn.lock index 9593395..ac31821 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2015,6 +2015,63 @@ dependencies: "@sinonjs/commons" "^1.7.0" +"@supabase/functions-js@^2.1.5": + version "2.1.5" + resolved "https://registry.yarnpkg.com/@supabase/functions-js/-/functions-js-2.1.5.tgz#ed1b85f499dfda21d40fe39b86ab923117cb572b" + integrity sha512-BNzC5XhCzzCaggJ8s53DP+WeHHGT/NfTsx2wUSSGKR2/ikLFQTBCDzMvGz/PxYMqRko/LwncQtKXGOYp1PkPaw== + dependencies: + "@supabase/node-fetch" "^2.6.14" + +"@supabase/gotrue-js@^2.60.0": + version "2.62.0" + resolved "https://registry.yarnpkg.com/@supabase/gotrue-js/-/gotrue-js-2.62.0.tgz#c6522e357f3ce38ab32522b82ee818a4f627664c" + integrity sha512-4eBuZNXGOk7ewqJuHPYMnk8clCtEx6Hfnu6yHLjZlx7w18TqcojcTRUBZagErtpgwwdfzUwKbquexhbrpH/ysw== + dependencies: + "@supabase/node-fetch" "^2.6.14" + +"@supabase/node-fetch@^2.6.14": + version "2.6.15" + resolved "https://registry.yarnpkg.com/@supabase/node-fetch/-/node-fetch-2.6.15.tgz#731271430e276983191930816303c44159e7226c" + integrity sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ== + dependencies: + whatwg-url "^5.0.0" + +"@supabase/postgrest-js@^1.9.0": + version "1.9.2" + resolved "https://registry.yarnpkg.com/@supabase/postgrest-js/-/postgrest-js-1.9.2.tgz#39c839022ce73f4eb5da6fb7724fb6a6392150c7" + integrity sha512-I6yHo8CC9cxhOo6DouDMy9uOfW7hjdsnCxZiaJuIVZm1dBGTFiQPgfMa9zXCamEWzNyWRjZvupAUuX+tqcl5Sw== + dependencies: + "@supabase/node-fetch" "^2.6.14" + +"@supabase/realtime-js@^2.9.3": + version "2.9.3" + resolved "https://registry.yarnpkg.com/@supabase/realtime-js/-/realtime-js-2.9.3.tgz#f822401aed70883dca5d538179b11089d6d1b6ed" + integrity sha512-lAp50s2n3FhGJFq+wTSXLNIDPw5Y0Wxrgt44eM5nLSA3jZNUUP3Oq2Ccd1CbZdVntPCWLZvJaU//pAd2NE+QnQ== + dependencies: + "@supabase/node-fetch" "^2.6.14" + "@types/phoenix" "^1.5.4" + "@types/ws" "^8.5.10" + ws "^8.14.2" + +"@supabase/storage-js@^2.5.4": + version "2.5.5" + resolved "https://registry.yarnpkg.com/@supabase/storage-js/-/storage-js-2.5.5.tgz#2958e2a2cec8440e605bb53bd36649288c4dfa01" + integrity sha512-OpLoDRjFwClwc2cjTJZG8XviTiQH4Ik8sCiMK5v7et0MDu2QlXjCAW3ljxJB5+z/KazdMOTnySi+hysxWUPu3w== + dependencies: + "@supabase/node-fetch" "^2.6.14" + +"@supabase/supabase-js@^2.39.3": + version "2.39.3" + resolved "https://registry.yarnpkg.com/@supabase/supabase-js/-/supabase-js-2.39.3.tgz#dfdc60337182a0a7b45cafb256281b159b75e25c" + integrity sha512-NoltJSaJNKDJNutO5sJPAAi5RIWrn1z2XH+ig1+cHDojT6BTN7TvZPNa3Kq3gFQWfO5H1N9El/bCTZJ3iFW2kQ== + dependencies: + "@supabase/functions-js" "^2.1.5" + "@supabase/gotrue-js" "^2.60.0" + "@supabase/node-fetch" "^2.6.14" + "@supabase/postgrest-js" "^1.9.0" + "@supabase/realtime-js" "^2.9.3" + "@supabase/storage-js" "^2.5.4" + "@surma/rollup-plugin-off-main-thread@^2.2.3": version "2.2.3" resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053" @@ -2408,6 +2465,11 @@ resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.1.tgz#27f7559836ad796cea31acb63163b203756a5b4e" integrity sha512-3YmXzzPAdOTVljVMkTMBdBEvlOLg2cDQaDhnnhT3nT9uDbnJzjWhKlzb+desT12Y7tGqaN6d+AbozcKzyL36Ng== +"@types/phoenix@^1.5.4": + version "1.6.4" + resolved "https://registry.yarnpkg.com/@types/phoenix/-/phoenix-1.6.4.tgz#cceac93a827555473ad38057d1df7d06eef1ed71" + integrity sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA== + "@types/postcss-js@^4.0.0": version "4.0.4" resolved "https://registry.yarnpkg.com/@types/postcss-js/-/postcss-js-4.0.4.tgz#4f0fafd7a0508c7edd33095f8743e8cf5c28ad78" @@ -2548,6 +2610,13 @@ resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43" integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA== +"@types/ws@^8.5.10": + version "8.5.10" + resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.10.tgz#4acfb517970853fa6574a3a6886791d04a396787" + integrity sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A== + dependencies: + "@types/node" "*" + "@types/ws@^8.5.5": version "8.5.8" resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.8.tgz#13efec7bd439d0bdf2af93030804a94f163b1430" @@ -9451,6 +9520,11 @@ tr46@^2.1.0: dependencies: punycode "^2.1.1" +tr46@~0.0.3: + version "0.0.3" + resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" + integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw== + tryer@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8" @@ -9774,6 +9848,11 @@ web-vitals@^2.1.0: resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.4.tgz#76563175a475a5e835264d373704f9dde718290c" integrity sha512-sVWcwhU5mX6crfI5Vd2dC4qchyTqxV8URinzt25XqVh+bHEPGH4C3NPrNionCP7Obx59wrYEbNlw4Z8sjALzZg== +webidl-conversions@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871" + integrity sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ== + webidl-conversions@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad" @@ -9926,6 +10005,14 @@ whatwg-mimetype@^2.3.0: resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf" integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g== +whatwg-url@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d" + integrity sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw== + dependencies: + tr46 "~0.0.3" + webidl-conversions "^3.0.0" + whatwg-url@^7.0.0: version "7.1.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06" @@ -10216,6 +10303,11 @@ ws@^8.13.0: resolved "https://registry.yarnpkg.com/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f" integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g== +ws@^8.14.2: + version "8.16.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4" + integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ== + xml-name-validator@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a" From 55bf9ead61bf11bb62c58a1107e152eb9597d29e Mon Sep 17 00:00:00 2001 From: pixelerate Date: Thu, 18 Jan 2024 13:56:19 +0000 Subject: [PATCH 02/15] Add daisy UI --- .env | 3 -- package.json | 2 +- src/Account.tsx | 2 + src/App.tsx | 29 ++++++------ src/components/Header.tsx | 31 +++++++++---- src/components/Main.tsx | 2 +- src/components/content/About.tsx | 43 ++++++----------- src/components/content/Accordion.tsx | 18 +++----- src/components/content/Dialog.tsx | 1 + src/components/filters/Filters.tsx | 4 +- src/components/filters/PolicyStance.tsx | 2 +- src/components/sidebar/Sidebar.tsx | 56 ++++++----------------- src/components/sidebar/SidebarContent.tsx | 2 +- tailwind.config.js | 2 +- yarn.lock | 32 ++++++++++++- 15 files changed, 113 insertions(+), 116 deletions(-) create mode 100644 src/components/content/Dialog.tsx diff --git a/.env b/.env index f3abcc8..87e2990 100644 --- a/.env +++ b/.env @@ -1,5 +1,2 @@ REACT_APP_API_ENDPOINT=https://api.futurelabourmps.com/ REACT_APP_API_COLS=A3:AZ70 - -REACT_APP_SUPABASE_URL=https://vwypfcwdyblmeujwclxu.supabase.co -REACT_APP_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InZ3eXBmY3dkeWJsbWV1andjbHh1Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3MDU0MzI2NzksImV4cCI6MjAyMTAwODY3OX0.DFOzoPAnv2UjkUSLdK6spq094bz--cn2dVtFL0BwPOE \ No newline at end of file diff --git a/package.json b/package.json index 8c04255..597098d 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "react-dom": "^18.2.0", "react-redux": "^8.1.3", "react-scripts": "5.0.1", - "rippleui": "^1.12.1", "styled-components": "^6.1.1", "typescript": "^4.4.2", "vanilla-cookieconsent": "^3.0.0-rc.17", @@ -53,6 +52,7 @@ }, "devDependencies": { "@reduxjs/toolkit": "^1.9.7", + "daisyui": "^4.6.0", "redux": "^4.2.1", "tailwindcss": "^3.3.5" }, diff --git a/src/Account.tsx b/src/Account.tsx index 5b1923d..3a2ea4c 100644 --- a/src/Account.tsx +++ b/src/Account.tsx @@ -83,6 +83,7 @@ export default function Account({ session }: { session: any }) { className="button block primary" type="submit" disabled={loading} + name="Submit account info" > {loading ? "Loading ..." : "Update"} @@ -93,6 +94,7 @@ export default function Account({ session }: { session: any }) { className="button block" type="button" onClick={() => supabase.auth.signOut()} + name="sign out" > Sign Out diff --git a/src/App.tsx b/src/App.tsx index f340ebb..fadba81 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from "react"; import "./App.css"; import { Sidebar } from "./components/sidebar/Sidebar"; import Main from "./components/Main"; -import { SidebarContent } from "./components/sidebar/SidebarContent"; import { Header } from "./components/Header"; import { AppState } from "./state/store"; import { useDispatch, useSelector } from "react-redux"; @@ -11,8 +10,6 @@ import { DataStatus, MP } from "./data/types"; import { SET_DATA_ACTION } from "./state/actions"; import { useAnalytics } from "./analytics"; import { supabase } from "./supabaseClient"; -import Auth from "./Auth"; -import Account from "./Account"; import { Session } from "@supabase/supabase-js"; function App() { @@ -43,19 +40,21 @@ function App() { }, []); return ( -
- {!session ? ( - - ) : ( - - )} - {/*
- - - -
*/} -
+ + <> +
+
+ + ); } export default App; + +{ + /* {!session ? ( + + ) : ( + + )} */ +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index f9ed9ad..cd18de7 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -14,7 +14,7 @@ export const Header: React.FC<{ }; return ( -
+
); diff --git a/src/components/Main.tsx b/src/components/Main.tsx index 25a9953..608806a 100644 --- a/src/components/Main.tsx +++ b/src/components/Main.tsx @@ -4,7 +4,7 @@ import MPIndex from "./content/MPIndex"; const Main: React.FC<{ view: "about" | "index" }> = ({ view }) => { return ( -
+
{view === "about" && } {view === "index" && }
diff --git a/src/components/content/About.tsx b/src/components/content/About.tsx index 1f4afcb..1a97def 100644 --- a/src/components/content/About.tsx +++ b/src/components/content/About.tsx @@ -51,8 +51,9 @@ const faqs: { question: string; answer: JSX.Element }[] = [ (see an example here) - . We have included Labour candidates who haven't been previously elected and - have more than an 80% chance of winning (data collected December 2023). + . We have included Labour candidates who haven't been previously elected + and have more than an 80% chance of winning (data collected December + 2023).

), }, @@ -166,7 +167,7 @@ const faqs: { question: string; answer: JSX.Element }[] = [ get involved {" "} - or you can{" "} + or you can{" "} donate @@ -186,7 +187,6 @@ const faqs: { question: string; answer: JSX.Element }[] = [

), }, - ]; const About: React.FC = () => { @@ -207,9 +207,10 @@ const About: React.FC = () => {

The next election is likely to be won by Labour. Our database shows - Labour candidates who would be new to parliament and are very likely to get - elected. It can be used to build relationships with this new cohort of - Labour MPs and influence what the next Labour government does. + Labour candidates who would be new to parliament and are very likely + to get elected. It can be used to build relationships with this new + cohort of Labour MPs and influence what the next Labour government + does.

This is the first version of this database and over the next few @@ -231,29 +232,13 @@ const FAQQuestion: React.FC<{ answer: JSX.Element; idx: number; }> = ({ question, answer, idx }) => { - const [open, setOpen] = useState(false); - return ( -

- { - setOpen(!open); - }} - /> - -
+
+ +
+

{question}

+
+
{answer}
diff --git a/src/components/content/Accordion.tsx b/src/components/content/Accordion.tsx index 30147bd..49f1ec8 100644 --- a/src/components/content/Accordion.tsx +++ b/src/components/content/Accordion.tsx @@ -4,18 +4,14 @@ import { ProfileContent, ProfileHeader } from "./Profile"; export const Accordion: React.FC<{ mps: MP[] }> = ({ mps }) => { return ( -
+
{mps.map((mp, i) => { return ( -
- +
+ -
-
+
+
diff --git a/src/components/content/Dialog.tsx b/src/components/content/Dialog.tsx new file mode 100644 index 0000000..6542df5 --- /dev/null +++ b/src/components/content/Dialog.tsx @@ -0,0 +1 @@ +import React from "react"; diff --git a/src/components/filters/Filters.tsx b/src/components/filters/Filters.tsx index 2a3596d..d345bba 100644 --- a/src/components/filters/Filters.tsx +++ b/src/components/filters/Filters.tsx @@ -28,13 +28,13 @@ export const SortByDropdown: React.FC = () => { className="tooltip-click tooltip-right z-40" data-tooltip="See FAQ" > - handleCheck()} onChange={(_e) => handleCheck()} data-ph-capture-attribute-filter-category={category} diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index 44838f5..694b395 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,51 +1,25 @@ import React from "react"; +import { SidebarContent } from "./SidebarContent"; export const Sidebar: React.FC<{ children: React.ReactNode }> = ({ children, }) => { return ( - <> - -
-
- -
-
- -
-
- - {children} +
+ +
{children}
+
+ + +
+ {/* Sidebar content here */} +
-
- {children} -
- +
); }; diff --git a/src/components/sidebar/SidebarContent.tsx b/src/components/sidebar/SidebarContent.tsx index f033f1f..bf7a50b 100644 --- a/src/components/sidebar/SidebarContent.tsx +++ b/src/components/sidebar/SidebarContent.tsx @@ -6,7 +6,7 @@ import { SortByDropdown } from "../filters/Filters"; export const SidebarContent: React.FC = () => { return ( -
+
diff --git a/tailwind.config.js b/tailwind.config.js index 1432ce0..182d736 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,5 +4,5 @@ module.exports = { theme: { extend: {}, }, - plugins: [require("rippleui")], + plugins: [require("daisyui")], }; diff --git a/yarn.lock b/yarn.lock index ac31821..2374c7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3955,6 +3955,14 @@ css-select@^4.1.3: domutils "^2.8.0" nth-check "^2.0.1" +css-selector-tokenizer@^0.8: + version "0.8.0" + resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd" + integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg== + dependencies: + cssesc "^3.0.0" + fastparse "^1.1.2" + css-to-react-native@^3.0.0, css-to-react-native@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz#cdd8099f71024e149e4f6fe17a7d46ecd55f1e32" @@ -4083,6 +4091,21 @@ csstype@^3.0.2, csstype@^3.1.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b" integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ== +culori@^3: + version "3.3.0" + resolved "https://registry.yarnpkg.com/culori/-/culori-3.3.0.tgz#e33530adbd124d53bd6550394397e695eaaed739" + integrity sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ== + +daisyui@^4.6.0: + version "4.6.0" + resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-4.6.0.tgz#3b2d34ba2995633530b510ebaf9fbc6ed03374c1" + integrity sha512-B5ZB/sczXpp4LMdo/SZrtYY/U2hq+Vr9I15QawuWZ0VwgtSAbuZpAZUftKVryEsPuv3BM0yVlBED0nAmtis/dw== + dependencies: + css-selector-tokenizer "^0.8" + culori "^3" + picocolors "^1" + postcss-js "^4" + damerau-levenshtein@^1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" @@ -5009,6 +5032,11 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw== +fastparse@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9" + integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ== + fastq@^1.6.0: version "1.15.0" resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a" @@ -7461,7 +7489,7 @@ picocolors@^0.2.1: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f" integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA== -picocolors@^1.0.0: +picocolors@^1, picocolors@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c" integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ== @@ -7674,7 +7702,7 @@ postcss-initial@^4.0.1: resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42" integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ== -postcss-js@^4.0.0, postcss-js@^4.0.1: +postcss-js@^4, postcss-js@^4.0.0, postcss-js@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2" integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== From 2c72528d9b53fbd783d025634fc6711df5c0078f Mon Sep 17 00:00:00 2001 From: pixelerate Date: Thu, 18 Jan 2024 14:04:45 +0000 Subject: [PATCH 03/15] fix accessibility issues --- src/Account.tsx | 4 ++-- src/components/Header.tsx | 4 ++-- src/components/content/Profile.tsx | 5 +++-- src/components/filters/Filters.tsx | 2 +- src/components/filters/PolicyStance.tsx | 12 +++++++++++- 5 files changed, 19 insertions(+), 8 deletions(-) diff --git a/src/Account.tsx b/src/Account.tsx index 3a2ea4c..4b4ef68 100644 --- a/src/Account.tsx +++ b/src/Account.tsx @@ -83,7 +83,7 @@ export default function Account({ session }: { session: any }) { className="button block primary" type="submit" disabled={loading} - name="Submit account info" + aria-label="Submit account info" > {loading ? "Loading ..." : "Update"} @@ -94,7 +94,7 @@ export default function Account({ session }: { session: any }) { className="button block" type="button" onClick={() => supabase.auth.signOut()} - name="sign out" + aria-label="sign out" > Sign Out diff --git a/src/components/Header.tsx b/src/components/Header.tsx index cd18de7..83a59ee 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -28,14 +28,14 @@ export const Header: React.FC<{ diff --git a/src/components/content/Profile.tsx b/src/components/content/Profile.tsx index c79a7e9..b7b0f49 100644 --- a/src/components/content/Profile.tsx +++ b/src/components/content/Profile.tsx @@ -60,8 +60,8 @@ export const ProfileHeader: React.FC<{ MP Headshot ) : ( @@ -106,6 +106,7 @@ export const ProfileHeader: React.FC<{ diff --git a/src/components/filters/Filters.tsx b/src/components/filters/Filters.tsx index d345bba..4c23f0b 100644 --- a/src/components/filters/Filters.tsx +++ b/src/components/filters/Filters.tsx @@ -28,7 +28,7 @@ export const SortByDropdown: React.FC = () => { className="tooltip-click tooltip-right z-40" data-tooltip="See FAQ" > - diff --git a/src/components/filters/PolicyStance.tsx b/src/components/filters/PolicyStance.tsx index 3d5d099..9bd9f43 100644 --- a/src/components/filters/PolicyStance.tsx +++ b/src/components/filters/PolicyStance.tsx @@ -29,6 +29,9 @@ export const PolicyStance: React.FC = () => { ); }; +const formatCategory = (category: string): string => + category === "publicOwnership" ? "public ownership" : category; + const FilterCheckbox: React.FC<{ category: PolicyType; }> = ({ category }) => { @@ -53,10 +56,17 @@ const FilterCheckbox: React.FC<{ key={category} >

- {category === "publicOwnership" ? "public ownership" : category} + {formatCategory(category)}

+ handleCheck()} onChange={(_e) => handleCheck()} From 99065778d823a80340bfac0029a5a646a90f0fb2 Mon Sep 17 00:00:00 2001 From: pixelerate Date: Thu, 18 Jan 2024 14:14:23 +0000 Subject: [PATCH 04/15] update favicon --- public/index.html | 2 +- public/logo.svg | 1 + public/manifest.json | 7 +------ public/scales.png | Bin 423 -> 0 bytes src/index.css | 2 +- src/logo.svg | 1 - 6 files changed, 4 insertions(+), 9 deletions(-) create mode 100644 public/logo.svg delete mode 100644 public/scales.png delete mode 100644 src/logo.svg diff --git a/public/index.html b/public/index.html index c60a0d3..ff808a7 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..cb8142f --- /dev/null +++ b/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json index 6977e50..9c95265 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -3,14 +3,9 @@ "name": "Future Labour MPs", "icons": [ { - "src": "favicon.ico", + "src": "logo.svg", "sizes": "64x64 32x32 24x24 16x16", "type": "image/x-icon" - }, - { - "src": "scales.png", - "type": "image/png", - "sizes": "192x192" } ], "start_url": ".", diff --git a/public/scales.png b/public/scales.png deleted file mode 100644 index c8843d391c34ac9c683d3e8644e44d0a711efb29..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 423 zcmV;Y0a*TtP)Px$VM#xA01m{@>nM4 zmjmF}3fz)~ymveLE5JKt9F8-*FeR=5oJ9l|##Ka~B66|H^DlsV3Vu?F^L&_7STzEW ztFweb@hhq4^I-r|N9vFWiE(kzBK|G}dlf)p_?Hi=qrbRYaZss80%A3aD%1eDn5qyU zSBGa_7a%#}VDsTlF`Jw<04_!n)4PT)pnC3p!fxVurPHOafz~QO0Xi8i4FNb&@8nt) zEC6jE)LWZ!6=W%E^3Jh93&>wSMHO-Yy>ngf8~`mqtH%=ES>N0_K(luafY%v?Kn>94 zU84oqJFJ3Mzn%>mpv$|U4Rsq^FS2!SXn-#70suVb%ZH~TyJ~YFX@D;88UU9a+< \ No newline at end of file From 0d9e13258c396a36e5f59eaf815b1a27b8da6c03 Mon Sep 17 00:00:00 2001 From: pixelerate Date: Thu, 18 Jan 2024 15:00:36 +0000 Subject: [PATCH 05/15] add sign up modal --- src/App.tsx | 11 +++++- src/Auth.tsx | 49 ------------------------ src/{ => components/auth}/Account.tsx | 2 +- src/components/auth/Auth.tsx | 55 +++++++++++++++++++++++++++ src/components/auth/SignUpModal.tsx | 35 +++++++++++++++++ src/components/content/Dialog.tsx | 1 - 6 files changed, 101 insertions(+), 52 deletions(-) delete mode 100644 src/Auth.tsx rename src/{ => components/auth}/Account.tsx (97%) create mode 100644 src/components/auth/Auth.tsx create mode 100644 src/components/auth/SignUpModal.tsx delete mode 100644 src/components/content/Dialog.tsx diff --git a/src/App.tsx b/src/App.tsx index fadba81..6b9038e 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,7 @@ import { SET_DATA_ACTION } from "./state/actions"; import { useAnalytics } from "./analytics"; import { supabase } from "./supabaseClient"; import { Session } from "@supabase/supabase-js"; +import { SignUpModal } from "./components/auth/SignUpModal"; function App() { const view = useSelector((state: AppState) => state.view); @@ -37,11 +38,19 @@ function App() { supabase.auth.onAuthStateChange((_event, session) => { setSession(session); }); - }, []); + }, [supabase.auth]); + + useEffect(() => { + if (document !== null) { + // @ts-ignore + document.getElementById("sign_up_modal").showModal(); + } + }); return ( <> +
diff --git a/src/Auth.tsx b/src/Auth.tsx deleted file mode 100644 index 3b176e5..0000000 --- a/src/Auth.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import { useState } from "react"; -import { supabase } from "./supabaseClient"; - -export default function Auth() { - const [loading, setLoading] = useState(false); - const [email, setEmail] = useState(""); - - const handleLogin = async (event: { preventDefault: () => void }) => { - event.preventDefault(); - - setLoading(true); - const { error } = await supabase.auth.signInWithOtp({ email }); - - if (error) { - alert(error.message); - } else { - alert("Check your email for the login link!"); - } - setLoading(false); - }; - - return ( -
-
-

Supabase + React

-

- Sign in via magic link with your email below -

-
-
- setEmail(e.target.value)} - /> -
-
- -
-
-
-
- ); -} diff --git a/src/Account.tsx b/src/components/auth/Account.tsx similarity index 97% rename from src/Account.tsx rename to src/components/auth/Account.tsx index 4b4ef68..203c9aa 100644 --- a/src/Account.tsx +++ b/src/components/auth/Account.tsx @@ -5,7 +5,7 @@ import { FormEventHandler, FormEvent, } from "react"; -import { supabase } from "./supabaseClient"; +import { supabase } from "../../supabaseClient"; export default function Account({ session }: { session: any }) { const [loading, setLoading] = useState(true); diff --git a/src/components/auth/Auth.tsx b/src/components/auth/Auth.tsx new file mode 100644 index 0000000..e1764eb --- /dev/null +++ b/src/components/auth/Auth.tsx @@ -0,0 +1,55 @@ +import { useState } from "react"; +import { supabase } from "../../supabaseClient"; + +export default function Auth() { + const [loading, setLoading] = useState(false); + const [email, setEmail] = useState(""); + + const handleLogin = async (event: { preventDefault: () => void }) => { + event.preventDefault(); + + setLoading(true); + const { error } = await supabase.auth.signInWithOtp({ email }); + + if (error) { + alert(error.message); + } else { + alert("Check your email for the login link!"); + } + setLoading(false); + }; + + return ( +
+
+

+ We're trying to get a clearer picture of how these tools are used, so + we can improve them in the future. +

+

Would you like to help us out by signing up?

+
+
+
+ + setEmail(e.target.value)} + /> + +
+
+
+ ); +} diff --git a/src/components/auth/SignUpModal.tsx b/src/components/auth/SignUpModal.tsx new file mode 100644 index 0000000..436dff0 --- /dev/null +++ b/src/components/auth/SignUpModal.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import Auth from "./Auth"; +import Account from "./Account"; +import { Session } from "@supabase/supabase-js"; + +// {/* You can open the modal using document.getElementById('ID').showModal() method */} +// +export const SignUpModal: React.FC<{ + status: "sign-up" | "add-info"; + session: Session | null; +}> = ({ status, session }) => { + const getModalContent = () => { + switch (status) { + case "sign-up": + return ; + case "add-info": + return ; + } + }; + + return ( + +
+
+ {/* if there is a button in form, it will close the modal */} + +
+

Hello!

+ {getModalContent()} +
+ + ); +}; diff --git a/src/components/content/Dialog.tsx b/src/components/content/Dialog.tsx deleted file mode 100644 index 6542df5..0000000 --- a/src/components/content/Dialog.tsx +++ /dev/null @@ -1 +0,0 @@ -import React from "react"; From f4b879596e752ebafcce5e6a41db334185e16172 Mon Sep 17 00:00:00 2001 From: pixelerate Date: Thu, 18 Jan 2024 16:27:05 +0000 Subject: [PATCH 06/15] Add routing --- package.json | 1 + src/App.css | 9 +-- src/App.tsx | 32 ++++---- src/components/Header.tsx | 54 +++++++------ src/components/Main.tsx | 14 ---- src/index.tsx | 6 +- src/{components/content => pages}/About.tsx | 2 +- src/pages/Account.tsx | 8 ++ src/{components/content => pages}/MPIndex.tsx | 10 +-- src/pages/SignUp.tsx | 5 ++ src/state/actions.ts | 4 +- src/state/reducer.ts | 14 +--- src/state/store.ts | 4 +- yarn.lock | 81 +++++-------------- 14 files changed, 100 insertions(+), 144 deletions(-) delete mode 100644 src/components/Main.tsx rename src/{components/content => pages}/About.tsx (99%) create mode 100644 src/pages/Account.tsx rename src/{components/content => pages}/MPIndex.tsx (79%) create mode 100644 src/pages/SignUp.tsx diff --git a/package.json b/package.json index 597098d..6933c66 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.1.3", + "react-router-dom": "6", "react-scripts": "5.0.1", "styled-components": "^6.1.1", "typescript": "^4.4.2", diff --git a/src/App.css b/src/App.css index 614b3de..0ee21a7 100644 --- a/src/App.css +++ b/src/App.css @@ -27,11 +27,6 @@ color: #61dafb; } -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } +.nav-link.active { + @apply bg-slate-800 text-white dark:bg-slate-100 dark:text-black; } diff --git a/src/App.tsx b/src/App.tsx index 6b9038e..61e2303 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,10 +1,8 @@ import React, { useCallback, useEffect, useState } from "react"; import "./App.css"; import { Sidebar } from "./components/sidebar/Sidebar"; -import Main from "./components/Main"; import { Header } from "./components/Header"; -import { AppState } from "./state/store"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch } from "react-redux"; import { fetchMPs } from "./data/utils/utils"; import { DataStatus, MP } from "./data/types"; import { SET_DATA_ACTION } from "./state/actions"; @@ -12,9 +10,13 @@ import { useAnalytics } from "./analytics"; import { supabase } from "./supabaseClient"; import { Session } from "@supabase/supabase-js"; import { SignUpModal } from "./components/auth/SignUpModal"; +import MPIndex from "./pages/MPIndex"; +import { Routes, Route } from "react-router-dom"; +import About from "./pages/About"; +import { AccountPage } from "./pages/Account"; +import { SignUpPage } from "./pages/SignUp"; function App() { - const view = useSelector((state: AppState) => state.view); const dispatch = useDispatch(); const updateData = useCallback( (mpData: MP[], status: DataStatus) => { @@ -51,19 +53,21 @@ function App() { <> -
-
+
+
+ + } /> + } /> + } + /> + } /> + +
); } export default App; - -{ - /* {!session ? ( - - ) : ( - - )} */ -} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 83a59ee..0e2f828 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,20 +1,14 @@ import React from "react"; import { ProjectTitle } from "./atoms/ProjectTitle"; -import { ViewType } from "../data/types"; -import { SET_VIEW_ACTION } from "../state/actions"; -import { useDispatch } from "react-redux"; import { SearchInput } from "./filters/SearchInput"; +import { NavLink, useLocation } from "react-router-dom"; +import { Session } from "@supabase/supabase-js"; -export const Header: React.FC<{ - view: "about" | "index"; -}> = ({ view }) => { - const dispatch = useDispatch(); - const setView = (view: ViewType) => { - dispatch({ type: SET_VIEW_ACTION, payload: { view } }); - }; - +export const Header: React.FC<{ session: Session | null }> = ({ session }) => { + const route = useLocation(); + console.log(route); return ( -
+
); diff --git a/src/components/Main.tsx b/src/components/Main.tsx deleted file mode 100644 index 608806a..0000000 --- a/src/components/Main.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from "react"; -import About from "./content/About"; -import MPIndex from "./content/MPIndex"; - -const Main: React.FC<{ view: "about" | "index" }> = ({ view }) => { - return ( -
- {view === "about" && } - {view === "index" && } -
- ); -}; - -export default Main; diff --git a/src/index.tsx b/src/index.tsx index fd658b6..ee42dd8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -4,6 +4,8 @@ import "./index.css"; import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { Provider } from "react-redux"; +import { BrowserRouter } from "react-router-dom"; + import store from "./state/store"; const root = ReactDOM.createRoot( @@ -12,7 +14,9 @@ const root = ReactDOM.createRoot( root.render( - + + + ); diff --git a/src/components/content/About.tsx b/src/pages/About.tsx similarity index 99% rename from src/components/content/About.tsx rename to src/pages/About.tsx index 1a97def..34733c7 100644 --- a/src/components/content/About.tsx +++ b/src/pages/About.tsx @@ -1,6 +1,6 @@ import { Minus, Plus } from "@phosphor-icons/react"; import React, { useState } from "react"; -import TextLink from "../atoms/Link"; +import TextLink from "../components/atoms/Link"; const faqs: { question: string; answer: JSX.Element }[] = [ { diff --git a/src/pages/Account.tsx b/src/pages/Account.tsx new file mode 100644 index 0000000..11b4d85 --- /dev/null +++ b/src/pages/Account.tsx @@ -0,0 +1,8 @@ +import { Session } from "@supabase/supabase-js"; +import React from "react"; + +export const AccountPage: React.FC<{ session: Session | null }> = ({ + session, +}) => { + return
Edit account here, {session?.user.email}
; +}; diff --git a/src/components/content/MPIndex.tsx b/src/pages/MPIndex.tsx similarity index 79% rename from src/components/content/MPIndex.tsx rename to src/pages/MPIndex.tsx index a0be64f..221a066 100644 --- a/src/components/content/MPIndex.tsx +++ b/src/pages/MPIndex.tsx @@ -1,10 +1,10 @@ import React, { useMemo, useState } from "react"; -import { Accordion } from "./Accordion"; -import { filterProfiles, sortByWin } from "../../data/utils/utils"; +import { Accordion } from "../components/content/Accordion"; +import { filterProfiles, sortByWin } from "../data/utils/utils"; import { useSelector } from "react-redux"; -import { AppState } from "../../state/store"; -import { MP } from "../../data/types"; -import { Spinner } from "../atoms/Spinner"; +import { AppState } from "../state/store"; +import { MP } from "../data/types"; +import { Spinner } from "../components/atoms/Spinner"; const MPIndex: React.FC = () => { const filters = useSelector((state: AppState) => state.activeFilters); diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx new file mode 100644 index 0000000..5f7049d --- /dev/null +++ b/src/pages/SignUp.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export const SignUpPage: React.FC = () => { + return <>Sign up here; +}; diff --git a/src/state/actions.ts b/src/state/actions.ts index 20ca96a..df4a4f1 100644 --- a/src/state/actions.ts +++ b/src/state/actions.ts @@ -1,13 +1,11 @@ -import { DataStatus, MP, PolicyType, ViewType } from "../data/types"; +import { DataStatus, MP, PolicyType } from "../data/types"; -export const SET_VIEW_ACTION = "set-view"; export const SET_DATA_ACTION = "set-data"; export const SET_POLICY_STANCE_ACTION = "set-policy-stance"; export const SET_SEARCH_INPUT_ACTION = "set-search-input"; export const SET_SORTBY_ACTION = "set-sort-by-input"; export type Action = - | { type: typeof SET_VIEW_ACTION; payload: { view: ViewType } } | { type: typeof SET_DATA_ACTION; payload: { profiles: MP[]; status: DataStatus }; diff --git a/src/state/reducer.ts b/src/state/reducer.ts index d07264f..2099f6b 100644 --- a/src/state/reducer.ts +++ b/src/state/reducer.ts @@ -3,7 +3,6 @@ import { Action, SET_POLICY_STANCE_ACTION, SET_DATA_ACTION, - SET_VIEW_ACTION, SET_SEARCH_INPUT_ACTION, SET_SORTBY_ACTION, } from "./actions"; @@ -27,19 +26,14 @@ export default function appReducer( }, }; } - case SET_VIEW_ACTION: { - captureAnalyticsPageView(action.payload.view); - return { - ...state, - view: action.payload.view, - }; - } case SET_POLICY_STANCE_ACTION: { const { category, positive } = action.payload; const { policies } = state.activeFilters; captureAnalyticsEvent("filter changed", { category, positive }); - const policyStances = { ...policies, [category]: { positive } } - const activeFilters = Object.entries(policyStances).filter(([key, p]) => p.positive).map(([policy, _]) => policy) + const policyStances = { ...policies, [category]: { positive } }; + const activeFilters = Object.entries(policyStances) + .filter(([key, p]) => p.positive) + .map(([policy, _]) => policy); captureAnalyticsEvent("set active filters", activeFilters); return { ...state, diff --git a/src/state/store.ts b/src/state/store.ts index 782c6ab..9c4e61f 100644 --- a/src/state/store.ts +++ b/src/state/store.ts @@ -1,18 +1,16 @@ import { values } from "../data/test/rawResponse"; -import { Filters, MP, ViewType } from "../data/types"; +import { Filters, MP } from "../data/types"; import { formatResponse } from "../data/utils/utils"; import rootReducer from "./reducer"; import { configureStore } from "@reduxjs/toolkit"; export type AppState = { data: { status: "loading" | "complete" | "error"; profiles: MP[] }; - view: ViewType; activeFilters: Filters; }; export const initState: AppState = { data: { status: "loading", profiles: formatResponse(values) }, - view: "index", activeFilters: { searchInput: "", policies: { diff --git a/yarn.lock b/yarn.lock index 2374c7c..8022770 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1949,6 +1949,11 @@ redux-thunk "^2.4.2" reselect "^4.1.8" +"@remix-run/router@1.14.2": + version "1.14.2" + resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.14.2.tgz#4d58f59908d9197ba3179310077f25c88e49ed17" + integrity sha512-ACXpdMM9hmKZww21yEqWwiLws/UPLhNKvimN8RrYSqPSvB3ov7sLvAcfvaxePeLvccTQKGdkDIhLYApZVDFuKg== + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -2470,13 +2475,6 @@ resolved "https://registry.yarnpkg.com/@types/phoenix/-/phoenix-1.6.4.tgz#cceac93a827555473ad38057d1df7d06eef1ed71" integrity sha512-B34A7uot1Cv0XtaHRYDATltAdKx0BvVKNgYNqE4WjtPUa4VQJM7kxeXcVKaH+KS+kCmZ+6w+QaUdcljiheiBJA== -"@types/postcss-js@^4.0.0": - version "4.0.4" - resolved "https://registry.yarnpkg.com/@types/postcss-js/-/postcss-js-4.0.4.tgz#4f0fafd7a0508c7edd33095f8743e8cf5c28ad78" - integrity sha512-j5+GMZVIPCJpRTwI/mO64mCzv7X+zAEq3JP0EV2lo/BrLWHAohEubUJimIAY23rH27+wKce0fXUYjAdBoqlaYw== - dependencies: - postcss "^8.3.3" - "@types/prettier@^2.1.5": version "2.7.3" resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.3.tgz#3e51a17e291d01d17d3fc61422015a933af7a08f" @@ -7106,11 +7104,6 @@ nanoid@^3.3.6: resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c" integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA== -nanoid@^3.3.7: - version "3.3.7" - resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8" - integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g== - natural-compare-lite@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4" @@ -7702,7 +7695,7 @@ postcss-initial@^4.0.1: resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42" integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ== -postcss-js@^4, postcss-js@^4.0.0, postcss-js@^4.0.1: +postcss-js@^4, postcss-js@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-4.0.1.tgz#61598186f3703bab052f1c4f7d805f3991bee9d2" integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw== @@ -8066,15 +8059,6 @@ postcss@^7.0.35: picocolors "^0.2.1" source-map "^0.6.1" -postcss@^8.3.3, postcss@^8.4.19: - version "8.4.32" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.32.tgz#1dac6ac51ab19adb21b8b34fd2d93a86440ef6c9" - integrity sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw== - dependencies: - nanoid "^3.3.7" - picocolors "^1.0.0" - source-map-js "^1.0.2" - postcss@^8.3.5, postcss@^8.4.21, postcss@^8.4.23, postcss@^8.4.31, postcss@^8.4.4: version "8.4.31" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.31.tgz#92b451050a9f914da6755af352bdc0192508656d" @@ -8327,6 +8311,21 @@ react-refresh@^0.11.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A== +react-router-dom@6: + version "6.21.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.21.2.tgz#5fba851731a194fa32c31990c4829c5e247f650a" + integrity sha512-tE13UukgUOh2/sqYr6jPzZTzmzc70aGRP4pAjG2if0IP3aUT+sBtAKUJh0qMh0zylJHGLmzS+XWVaON4UklHeg== + dependencies: + "@remix-run/router" "1.14.2" + react-router "6.21.2" + +react-router@6.21.2: + version "6.21.2" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.21.2.tgz#8820906c609ae7e4e8f926cc8eb5ce161428b956" + integrity sha512-jJcgiwDsnaHIeC+IN7atO0XiSRCrOsQAHHbChtJxmgqG2IaYQXSnhqGb5vk2CU/wBQA12Zt+TkbuJjIn65gzbA== + dependencies: + "@remix-run/router" "1.14.2" + react-scripts@5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-5.0.1.tgz#6285dbd65a8ba6e49ca8d651ce30645a6d980003" @@ -8640,16 +8639,6 @@ rimraf@^3.0.0, rimraf@^3.0.2: dependencies: glob "^7.1.3" -rippleui@^1.12.1: - version "1.12.1" - resolved "https://registry.yarnpkg.com/rippleui/-/rippleui-1.12.1.tgz#417cf83fd99095b71360683bcdf9d03904ab596c" - integrity sha512-2LLqGQy0Gb+V/XHC+Ucx7rKcgisTr1HBevVc+NiwTiJn4y38Ya1cad8I/ZZHfWbrvKG/bPKYh+XJCM8M4cUs0A== - dependencies: - "@types/postcss-js" "^4.0.0" - postcss "^8.4.19" - postcss-js "^4.0.0" - tailwindcss "^3.3.1" - rollup-plugin-terser@^7.0.0: version "7.0.2" resolved "https://registry.yarnpkg.com/rollup-plugin-terser/-/rollup-plugin-terser-7.0.2.tgz#e8fbba4869981b2dc35ae7e8a502d5c6c04d324d" @@ -9382,34 +9371,6 @@ tailwindcss@^3.0.2, tailwindcss@^3.3.5: resolve "^1.22.2" sucrase "^3.32.0" -tailwindcss@^3.3.1: - version "3.3.6" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.6.tgz#4dd7986bf4902ad385d90d45fd4b2fa5fab26d5f" - integrity sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw== - dependencies: - "@alloc/quick-lru" "^5.2.0" - arg "^5.0.2" - chokidar "^3.5.3" - didyoumean "^1.2.2" - dlv "^1.1.3" - fast-glob "^3.3.0" - glob-parent "^6.0.2" - is-glob "^4.0.3" - jiti "^1.19.1" - lilconfig "^2.1.0" - micromatch "^4.0.5" - normalize-path "^3.0.0" - object-hash "^3.0.0" - picocolors "^1.0.0" - postcss "^8.4.23" - postcss-import "^15.1.0" - postcss-js "^4.0.1" - postcss-load-config "^4.0.1" - postcss-nested "^6.0.1" - postcss-selector-parser "^6.0.11" - resolve "^1.22.2" - sucrase "^3.32.0" - tapable@^1.0.0: version "1.1.3" resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" From 5a03408cd8ffe4abad23ebf9265da0a69ac45f3f Mon Sep 17 00:00:00 2001 From: pixelerate Date: Thu, 18 Jan 2024 16:34:05 +0000 Subject: [PATCH 07/15] Update Header.tsx --- src/components/Header.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 0e2f828..5c0cef8 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -6,7 +6,6 @@ import { Session } from "@supabase/supabase-js"; export const Header: React.FC<{ session: Session | null }> = ({ session }) => { const route = useLocation(); - console.log(route); return (
-
+
Home From 5ea8c5c8fcd05abf266593e8585faddb9fdb5640 Mon Sep 17 00:00:00 2001 From: pixelerate Date: Thu, 18 Jan 2024 16:55:35 +0000 Subject: [PATCH 08/15] dark mode tweaks --- src/App.css | 8 ++++++++ src/components/Header.tsx | 11 ++++------- src/components/content/Accordion.tsx | 2 +- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/src/App.css b/src/App.css index 0ee21a7..26014c0 100644 --- a/src/App.css +++ b/src/App.css @@ -27,6 +27,14 @@ color: #61dafb; } +.nav-link { + @apply btn btn-sm bg-slate-200 dark:bg-slate-700 dark:text-white; +} + +.nav-link.accent { + @apply bg-accent; +} + .nav-link.active { @apply bg-slate-800 text-white dark:bg-slate-100 dark:text-black; } diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 5c0cef8..86da982 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -18,21 +18,18 @@ export const Header: React.FC<{ session: Session | null }> = ({ session }) => {
- + Home - + About {session === null ? ( - + Sign Up ) : ( - + Account )} diff --git a/src/components/content/Accordion.tsx b/src/components/content/Accordion.tsx index 49f1ec8..7751cbd 100644 --- a/src/components/content/Accordion.tsx +++ b/src/components/content/Accordion.tsx @@ -11,7 +11,7 @@ export const Accordion: React.FC<{ mps: MP[] }> = ({ mps }) => {