-
-
- usa-custom -
+
+ An illustration representing unity and inclusivity in the USA

HELPFUL RESOURCES

-
-

CONTACT US

-

Need technical assistance with this website? Send an email to:nanajon66@gmail.com

- - +

CONTACT US

+

Need technical assistance with this website? Send an email to:nanajon66@gmail.com

The U.S. Refugee Admissions Program (USRAP) is free of charge. Any requests to solicit funds for referral or access to the USRAP are illegitimate and not associated with the U.S. government.

- U.S. Department of State | + U.S. Department of State | Bureau of Population, Refugees, and Migration | Refugee Admissions

- -

Copyright © 2016 Refugee Processing Center @@ -75,3 +147,4 @@ const ContactSection = () => { }; export default ContactSection; + diff --git a/src/Components/DropDown/DropDown.js b/src/Components/DropDown/DropDown.js index d2aa702..37016e7 100644 --- a/src/Components/DropDown/DropDown.js +++ b/src/Components/DropDown/DropDown.js @@ -1,17 +1,16 @@ -import { useEffect, useState } from 'react'; +import { useState } from 'react'; import { useQuery } from '@apollo/client'; import { GET_ALL_LOCATIONS } from '../../apollo-client/queries'; import './DropDown.scss'; import { useCombobox } from 'downshift'; +import { useNavigate } from 'react-router-dom'; +import Spinner from '../Spinner/Spinner'; export default function DropDown({ city, setSearchLocation }) { const [autocompleteSuggestions, setAutocompleteSuggestions] = useState([]); const { loading, error, data } = useQuery(GET_ALL_LOCATIONS); const [selectedItem, setSelectedItem] = useState('') - - useEffect(() => { - document.addEventListener('click', e => console.log(e)); - }, []); + const navigate = useNavigate(); const { getInputProps, getMenuProps, getItemProps, highlightedIndex } = useCombobox({ @@ -33,12 +32,13 @@ export default function DropDown({ city, setSearchLocation }) { .slice(0, 5); suggestions.forEach(location => { - const [city, state] = location.split(', ') + const [city, + // state + ] = location.split(', '); if (inputValue.toLowerCase() === city.toLowerCase()) { - suggestions = [] + suggestions = []; } - }); } @@ -46,13 +46,22 @@ export default function DropDown({ city, setSearchLocation }) { }, selectedItem, onSelectedItemChange: ({ selectedItem: newSelectedItem }) => { - const [city, state] = newSelectedItem.split(', ') + const [city, state] = newSelectedItem.split(', '); setSearchLocation(city, state); - setSelectedItem(city) + setSelectedItem(city); }, }); + if (error) { + navigate('/error500'); + return null; + } + + if (loading) { + return ; + } + return ( <> 0, 'aria-label': 'Search for a place on the map', - 'aria-labelledby': null, - autoFocus: 'true', + autoFocus: true, inputMode: 'search', placeholder: 'City (optional)', type: 'search', @@ -71,25 +79,22 @@ export default function DropDown({ city, setSearchLocation }) { className='suggestion-dropdown' {...getMenuProps({ 'aria-label': 'Autocomplete suggestions', - 'aria-labelledby': null, })} > {autocompleteSuggestions.length > 0 && - autocompleteSuggestions.map((location, index) => { - return ( -

  • - {location} -
    • - ); - })} + autocompleteSuggestions.map((location, index) => ( +
  • + {location} +
    • + ))} ); diff --git a/src/Components/ErrorHandling/Error404.js b/src/Components/ErrorHandling/Error404.js index 16a2d67..a552d7c 100644 --- a/src/Components/ErrorHandling/Error404.js +++ b/src/Components/ErrorHandling/Error404.js @@ -37,7 +37,7 @@ function Error404() { -
    +

    Did you know?

    @@ -54,7 +54,7 @@ function Error404() {
    - Refugees Kids + Young refugee children
    ); diff --git a/src/Components/Homepage/Homepage.js b/src/Components/Homepage/Homepage.js index 08db6f5..60f816f 100644 --- a/src/Components/Homepage/Homepage.js +++ b/src/Components/Homepage/Homepage.js @@ -1,13 +1,14 @@ import React, { useState } from 'react'; import refugeesImage from '../../images/refugees.png'; -import '../Homepage/Homepage.scss' +import '../Homepage/Homepage.scss'; function Homepage() { const [showVideo, setShowVideo] = useState(false); return (
    -
    + Skip to main content +
    @@ -18,10 +19,10 @@ function Homepage() { height="315" src="https://www.youtube.com/embed/Jzg842IC5e0?si=kj0WxGYPqjOZRywf" title="YouTube video player" - frameborder="0" + style={{border: "none"}} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" - allowfullscreen> - + allowFullScreen + >
    ) : (
    @@ -31,7 +32,11 @@ function Homepage() {
    {showVideo && (
    -
    @@ -47,7 +52,11 @@ function Homepage() {

    We do everything within our power and capabilities to transform the fear in the hearts of those in need into hope.

    {!showVideo && (
    -
    diff --git a/src/Components/Homepage/Homepage.scss b/src/Components/Homepage/Homepage.scss index e319186..9cf4fa2 100644 --- a/src/Components/Homepage/Homepage.scss +++ b/src/Components/Homepage/Homepage.scss @@ -9,6 +9,22 @@ $netflix-red: #E50914; box-sizing: border-box; } +//A11y +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: #000; + color: white; + padding: 8px 12px; + z-index: 100; + transition: top 0.3s; + + &:focus { + top: 0; + } +} + // below is for testing perpose only // .content-section { border: 2px solid red; } // .media-side { border: 2px solid green; } diff --git a/src/Components/NavBar/NavBar.js b/src/Components/NavBar/NavBar.js index c46ca1f..70f1932 100644 --- a/src/Components/NavBar/NavBar.js +++ b/src/Components/NavBar/NavBar.js @@ -11,16 +11,21 @@ export default function NavBar({ isLoggedIn, handleLogin }) { ); } - - diff --git a/src/Components/NavBar/NavBar.scss b/src/Components/NavBar/NavBar.scss index 2d40eb5..7e4f2d1 100644 --- a/src/Components/NavBar/NavBar.scss +++ b/src/Components/NavBar/NavBar.scss @@ -95,8 +95,8 @@ body { .nav-button { background-color: #3498db; - // color: #ffffff; - color: #031662; + color: #ffffff; + // color: #031662; border: none; padding: 10px 20px; border-radius: 5px; diff --git a/src/Components/OrgRequestCard/OrgRequestCard.js b/src/Components/OrgRequestCard/OrgRequestCard.js index 00a25cd..445c80a 100644 --- a/src/Components/OrgRequestCard/OrgRequestCard.js +++ b/src/Components/OrgRequestCard/OrgRequestCard.js @@ -1,23 +1,27 @@ -import '../RequestCard/RequestCard.scss' -import '../OrganizationDashboard/OrganizationDashboard.scss'; - -import React from 'react' - export default function OrgRequestCard({ request, handleApprove, handleDecline }) { const { id, description, aidType, language, status } = request; return ( -
    +

    {aidType} Aid

    {language &&

    Language: {language}

    }

    {description}

    Status: {status}

    - - + +
    ); diff --git a/src/Components/OrganizationDashboard/OrganizationDashboard.js b/src/Components/OrganizationDashboard/OrganizationDashboard.js index 853f3f6..6ae865c 100644 --- a/src/Components/OrganizationDashboard/OrganizationDashboard.js +++ b/src/Components/OrganizationDashboard/OrganizationDashboard.js @@ -58,20 +58,20 @@ export default function OrganizationDashboard( {orgId}) { return (

    Welcome, {organization.name}!

    - +
    -
    +

    Aid Requests

    - {aidRequests.map(request => ( - - ))} -
    -
    + {aidRequests.map(request => ( + + ))} +
    +

    Organization Details

    Phone: {organization.contactPhone}

    Email: {organization.contactEmail}

    @@ -81,8 +81,8 @@ export default function OrganizationDashboard( {orgId}) {

    State: {organization.state}

    ZIP: {organization.zip}

    -
    -
    +
    +