From d5e9c56dde0565355f9aef28057bda5f9b647e5b Mon Sep 17 00:00:00 2001 From: minna Date: Thu, 21 Oct 2021 14:48:16 +0100 Subject: [PATCH 1/3] [FUEL-002] feat: change UI feel --- components/cards/ResourceCard.tsx | 14 +++++--------- components/layout/index.tsx | 2 +- components/navbar/DashTopBar.tsx | 1 + components/navbar/Sidebar.tsx | 2 +- pages/_app.tsx | 4 ++-- styles/globals.css | 13 +++++++++++++ tailwind.config.js | 7 ++++++- 7 files changed, 29 insertions(+), 14 deletions(-) diff --git a/components/cards/ResourceCard.tsx b/components/cards/ResourceCard.tsx index f829501..c4c9b16 100644 --- a/components/cards/ResourceCard.tsx +++ b/components/cards/ResourceCard.tsx @@ -1,10 +1,8 @@ -import { GetStaticProps } from "next"; -import Link from "next/link"; import { ItemProps } from "./types"; const ResourceCard = ({ item }: ItemProps) => { return ( -
  • +
  • @@ -15,21 +13,19 @@ const ResourceCard = ({ item }: ItemProps) => { ) : (
    {`${item.name[0]}${item.name[1]}`.toUpperCase()}
    )} -

    {item.name}

    +

    {item.name}

    {" "} -

    +

    {item.description}

    -
    -

    - {item.tag} -

    +
    + {item.tag}
    • diff --git a/components/layout/index.tsx b/components/layout/index.tsx index 4d43153..370e4bc 100644 --- a/components/layout/index.tsx +++ b/components/layout/index.tsx @@ -19,7 +19,7 @@ const Layout = ({ children }: any) => {
    -
    +
    code-icon
    diff --git a/components/navbar/DashTopBar.tsx b/components/navbar/DashTopBar.tsx index 7e53ae0..6b3a4cf 100644 --- a/components/navbar/DashTopBar.tsx +++ b/components/navbar/DashTopBar.tsx @@ -26,6 +26,7 @@ export default function DashTopBar() { placeholder="Enter your search term..." />
    +
    ); diff --git a/components/navbar/Sidebar.tsx b/components/navbar/Sidebar.tsx index fce4c36..1e7baed 100644 --- a/components/navbar/Sidebar.tsx +++ b/components/navbar/Sidebar.tsx @@ -11,7 +11,7 @@ const Sidebar = (props: ToggleProps) => { id="menu" className={`sticky top-0 z-10 flex-col ${ props.toggleState ? "" : "hidden" - } h-screen px-4 py-4 bg-white dark:bg-black-brand-01 shadow-inner w-full lg:w-60 xl:w-64 2xl:w-80 lg:px-6 xl:px-8 lg:py-6 lg:flex overflow-scroll border-r border-black-brand-02`} + } h-screen px-4 py-4 bg-black-brand-08 shadow-inner w-full lg:w-60 xl:w-64 2xl:w-80 lg:px-6 xl:px-8 lg:py-6 lg:flex overflow-scroll border-r border-black-brand-06`} >
    diff --git a/pages/_app.tsx b/pages/_app.tsx index e7cbcc8..fb33cb5 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -5,8 +5,8 @@ import Head from 'next/head'; import { QueryClientProvider, QueryClient } from "react-query"; import { Hydrate } from "react-query/hydration"; import { ThemeProvider } from "next-themes"; -// import '../styles/globals.css'; -import "../styles/index.css"; +import '../styles/globals.css'; +// import "../styles/index.css"; type NextPageWithLayout = NextPage & { getLayout?: (page: React.ReactElement) => React.ReactNode diff --git a/styles/globals.css b/styles/globals.css index 73f04ab..8e3b2e4 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -10,8 +10,21 @@ html { .side-links li::before { content: "\2022"; color: #3fd080; + /* backgound: #8b949e; */ font-weight: bold; display: inline-block; width: 1.5em; margin-left: -1em; } + +.resource-card-tag::before { + border: 2px solid #3fd080; + content: ""; + display: block; + width: 12px; + height: 12px; + border-radius: 50%; + background: transparent; + margin-right: 4px; +} + diff --git a/tailwind.config.js b/tailwind.config.js index acd0b5b..c7f030e 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,11 +13,15 @@ module.exports = { }, colors: { black: { - "brand-01":"#111111", + // "brand-01":"#111111", + "brand-01":"#000308", "brand-02": "#1C1C1C", "brand-03": "#ffffff40", "brand-04": "#1f1f1f", "brand-05": "#202022", + "brand-06": "#30363D", + "brand-07": "rgba(255, 255, 255, 0.12)", + "brand-08": "#0D1117", }, blue: { "brand-01": "#168FFF", @@ -28,6 +32,7 @@ module.exports = { }, gray: { "brand-01": "#b3b3b3", + "brand-02": "#8B949E" } } }, From 58220e7067053abe694b6655a7bfaec04b5a3af0 Mon Sep 17 00:00:00 2001 From: minna Date: Sat, 23 Oct 2021 18:21:31 +0100 Subject: [PATCH 2/3] [FUEL-002] feat: sumbmit resource and UI fixes --- components/layout/index.tsx | 6 +- components/modals/SuggestResourceModal.tsx | 150 +++++++++++++++++++++ components/modals/interface.ts | 5 + components/navbar/DashTopBar.tsx | 7 +- components/navbar/types.ts | 5 + package.json | 5 +- pages/_app.tsx | 17 ++- pages/resources/[category].tsx | 2 +- pages/resources/index.tsx | 2 +- public/images/gradient.svg | 1 + tailwind.config.js | 40 +++++- yarn.lock | 74 ++++++++++ 12 files changed, 302 insertions(+), 12 deletions(-) create mode 100644 components/modals/SuggestResourceModal.tsx create mode 100644 components/modals/interface.ts create mode 100644 public/images/gradient.svg diff --git a/components/layout/index.tsx b/components/layout/index.tsx index 370e4bc..1f4d9ef 100644 --- a/components/layout/index.tsx +++ b/components/layout/index.tsx @@ -3,12 +3,15 @@ import DashMobileNavbar from "../navbar/DashMobileNavbar"; import Sidebar from "../navbar/Sidebar"; import Image from "next/image"; import DashTopBar from "../navbar/DashTopBar"; +import ResourceModal from "../modals/SuggestResourceModal"; import codeIcon from "../../public/images/code-icon.png"; // import cssIcon from "../../public/images/css3.png"; // import magnifier from "../../public/images/magnifier.png"; import laptop from "../../public/images/laptop.png"; +import { url } from "inspector"; const Layout = ({ children }: any) => { const [toggleNav, setToogleNavBar] = React.useState(false); + const [showModal, setShowModal] = React.useState(false); const toggleNavBar = () => { setToogleNavBar(!toggleNav); @@ -18,7 +21,7 @@ const Layout = ({ children }: any) => {
    - +
    code-icon @@ -37,6 +40,7 @@ const Layout = ({ children }: any) => { Place.
    +
    {children}
    diff --git a/components/modals/SuggestResourceModal.tsx b/components/modals/SuggestResourceModal.tsx new file mode 100644 index 0000000..0b41388 --- /dev/null +++ b/components/modals/SuggestResourceModal.tsx @@ -0,0 +1,150 @@ +import * as React from "react"; +import { supabase } from "../../utils/supabase"; +import { ToggleModalProps } from "../navbar/types"; +import { Formik, Field, Form, ErrorMessage, FormikHelpers } from "formik"; +import { FormValues } from "./interface"; +import { toast } from "react-toastify"; + +export default function ResourceModal(props: ToggleModalProps) { + const initialValues: FormValues = { name: "", link: "", tag: "" }; + + const submitResource = async (values: FormValues) => { + const { error } = await supabase + .from("suggested_resources") + .insert([values]); + if (error) { + console.log(error) + toast.error("oops! an error occured, kindly try again"); + } + toast.success("yay 💃, resource has been successfully submitted"); + }; + return ( + <> + {props.showModal ? ( + <> +
    +
    +
    +
    +

    + Suggest a Resource +

    + +
    + { + // const errors: FormValues = { name: "", link: "", tag: "" }; + // if (!values.name) { + // errors.name = "Required"; + // } else if (!values.link) { + // errors.link = "Required"; + // } else if (!values.tag) { + // errors.tag = "Required"; + // } + // return errors; + // }} + onSubmit={async (values: FormValues, { setSubmitting }:FormikHelpers) => { + await submitResource(values); + setSubmitting(false); + props.setShowModal(false); + }} + > + {({ isSubmitting }) => ( +
    +
    + + + +
    +
    + + + + +
    +
    + + + + + + + + + + + + +
    + +
    + +
    +
    + )} +     +
    +
    +
    +
    + + ) : null} + + ); +} diff --git a/components/modals/interface.ts b/components/modals/interface.ts new file mode 100644 index 0000000..e3dd60d --- /dev/null +++ b/components/modals/interface.ts @@ -0,0 +1,5 @@ +export interface FormValues { + name: string; + link: string; + tag: string; +} \ No newline at end of file diff --git a/components/navbar/DashTopBar.tsx b/components/navbar/DashTopBar.tsx index 6b3a4cf..29a2028 100644 --- a/components/navbar/DashTopBar.tsx +++ b/components/navbar/DashTopBar.tsx @@ -1,6 +1,7 @@ import * as React from "react"; +import { ToggleModalProps } from "./types"; -export default function DashTopBar() { +export default function DashTopBar(props: ToggleModalProps) { return (
    @@ -22,11 +23,11 @@ export default function DashTopBar() {
    - +
    ); diff --git a/components/navbar/types.ts b/components/navbar/types.ts index 1a9d959..0827d2e 100644 --- a/components/navbar/types.ts +++ b/components/navbar/types.ts @@ -7,4 +7,9 @@ export type Menu = { export type ToggleProps = { toggleNavBar?(): any, toggleState?: boolean +} + +export type ToggleModalProps = { + setShowModal(value: boolean): any + showModal?: boolean } \ No newline at end of file diff --git a/package.json b/package.json index 04783e5..e87fbe0 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,15 @@ "dependencies": { "@heroicons/react": "^1.0.4", "@supabase/supabase-js": "^1.24.0", + "@tailwindcss/forms": "^0.3.4", + "formik": "^2.2.9", "import": "^0.0.6", "next": "latest", "next-themes": "^0.0.15", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-query": "^3.26.0" + "react-query": "^3.26.0", + "react-toastify": "^8.0.3" }, "devDependencies": { "@types/node": "^12.12.21", diff --git a/pages/_app.tsx b/pages/_app.tsx index fb33cb5..e502896 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -4,7 +4,8 @@ import type { NextPage } from 'next' import Head from 'next/head'; import { QueryClientProvider, QueryClient } from "react-query"; import { Hydrate } from "react-query/hydration"; -import { ThemeProvider } from "next-themes"; +import { ToastContainer, toast } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; import '../styles/globals.css'; // import "../styles/index.css"; @@ -23,12 +24,22 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) { return getLayout( - - + diff --git a/pages/resources/[category].tsx b/pages/resources/[category].tsx index 2cc3143..ec3d219 100644 --- a/pages/resources/[category].tsx +++ b/pages/resources/[category].tsx @@ -20,7 +20,7 @@ export default function DashboardWithFilter() {
      {data && data.data && data.data.map(item => ( diff --git a/pages/resources/index.tsx b/pages/resources/index.tsx index 6664c5e..b7a76ee 100644 --- a/pages/resources/index.tsx +++ b/pages/resources/index.tsx @@ -13,7 +13,7 @@ export default function Dashboard() {
        {data && data.data && data.data.map(item => ( diff --git a/public/images/gradient.svg b/public/images/gradient.svg new file mode 100644 index 0000000..6fdc428 --- /dev/null +++ b/public/images/gradient.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index c7f030e..c49e9fb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,6 +8,9 @@ module.exports = { darkMode: "class", // or 'media' or 'class' theme: { extend: { + backgroundImage: { + 'hero-pattern': "url('/public/images/gradient.svg')", + }, fontFamily: { 'inter': ['Inter', 'sans-serif'] }, @@ -22,6 +25,7 @@ module.exports = { "brand-06": "#30363D", "brand-07": "rgba(255, 255, 255, 0.12)", "brand-08": "#0D1117", + "brand-smoke": 'rgba(0, 0, 0, 0.78)', }, blue: { "brand-01": "#168FFF", @@ -34,11 +38,43 @@ module.exports = { "brand-01": "#b3b3b3", "brand-02": "#8B949E" } + }, + keyframes: { + rubber_band: { + '0%': { + transform: 'scale3d(1, 1, 1)' + }, + '30%': { + transform: 'scale3d(1.25, 0.75, 1)' + }, + '40%': { + transform: 'scale3d(0.75, 1.25, 1)' + }, + '50%': { + transform: 'scale3d(1.15, 0.85, 1)' + }, + '65%': { + transform: 'scale3d(.95, 1.05, 1)' + }, + '75%': { + transform: 'scale3d(1.05, .95, 1)' + }, + '100%': { + transform: 'scale3d(1, 1, 1)' + } + } + }, + animation: { + rubber: 'rubber_band 1s', } }, }, variants: { - extend: {}, + extend: { + animation: ['hover'] + }, }, - plugins: [], + plugins: [ + require('@tailwindcss/forms'), + ], } diff --git a/yarn.lock b/yarn.lock index 5ea97e4..f00bb4e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -213,6 +213,13 @@ "@supabase/realtime-js" "^1.1.3" "@supabase/storage-js" "^1.4.0" +"@tailwindcss/forms@^0.3.4": + version "0.3.4" + resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.3.4.tgz#e4939dc16450eccf4fd2029770096f38cbb556d4" + integrity sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA== + dependencies: + mini-svg-data-uri "^1.2.3" + "@types/node@*": version "16.10.2" resolved "https://registry.yarnpkg.com/@types/node/-/node-16.10.2.tgz#5764ca9aa94470adb4e1185fe2e9f19458992b2e" @@ -649,6 +656,11 @@ classnames@2.2.6: resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== +clsx@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188" + integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA== + color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" @@ -856,6 +868,11 @@ debug@2, debug@^2.2.0: dependencies: ms "2.0.0" +deepmerge@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170" + integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA== + define-properties@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1" @@ -1114,6 +1131,19 @@ foreach@^2.0.5: resolved "https://registry.yarnpkg.com/foreach/-/foreach-2.0.5.tgz#0bee005018aeb260d0a3af3ae658dd0136ec1b99" integrity sha1-C+4AUBiusmDQo6865ljdATbsG5k= +formik@^2.2.9: + version "2.2.9" + resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0" + integrity sha512-LQLcISMmf1r5at4/gyJigGn0gOwFbeEAlji+N9InZF6LIMXnFNkO42sCI8Jt84YZggpD4cPWObAZaxpEFtSzNA== + dependencies: + deepmerge "^2.1.1" + hoist-non-react-statics "^3.3.0" + lodash "^4.17.21" + lodash-es "^4.17.21" + react-fast-compare "^2.0.1" + tiny-warning "^1.0.2" + tslib "^1.10.0" + fraction.js@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.1.tgz#ac4e520473dae67012d618aab91eda09bcb400ff" @@ -1273,6 +1303,13 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" +hoist-non-react-statics@^3.3.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" + integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== + dependencies: + react-is "^16.7.0" + hsl-regex@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/hsl-regex/-/hsl-regex-1.0.0.tgz#d49330c789ed819e276a4c0d272dffa30b18fe6e" @@ -1627,6 +1664,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash-es@^4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash.sortby@^4.7.0: version "4.7.0" resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" @@ -1704,6 +1746,11 @@ miller-rabin@^4.0.0: bn.js "^4.0.0" brorand "^1.0.1" +mini-svg-data-uri@^1.2.3: + version "1.4.3" + resolved "https://registry.yarnpkg.com/mini-svg-data-uri/-/mini-svg-data-uri-1.4.3.tgz#43177b2e93766ba338931a3e2a84a3dfd3a222b8" + integrity sha512-gSfqpMRC8IxghvMcxzzmMnWpXAChSA+vy4cia33RgerMS8Fex95akUyQZPbxJJmeBGiGmK7n/1OpUX8ksRjIdA== + minimalistic-assert@^1.0.0, minimalistic-assert@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7" @@ -2268,11 +2315,21 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-fast-compare@^2.0.1: + version "2.0.4" + resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" + integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== + react-is@17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== +react-is@^16.7.0: + version "16.13.1" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" + integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== + react-query@^3.26.0: version "3.26.0" resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.26.0.tgz#7083a8622afdf946ee6d8f3a6d94591b980c1aa0" @@ -2287,6 +2344,13 @@ react-refresh@0.8.3: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-toastify@^8.0.3: + version "8.0.3" + resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-8.0.3.tgz#7fbf65f69ec357aab8dd03c1496f9177aa92409a" + integrity sha512-rv3koC7f9lKKSkdpYgo/TGzgWlrB/aaiUInF1DyV7BpiM4kyTs+uhu6/r8XDMtBY2FOIHK+FlK3Iv7OzpA/tCA== + dependencies: + clsx "^1.1.1" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -2681,6 +2745,11 @@ timers-browserify@2.0.12, timers-browserify@^2.0.4: dependencies: setimmediate "^1.0.4" +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tmp@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14" @@ -2722,6 +2791,11 @@ ts-pnp@^1.1.6: resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== +tslib@^1.10.0: + version "1.14.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" + integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== + tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" From f5f131ba6c29e46cc98821d9bcc709fd334ebe6c Mon Sep 17 00:00:00 2001 From: minna Date: Sat, 23 Oct 2021 18:39:06 +0100 Subject: [PATCH 3/3] [FUEL-002] feat: form validation --- components/modals/SuggestResourceModal.tsx | 45 +++++++++------------- package.json | 3 +- utils/yupValidation.ts | 26 +++++++++++++ yarn.lock | 35 ++++++++++++++++- 4 files changed, 80 insertions(+), 29 deletions(-) create mode 100644 utils/yupValidation.ts diff --git a/components/modals/SuggestResourceModal.tsx b/components/modals/SuggestResourceModal.tsx index 0b41388..ed10c03 100644 --- a/components/modals/SuggestResourceModal.tsx +++ b/components/modals/SuggestResourceModal.tsx @@ -2,8 +2,12 @@ import * as React from "react"; import { supabase } from "../../utils/supabase"; import { ToggleModalProps } from "../navbar/types"; import { Formik, Field, Form, ErrorMessage, FormikHelpers } from "formik"; +import * as Yup from 'yup'; import { FormValues } from "./interface"; import { toast } from "react-toastify"; +import { ResourceSchema } from "../../utils/yupValidation"; + + export default function ResourceModal(props: ToggleModalProps) { const initialValues: FormValues = { name: "", link: "", tag: "" }; @@ -38,24 +42,14 @@ export default function ResourceModal(props: ToggleModalProps) {
    { - // const errors: FormValues = { name: "", link: "", tag: "" }; - // if (!values.name) { - // errors.name = "Required"; - // } else if (!values.link) { - // errors.link = "Required"; - // } else if (!values.tag) { - // errors.tag = "Required"; - // } - // return errors; - // }} + validationSchema={ResourceSchema} onSubmit={async (values: FormValues, { setSubmitting }:FormikHelpers) => { await submitResource(values); setSubmitting(false); props.setShowModal(false); }} > - {({ isSubmitting }) => ( + {({ isSubmitting, errors, touched }) => (
    diff --git a/package.json b/package.json index e87fbe0..880de14 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-query": "^3.26.0", - "react-toastify": "^8.0.3" + "react-toastify": "^8.0.3", + "yup": "^0.32.11" }, "devDependencies": { "@types/node": "^12.12.21", diff --git a/utils/yupValidation.ts b/utils/yupValidation.ts new file mode 100644 index 0000000..70ecfff --- /dev/null +++ b/utils/yupValidation.ts @@ -0,0 +1,26 @@ +import * as Yup from 'yup'; +export const ResourceSchema = Yup.object().shape({ + + name: Yup.string() + + .min(2, 'Too Short!') + + .max(20, 'Too Long!') + + .required('Required'), + + link: Yup.string() + + .min(2, 'Too Short!') + + .max(50, 'Too Long!') + + .matches( + /((https?):\/\/)?(www.)?[a-z0-9]+(\.[a-z]{2,}){1,3}(#?\/?[a-zA-Z0-9#]+)*\/?(\?[a-zA-Z0-9-_]+=[a-zA-Z0-9-%]+&?)?$/, + 'Please enter a valid url!' + ) + .required('Please enter a valid url!'), + + tag: Yup.string().required('Required'), + +}); \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index f00bb4e..98f482a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -49,7 +49,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2": +"@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw== @@ -220,6 +220,11 @@ dependencies: mini-svg-data-uri "^1.2.3" +"@types/lodash@^4.14.175": + version "4.14.176" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.176.tgz#641150fc1cda36fbfa329de603bbb175d7ee20c0" + integrity sha512-xZmuPTa3rlZoIbtDUyJKZQimJV3bxCmzMIO2c9Pz9afyDro6kr7R79GwcB6mRhuoPmV2p1Vb66WOJH7F886WKQ== + "@types/node@*": version "16.10.2" resolved "https://registry.yarnpkg.com/@types/node/-/node-16.10.2.tgz#5764ca9aa94470adb4e1185fe2e9f19458992b2e" @@ -1790,6 +1795,11 @@ nano-time@1.0.0: dependencies: big-integer "^1.6.16" +nanoclone@^0.2.1: + version "0.2.1" + resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4" + integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA== + nanocolors@^0.2.12, nanocolors@^0.2.2, nanocolors@^0.2.8: version "0.2.12" resolved "https://registry.yarnpkg.com/nanocolors/-/nanocolors-0.2.12.tgz#4d05932e70116078673ea4cc6699a1c56cc77777" @@ -2212,6 +2222,11 @@ process@0.11.10, process@^0.11.10: resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182" integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI= +property-expr@^2.0.4: + version "2.0.4" + resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.4.tgz#37b925478e58965031bb612ec5b3260f8241e910" + integrity sha512-sFPkHQjVKheDNnPvotjQmm3KD3uk1fWKUN7CrpdbwmUx3CrG3QiM8QpTSimvig5vTXmTvjz7+TDvXOI9+4rkcg== + public-encrypt@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.3.tgz#4fcc9d77a07e48ba7527e7cbe0de33d0701331e0" @@ -2779,6 +2794,11 @@ toidentifier@1.0.0: resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw== +toposort@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330" + integrity sha1-riF2gXXRVZ1IvvNUILL0li8JwzA= + tr46@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09" @@ -3005,3 +3025,16 @@ yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q== + +yup@^0.32.11: + version "0.32.11" + resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5" + integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/lodash" "^4.14.175" + lodash "^4.17.21" + lodash-es "^4.17.21" + nanoclone "^0.2.1" + property-expr "^2.0.4" + toposort "^2.0.2"