Editable Settings

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @iron-fish/frontend

apiClient/client.ts

@@ -19,12 +19,9 @@ import {
 
 // Environment variables set in Vercel config.
 const SERVER_API_URL = process.env.API_URL
-const SERVER_API_KEY = process.env.API_KEY
 const BROWSER_API_URL = process.env.NEXT_PUBLIC_API_URL
-const BROWSER_API_KEY = process.env.NEXT_PUBLIC_API_KEY
 
-const API_URL = SERVER_API_URL || BROWSER_API_URL
-const API_KEY = SERVER_API_KEY || BROWSER_API_KEY
+export const API_URL = SERVER_API_URL || BROWSER_API_URL
 
 export async function createUser(
   email: string,
@@ -43,13 +40,35 @@ export async function createUser(
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
-      Authorization: `Bearer ${API_KEY}`,
     },
     body,
   })
   return await res.json()
 }
 
+type PartialUser = {
+  email?: string
+  graffiti?: string
+  socialChoice?: string
+  social?: string
+  countryCode?: string
+}
+
+export async function updateUser(id: number, partial: PartialUser) {
+  const body = JSON.stringify(partial)
+  const token = await magic?.user.getIdToken()
+  const options = {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${token}`,
+    },
+    body,
+  }
+  const res = await fetch(`${API_URL}/users/${id}`, options)
+  return await res.json()
+}
+
 export async function listLeaderboard({
   search,
   country_code: countryCode,

components/About/CallToAction.tsx

@@ -77,7 +77,9 @@ export const CallToAction = ({
                 className="m-auto w-full mt-2 max-w-md mb-2 text-md p-2"
                 colorClassName="text-black bg-transparent hover:bg-black hover:text-white"
               >
-                {href ? <Link href={href}>Claim Points</Link> : ctaText}
+                <Link href={'https://forms.gle/yrAtzoyKTwLgLTRZA'}>
+                  Claim Points
+                </Link>
               </RawButton>
             </Link>
           )}

components/Form/Select.module.css

@@ -14,13 +14,13 @@
   width: 1rem;
   height: 2rem;
   text-align: center;
-  background-image: url(public/arrow_drop_down_black.png);
+  background-image: url(/arrow_drop_down_black.png);
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent;
   pointer-events: none;
 }
 
 .customSelectWrapper.disabled::after {
-  background-image: url(public/arrow_drop_down_disabled.png);
+  background-image: url(/arrow_drop_down_disabled.png);
 }

components/Form/TextField.tsx

@@ -48,6 +48,10 @@ const RadioOptions = ({
   </div>
 )
 
+export interface ControlledField extends Field {
+  controlled?: boolean
+}
+
 export const TextField = ({
   id,
   label,
@@ -63,9 +67,25 @@ export const TextField = ({
   setChoice,
   isRadioed,
   disabled,
+  required = true,
   whitespace = WHITESPACE.DEFAULT,
-}: Field) => {
+  value,
+  controlled = false,
+}: ControlledField) => {
   const handleTrim = whitespace !== WHITESPACE.DEFAULT ? { onKeyDown } : {}
+  const controller = controlled ? { value: value } : {}
+  const inputProps = {
+    ...handleTrim,
+    ...controller,
+    className: `${disabled ? 'bg-transparent' : ''}`,
+    defaultValue,
+    disabled,
+    onBlur,
+    onChange,
+    id,
+    type: 'text',
+    placeholder,
+  }
   return (
     <LabelledRow
       key={id}
@@ -74,6 +94,7 @@ export const TextField = ({
       valid={valid}
       errorText={errorText}
       disabled={disabled}
+      required={required}
     >
       {isRadioed && options.length > 0 && (
         <RadioOptions
@@ -84,17 +105,7 @@ export const TextField = ({
           setChoice={setChoice}
         />
       )}
-      <input
-        className={`${disabled ? 'bg-transparent' : ''}`}
-        defaultValue={defaultValue}
-        disabled={disabled}
-        onBlur={onBlur}
-        onChange={onChange}
-        {...handleTrim}
-        id={id}
-        type="text"
-        placeholder={placeholder}
-      />
+      <input {...inputProps} />
     </LabelledRow>
   )
 }