From 9919e0c16e1e363b724773b6a3db609eedfe95ac Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sun, 21 May 2023 23:50:44 +1000 Subject: [PATCH] Refactor SelectField and allow headers with CORS --- api/src/main.rs | 7 ++- .../src/components/CreateForm/CreateForm.tsx | 5 +- .../components/SelectField/SelectField.jsx | 44 ------------- .../SelectField/SelectField.module.scss | 23 +++++++ .../SelectField/SelectField.styles.js | 61 ------------------- .../components/SelectField/SelectField.tsx | 52 ++++++++++++++++ 6 files changed, 84 insertions(+), 108 deletions(-) delete mode 100644 frontend/src/components/SelectField/SelectField.jsx create mode 100644 frontend/src/components/SelectField/SelectField.module.scss delete mode 100644 frontend/src/components/SelectField/SelectField.styles.js create mode 100644 frontend/src/components/SelectField/SelectField.tsx diff --git a/api/src/main.rs b/api/src/main.rs index e2f46aa..7266f24 100644 --- a/api/src/main.rs +++ b/api/src/main.rs @@ -3,7 +3,10 @@ use std::{env, net::SocketAddr, sync::Arc}; use axum::{ error_handling::HandleErrorLayer, extract, - http::{HeaderValue, Method}, + http::{ + header::{ACCEPT, AUTHORIZATION, CONTENT_TYPE}, + HeaderValue, Method, + }, routing::{get, patch, post}, BoxError, Router, Server, }; @@ -44,6 +47,8 @@ async fn main() { // CORS configuration let cors = CorsLayer::new() + .allow_credentials(true) + .allow_headers([AUTHORIZATION, ACCEPT, CONTENT_TYPE]) .allow_methods([Method::GET, Method::POST, Method::PATCH]) .allow_origin( if cfg!(debug_assertions) { diff --git a/frontend/src/components/CreateForm/CreateForm.tsx b/frontend/src/components/CreateForm/CreateForm.tsx index 4f82af4..d4764cd 100644 --- a/frontend/src/components/CreateForm/CreateForm.tsx +++ b/frontend/src/components/CreateForm/CreateForm.tsx @@ -7,6 +7,7 @@ import { useRouter } from 'next/navigation' import Button from '/src/components/Button/Button' import CalendarField from '/src/components/CalendarField/CalendarField' import { default as ErrorAlert } from '/src/components/Error/Error' +import SelectField from '/src/components/SelectField/SelectField' import TextField from '/src/components/TextField/TextField' import TimeRangeField from '/src/components/TimeRangeField/TimeRangeField' import { API_BASE } from '/src/config/api' @@ -148,13 +149,13 @@ const CreateForm = () => { name="time" /> - {/* */} + /> setError(undefined)}>{error} diff --git a/frontend/src/components/SelectField/SelectField.jsx b/frontend/src/components/SelectField/SelectField.jsx deleted file mode 100644 index d07c4a0..0000000 --- a/frontend/src/components/SelectField/SelectField.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import { forwardRef } from 'react' - -import { - Wrapper, - StyledLabel, - StyledSubLabel, - StyledSelect, -} from './SelectField.styles' - -const SelectField = forwardRef(({ - label, - subLabel, - id, - options = [], - inline = false, - small = false, - defaultOption, - ...props -}, ref) => ( - - {label && {label}} - {subLabel && {subLabel}} - - - {defaultOption && } - {Array.isArray(options) ? ( - options.map(value => - - ) - ) : ( - Object.entries(options).map(([key, value]) => - - ) - )} - - -)) - -export default SelectField diff --git a/frontend/src/components/SelectField/SelectField.module.scss b/frontend/src/components/SelectField/SelectField.module.scss new file mode 100644 index 0000000..996c05b --- /dev/null +++ b/frontend/src/components/SelectField/SelectField.module.scss @@ -0,0 +1,23 @@ +.select { + width: 100%; + box-sizing: border-box; + font: inherit; + background: var(--surface); + color: inherit; + padding: 10px 14px; + border: 1px solid var(--primary); + box-shadow: inset 0 0 0 0 var(--primary); + border-radius: 3px; + outline: none; + transition: border-color .15s, box-shadow .15s; + appearance: none; + background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3CforeignObject%20width%3D%22100px%22%20height%3D%22100px%22%3E%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%20style%3D%22color%3A%23F79E00%3Bfont-size%3A60px%3Bdisplay%3Aflex%3Balign-items%3Acenter%3Bjustify-content%3Acenter%3Bheight%3A100%25%3Bwidth%3A100%25%3B%22%3E%E2%96%BC%3C%2Fdiv%3E%3C%2FforeignObject%3E%3C%2Fsvg%3E'); + background-repeat: no-repeat; + background-position: right 10px center; + background-size: 1em; + + &:focus { + border: 1px solid var(--secondary); + box-shadow: inset 0 -3px 0 0 var(--secondary); + } +} diff --git a/frontend/src/components/SelectField/SelectField.styles.js b/frontend/src/components/SelectField/SelectField.styles.js deleted file mode 100644 index f9f1731..0000000 --- a/frontend/src/components/SelectField/SelectField.styles.js +++ /dev/null @@ -1,61 +0,0 @@ -import { styled } from 'goober' -import { forwardRef } from 'react' - -export const Wrapper = styled('div')` - margin: 30px 0; - - ${props => props.$inline && ` - margin: 0; - `} - ${props => props.$small && ` - margin: 10px 0; - `} -` - -export const StyledLabel = styled('label')` - display: block; - padding-bottom: 4px; - font-size: 18px; - - ${props => props.$inline && ` - font-size: 16px; - `} - ${props => props.$small && ` - font-size: .9rem; - `} -` - -export const StyledSubLabel = styled('label')` - display: block; - padding-bottom: 6px; - font-size: 13px; - opacity: .6; -` - -export const StyledSelect = styled('select', forwardRef)` - width: 100%; - box-sizing: border-box; - font: inherit; - background: var(--surface); - color: inherit; - padding: 10px 14px; - border: 1px solid var(--primary); - box-shadow: inset 0 0 0 0 var(--primary); - border-radius: 3px; - outline: none; - transition: border-color .15s, box-shadow .15s; - appearance: none; - background-image: url('data:image/svg+xml,${encodeURIComponent('
▼
')}'); - background-repeat: no-repeat; - background-position: right 10px center; - background-size: 1em; - - &:focus { - border: 1px solid var(--secondary); - box-shadow: inset 0 -3px 0 0 var(--secondary); - } - - ${props => props.$small && ` - padding: 6px 8px; - `} -` diff --git a/frontend/src/components/SelectField/SelectField.tsx b/frontend/src/components/SelectField/SelectField.tsx new file mode 100644 index 0000000..2569879 --- /dev/null +++ b/frontend/src/components/SelectField/SelectField.tsx @@ -0,0 +1,52 @@ +import { forwardRef } from 'react' + +import { Description, Label, Wrapper } from '/src/components/Field/Field' + +import styles from './SelectField.module.scss' + +interface SelectFieldProps extends React.ComponentProps<'select'> { + label?: React.ReactNode + description?: React.ReactNode + options: Record | string[] + isInline?: boolean + isSmall?: boolean + defaultOption?: React.ReactNode +} + +const SelectField = forwardRef(({ + label, + description, + options = [], + isInline = false, + isSmall = false, + defaultOption, + ...props +}, ref) => + {label && } + + {description && {description}} + + +) + +export default SelectField