├── sandbox.config.json
├── public
└── assets
│ ├── worldmap.jpg
│ ├── arrow-left.svg
│ ├── check.svg
│ ├── home-outline.svg
│ ├── starbox.svg
│ ├── star-with-stroke.svg
│ ├── star.svg
│ ├── earth.svg
│ └── map.svg
├── components
├── StyledHeadline.js
├── Form
│ ├── StyledForm.js
│ ├── StyledFieldset.js
│ └── index.js
├── Header
│ ├── index.js
│ ├── Header.test.js
│ └── StyledHeader.js
├── CounterContinent
│ ├── StyledCounterContinent.js
│ ├── CounterContinent.test.js
│ └── index.js
├── SearchBar
│ ├── StyledSearchBar.js
│ ├── index.js
│ └── SearchBar.test.js
├── StyledFlag.js
├── FilterContinents
│ ├── StyledFilterContinents.js
│ ├── FilterContinents.test.js
│ └── index.js
├── StyledFooter.js
├── StyledSVG.js
├── Layout
│ └── index.js
├── StyledButton.js
├── StyledList.js
├── StyledProgressBar.js
├── CountriesPreview
│ ├── index.js
│ └── CountriesPreview.test.js
├── FavoriteButton
│ └── index.js
├── StyledListElement.js
├── VisitedButton
│ └── index.js
├── Counter
│ ├── index.js
│ └── Counter.test.js
├── StyledDiv.js
├── Navigation
│ └── index.js
├── CountriesList
│ └── index.js
├── CountryDetails
│ └── index.js
└── Entry
│ └── index.js
├── jest.setup.js
├── .eslintrc.json
├── pages
├── countries
│ └── [name].js
├── _document.js
├── index.js
├── list.js
├── visited.js
├── _app.js
└── favorites.js
├── .gitignore
├── next.config.js
├── .prettierrc.json
├── styles.js
├── jest.config.js
├── package.json
└── README.md
/sandbox.config.json:
--------------------------------------------------------------------------------
1 | { "template": "next" }
2 |
--------------------------------------------------------------------------------
/public/assets/worldmap.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AnjaSiewert/capstone_globehopper/HEAD/public/assets/worldmap.jpg
--------------------------------------------------------------------------------
/components/StyledHeadline.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | const StyledHeadline = styled.h2`
4 | font-size: 1.8rem;
5 | `;
6 |
7 | export default StyledHeadline;
8 |
--------------------------------------------------------------------------------
/public/assets/arrow-left.svg:
--------------------------------------------------------------------------------
1 |
6 | {headline}
7 |
8 | );
9 | }
10 |
--------------------------------------------------------------------------------
/components/CounterContinent/StyledCounterContinent.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 |
3 | const StyledCounterContinent = styled.div`
4 | font-size: 1rem;
5 | border-radius: 0.5rem;
6 | `;
7 |
8 | export default StyledCounterContinent;
9 |
--------------------------------------------------------------------------------
/jest.setup.js:
--------------------------------------------------------------------------------
1 | // Optional: configure or set up a testing framework before each test.
2 | // If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
3 |
4 | // Learn more: https://github.com/testing-library/jest-dom
5 | import "@testing-library/jest-dom/extend-expect";
6 |
--------------------------------------------------------------------------------
/public/assets/check.svg:
--------------------------------------------------------------------------------
1 | {children}
12 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/public/assets/earth.svg:
--------------------------------------------------------------------------------
1 |
13 | {name}
14 |
15 | Capital:
16 | {capital}
17 |
18 |
19 | Continent:
20 | {continent}
21 |
22 | {flag}
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/components/FavoriteButton/index.js:
--------------------------------------------------------------------------------
1 | import Star from "../../public/assets/star-with-stroke.svg";
2 | import StyledSVG from "../StyledSVG";
3 |
4 | const StarLiked = () => {
20 | onToggleFavorite(name);
21 | }}
22 | >
23 | {isFavorite ?
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/components/StyledListElement.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from "styled-components";
2 |
3 | const StyledListElement = styled.li`
4 | ${(props) =>
5 | props.isOnListpage &&
6 | css`
7 | display: flex;
8 | justify-content: space-between;
9 | align-items: center;
10 | padding: 0.3rem;
11 | background-color: var(--lightgrey);
12 | border-radius: 01rem;
13 | `}
14 | ${(props) =>
15 | props.isOnFavoritesPage &&
16 | css`
17 | display: flex;
18 | flex-direction: column;
19 | border-radius: 1rem;
20 | background-color: #f0ebed;
21 | `}
22 |
23 | list-style: none;
24 | margin: 0.3rem;
25 | border: 1px solid grey;
26 | color: var(--antracite);
27 | `;
28 |
29 | export default StyledListElement;
30 |
--------------------------------------------------------------------------------
/components/VisitedButton/index.js:
--------------------------------------------------------------------------------
1 | import Check from "../../public/assets/check.svg";
2 | import StyledSVG from "../StyledSVG";
3 |
4 | const CheckLiked = () => {
20 | onToggleVisited(name);
21 | }}
22 | >
23 | {isVisited ?
25 |
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/components/Counter/index.js:
--------------------------------------------------------------------------------
1 | import StyledDiv from "../StyledDiv";
2 | import StyledHeadline from "../StyledHeadline";
3 | import StyledProgressBar from "../StyledProgressBar";
4 |
5 | export default function Counter({ countries, countriesInfo }) {
6 | const countVisitedCountries = countriesInfo.filter((info) => info.isVisited);
7 | const percentVisited =
8 | (countVisitedCountries.length / countries.length) * 100;
9 |
10 | return (
11 | <>
12 |
13 | The World
14 | {countVisitedCountries.length} /{countries.length}
15 |
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
1 | import Document from "next/document";
2 | import { ServerStyleSheet } from "styled-components";
3 |
4 | export default class MyDocument extends Document {
5 | static async getInitialProps(ctx) {
6 | const sheet = new ServerStyleSheet();
7 | const originalRenderPage = ctx.renderPage;
8 |
9 | try {
10 | ctx.renderPage = () =>
11 | originalRenderPage({
12 | enhanceApp: (App) => (props) =>
13 | sheet.collectStyles(/jest.setup.js"],
13 | // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
14 | moduleDirectories: ["node_modules", "/"],
15 | testEnvironment: "jest-environment-jsdom",
16 | };
17 |
18 | // createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
19 | module.exports = createJestConfig(customJestConfig);
20 |
--------------------------------------------------------------------------------
/components/SearchBar/index.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import StyledSeachbar from "./StyledSearchBar";
3 |
4 | export default function Searchbar({ countries, setFilteredCountries }) {
5 | const [searchInput, setSearchInput] = useState("");
6 |
7 | const handleChange = (event) => {
8 | event.preventDefault();
9 | setSearchInput(event.target.value);
10 | setFilteredCountries(
11 | countries.filter((country) => {
12 | return country.name.common
13 | .toLowerCase()
14 | .includes(event.target.value.toLowerCase());
15 | })
16 | );
17 | };
18 |
19 | return (
20 |
21 | {" "}
22 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
1 | import Header from "../components/Header";
2 | import Image from "next/image";
3 | import Counter from "../components/Counter";
4 | import StyledDiv from "../components/StyledDiv";
5 | import worldMap from "../public/assets/worldmap.jpg";
6 | import CounterContinent from "../components/CounterContinent";
7 |
8 | export default function HomePage({ countries, countriesInfo }) {
9 | return (
10 | <>
11 |
12 |
13 |
21 |
26 |
35 |
20 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/components/Counter/Counter.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from "@testing-library/react";
2 | import Counter from ".";
3 |
4 | test("renders a headline", () => {
5 | const countries = [{ name: "Canada" }];
6 | const countriesInfo = [{ name: "Canada", isVisited: true }];
7 | render(
29 | Click on a countries name for details
30 | {countries
31 | .map((country) => ({
32 | key: country.name,
33 | name: country.name.common,
34 | }))
35 | .sort((a, b) => a.name.localeCompare(b.name))
36 | .map((country) => (
37 |
38 |
39 | {country.name}{" "}
40 |
41 |
42 |
48 |
54 | ))}
55 |
56 |
57 | );
58 | }
59 |
--------------------------------------------------------------------------------
/components/FilterContinents/FilterContinents.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from "@testing-library/react";
2 | import userEvent from "@testing-library/user-event";
3 | import FilterContinents from "./index";
4 |
5 | test("filters countries by continent when user selects an option", async () => {
6 | const countries = [
7 | {
8 | name: {
9 | common: "Canada",
10 | },
11 | region: "Americas",
12 | subregion: "North America",
13 | continents: ["North America"],
14 | },
15 | {
16 | name: {
17 | common: "Mexico",
18 | },
19 | region: "Americas",
20 | subregion: "North America",
21 | continents: ["North America"],
22 | },
23 | {
24 | name: {
25 | common: "Japan",
26 | },
27 | region: "Asia",
28 | subregion: "Eastern Asia",
29 | continents: ["Asia"],
30 | },
31 | {
32 | name: {
33 | common: "Australia",
34 | },
35 | region: "Oceania",
36 | subregion: "Australia and New Zealand",
37 | continents: ["Oceania"],
38 | },
39 | ];
40 | const setFilteredCountries = jest.fn();
41 |
42 | render(
43 |
24 | {visitedCountries
25 | .slice()
26 | .sort((a, b) => a.name.common.localeCompare(b.name.common))
27 | .map((country) => {
28 | return (
29 |
30 |
31 |
41 |
47 |
48 |
49 | );
50 | })}
51 |
52 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/components/CounterContinent/CounterContinent.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from "@testing-library/react";
2 | import CounterContinent from ".";
3 |
4 | test("renders a headline", () => {
5 | const countries = [{ name: "Canada" }];
6 | const countriesInfo = [{ name: "Canada", isVisited: true }];
7 | render(
8 |
53 |
54 | Filter by Continent...
55 | Africa
56 | Antarctica
57 | Asia
58 | Central America
59 | Europe
60 | North America
61 | Oceania
62 | South America
63 |
64 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import GlobalStyle from "../styles";
2 | import useSWR from "swr";
3 | import Layout from "../components/Layout";
4 | import useLocalStorageState from "use-local-storage-state";
5 | import { useRouter } from "next/router";
6 | import Head from "next/head";
7 |
8 | const fetcher = (...args) => fetch(...args).then((res) => res.json());
9 |
10 | export default function App({ Component, pageProps }) {
11 | const [countriesInfo, setCountriesInfo] = useLocalStorageState(
12 | "countriesInfo",
13 | { defaultValue: [] }
14 | );
15 |
16 | const router = useRouter();
17 | const { name } = router.query;
18 |
19 | const { data, error, isLoading } = useSWR(
20 | name
21 | ? `https://restcountries.com/v3.1/name/${name}`
22 | : "https://restcountries.com/v3.1/all",
23 | fetcher
24 | );
25 |
26 | if (error) return An error has occurred. ;
27 | if (isLoading) return is loading... ;
28 |
29 | const selectedCountry = data.find(
30 | (country) => country.name.common.toLowerCase() === name
31 | );
32 |
33 | function handleToggleVisited(name) {
34 | setCountriesInfo((countriesInfo) => {
35 | const info = countriesInfo.find(
36 | (countryInfo) => countryInfo.name === name
37 | );
38 | if (info) {
39 | return countriesInfo.map((countryInfo) =>
40 | countryInfo.name === name
41 | ? { ...countryInfo, isVisited: !countryInfo.isVisited }
42 | : countryInfo
43 | );
44 | }
45 | return [...countriesInfo, { name, isVisited: true }];
46 | });
47 | }
48 |
49 | function handleToggleFavorite(name) {
50 | setCountriesInfo((countriesInfo) => {
51 | const favoriteInfo = countriesInfo.find(
52 | (countryInfo) => countryInfo.name === name
53 | );
54 |
55 | if (favoriteInfo) {
56 | return countriesInfo.map((countryInfo) =>
57 | countryInfo.name === name
58 | ? {
59 | ...countryInfo,
60 | isFavorite: !countryInfo.isFavorite,
61 | }
62 | : countryInfo
63 | );
64 | }
65 | return [...countriesInfo, { name, isFavorite: true }];
66 | });
67 | }
68 |
69 | return (
70 | <>
71 |
72 | globehopper
73 |
77 |
86 |
87 | );
88 | }
89 |
--------------------------------------------------------------------------------
/components/CounterContinent/index.js:
--------------------------------------------------------------------------------
1 | import StyledDiv from "../StyledDiv";
2 | import StyledProgressBar from "../StyledProgressBar";
3 | import StyledCounterContinent from "./StyledCounterContinent";
4 |
5 | export default function CounterContinent({ countries, countriesInfo }) {
6 | const allContinents = [
7 | {
8 | name: "Europe",
9 | countries: countries.filter((country) => country.region === "Europe"),
10 | },
11 | {
12 | name: "Asia",
13 | countries: countries.filter((country) => country.region === "Asia"),
14 | },
15 | {
16 | name: "Africa",
17 | countries: countries.filter((country) => country.region === "Africa"),
18 | },
19 | {
20 | name: "North America",
21 | countries: countries.filter(
22 | (country) =>
23 | country.region === "Americas" && country.subregion === "North America"
24 | ),
25 | },
26 | {
27 | name: "South America",
28 | countries: countries.filter(
29 | (country) =>
30 | country.region === "Americas" && country.subregion == "South America"
31 | ),
32 | },
33 | {
34 | name: "Oceania",
35 | countries: countries.filter((country) => country.region === "Oceania"),
36 | },
37 | {
38 | name: "Antarctica",
39 | countries: countries.filter((country) => country.region === "Antarctic"),
40 | },
41 | ];
42 |
43 | const continentCounts = allContinents.map((continent) => {
44 | const visitedCountries = continent.countries.filter((country) =>
45 | countriesInfo
46 | .filter((info) => info.isVisited)
47 | .find((info) => info.name === country.name.common)
48 | );
49 |
50 | return {
51 | name: continent.name,
52 | visitedCount: visitedCountries.length,
53 | totalCount: continent.countries.length,
54 | percent: (
55 | (visitedCountries.length / continent.countries.length) *
56 | 100
57 | ).toFixed(2),
58 | };
59 | });
60 |
61 | return (
62 | <>
63 | {continentCounts
64 | .map((continent) => ({
65 | ...continent,
66 | key: continent.name,
67 | }))
68 | .sort((a, b) => a.name.localeCompare(b.name))
69 | .map((continent) => (
70 |
71 | {continent.name}
72 |
73 |
74 | {continent.visitedCount} / {continent.totalCount}{" "}
75 |
80 |
81 |
82 | ))}
83 |
84 | );
85 | }
86 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Globehopper App - Capstone Project at neuefische Bootcamp
2 |
3 | Globehopper is an app, where you can track which countries you have already visited and where you want to go next
4 |
5 | ## Description
6 |
7 | With this travel app, you can easily keep track of the countries you have visited and plan your future travels all in one place
8 |
9 | 
10 | 
11 | 
12 |
13 | 
14 | 
15 | 
16 |
17 |
18 | ## Getting started
19 |
20 | To get started simply visit [Glopehopper App](https://capstone-globehopper.vercel.app/) and try it out! No further installation is required.
21 | Just open the link on your preferred web browser and enjoy
22 |
23 | ## Tech Stack
24 |
25 | - **React** for building the user interface
26 | - **Next.js** for server rendered React applications
27 | - **Styled Components** for CSS styling
28 | - **useSWR** for fetching an API
29 |
30 | ## Features
31 |
32 | If you are a passionate traveler, this travel app offers some features to make your travel experience easier and more enjoyable. Here are the key features that our app provides
33 |
34 | - Visually displayed progress bars on the homepage, showcasing the number of countries you have visited so far
35 | - A comprehensive list of all countries where you can filter by continent or search for a country by name
36 | - The ability to mark countries as "visited" or "want to go" directly from the country list
37 | - Clicking on a country's name will take you to a detailed page that displays useful information such as the country's continent, languages, currencies, and current local time
38 | - The "Explored" page displays all the countries that you have marked as "visited" and sorts them alphabetically
39 | - The "Wish list" page displays all the countries that you have marked as "want to go" and sorts them alphabetically
40 | - The "Plan your trip" button takes you to a form where you can enter the details of your upcoming trip and submit them. You can also edit or delete these details at any time
41 |
42 | ## Acknowledgements
43 |
44 | This project is the final capstome project implemented during the Web Development Bootcamp at neuefische. I would like to thank the entire team of neuefische for their guidance and support throughout the whole process!
45 |
--------------------------------------------------------------------------------
/pages/favorites.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import CountriesPreview from "../components/CountriesPreview";
3 | import FavoriteButton from "../components/FavoriteButton";
4 | import Form from "../components/Form";
5 | import Header from "../components/Header";
6 | import StyledList from "../components/StyledList";
7 | import StyledListElement from "../components/StyledListElement";
8 | import StyledSVG from "../components/StyledSVG";
9 | import StyledButton from "../components/StyledButton";
10 | import useLocalStorageState from "use-local-storage-state";
11 | import Entry from "../components/Entry";
12 | import { Fragment } from "react";
13 |
14 | export default function FavoriteCountriesPage({
15 | countries,
16 | countriesInfo,
17 | onToggleFavorite,
18 | }) {
19 | const [entries, setEntries] = useLocalStorageState("entries", {
20 | defaultValue: [],
21 | });
22 |
23 | const [selectedCountry, setSelectedCountry] = useState("");
24 |
25 | const [isDeleted, setIsDeleted] = useState(false);
26 |
27 | const listFavoriteCountries = countriesInfo.filter((info) => info.isFavorite);
28 |
29 | const favoriteCountries = countries.filter((country) =>
30 | listFavoriteCountries.find((info) => info.name === country.name.common)
31 | );
32 |
33 | function handleAddEntry(newEntry) {
34 | setEntries([{ ...newEntry }, ...entries]);
35 | }
36 |
37 | function handleEditEntry(country, updatedEntry) {
38 | setEntries(
39 | entries.map((entry) => {
40 | const entryToEdit = entry.name === country.name.common;
41 | if (entryToEdit) {
42 | return {
43 | name: entry.name,
44 | date: updatedEntry.date,
45 | passport: updatedEntry.passport,
46 | visa: updatedEntry.visa,
47 | vaccination: updatedEntry.vaccination,
48 | allowedDays: updatedEntry.allowedDays,
49 | notes: updatedEntry.notes,
50 | };
51 | } else {
52 | return entry;
53 | }
54 | })
55 | );
56 | }
57 |
58 | function handleDeleteEntry(country) {
59 | setIsDeleted(!setIsDeleted);
60 | setEntries(entries.filter((entry) => entry.name !== country.name.common));
61 | setSelectedCountry("");
62 | }
63 |
64 | return (
65 | <>
66 |
67 |
68 | {favoriteCountries
69 | .slice()
70 | .sort((a, b) => a.name.common.localeCompare(b.name.common))
71 | .map((country) => {
72 | const isCountrySelected = selectedCountry === country.name.common;
73 | return (
74 |
75 |
76 |
86 |
92 | {isCountrySelected && (
93 |
97 | )}
98 | {!entries.find(
99 | (entry) => entry.name === country.name.common
100 | ) && (
101 |
104 | setSelectedCountry(
105 | !isCountrySelected && country.name.common
106 | )
107 | }
108 | >
109 | {isDeleted
110 | ? "Plan my trip"
111 | : isCountrySelected
112 | ? "Hide form"
113 | : "Plan my trip"}
114 |
115 | )}
116 |
124 |
125 | );
126 | })}
127 |
128 |
129 | );
130 | }
131 |
--------------------------------------------------------------------------------
/components/CountryDetails/index.js:
--------------------------------------------------------------------------------
1 | import StyledDiv from "../StyledDiv";
2 | import StyledFlag from "../StyledFlag";
3 | import styled from "styled-components";
4 | import Link from "next/link";
5 | import Arrow from "../../public/assets/arrow-left.svg";
6 |
7 | const StyledLink = styled(Link)`
8 | font-size: 2rem;
9 | position: absolute;
10 | top: 5.5rem;
11 | align-self: flex-start;
12 | `;
13 |
14 | export default function CountryDetails({ selectedCountry }) {
15 | function addSeparators(number) {
16 | return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
17 | }
18 | if (!selectedCountry) {
19 | return is Loading ;
20 | }
21 |
22 | const languagesWithSeparators =
23 | selectedCountry.languages &&
24 | Object.values(selectedCountry.languages).join(", ");
25 |
26 | const timezoneWithSeparators = selectedCountry.timezones?.join(", ");
27 |
28 | function getLocalTime(selectedCountry) {
29 | const timeZoneMap = {
30 | "UTC+01:00": "Europe/Paris",
31 | "UTC+02:00": "Europe/Helsinki",
32 | "UTC+03:00": "Europe/Moscow",
33 | "UTC+03:30": "Asia/Tehran",
34 | "UTC+04:00": "Asia/Dubai",
35 | "UTC+04:30": "Asia/Kabul",
36 | "UTC+05:00": "Asia/Karachi",
37 | "UTC+05:30": "Asia/Calcutta",
38 | "UTC+05:45": "Asia/Katmandu",
39 | "UTC+06:00": "Asia/Dhaka",
40 | "UTC+06:30": "Asia/Rangoon",
41 | "UTC+07:00": "Asia/Bangkok",
42 | "UTC+08:00": "Asia/Shanghai",
43 | "UTC+09:00": "Asia/Tokyo",
44 | "UTC+09:30": "Australia/Darwin",
45 | "UTC+10:00": "Australia/Sydney",
46 | "UTC+10:30": "Australia/Lord_Howe",
47 | "UTC+11:00": "Pacific/Guadalcanal",
48 | "UTC+11:30": "Pacific/Norfolk",
49 | "UTC+12:00": "Pacific/Auckland",
50 | "UTC+12:45": "Pacific/Chatham",
51 | "UTC+13:00": "Pacific/Tongatapu",
52 | "UTC+14:00": "Pacific/Kiritimati",
53 | "UTC-01:00": "Atlantic/Azores",
54 | "UTC-02:00": "America/Noronha",
55 | "UTC-03:00": "America/Sao_Paulo",
56 | "UTC-03:30": "America/St_Johns",
57 | "UTC-04:00": "America/Caracas",
58 | "UTC-05:00": "America/Bogota",
59 | "UTC-06:00": "America/Mexico_City",
60 | "UTC-07:00": "America/Phoenix",
61 | "UTC-08:00": "America/Los_Angeles",
62 | "UTC-09:00": "America/Anchorage",
63 | "UTC-09:30": "Pacific/Marquesas",
64 | "UTC-10:00": "Pacific/Honolulu",
65 | "UTC-11:00": "Pacific/Midway",
66 | "UTC-12:00": "Pacific/Kwajalein",
67 | UTC: "Europe/London",
68 | };
69 |
70 | const selectedTimeZone = selectedCountry.timezones.filter((timezone) =>
71 | timeZoneMap.hasOwnProperty(timezone)
72 | );
73 |
74 | const localTimes = selectedTimeZone.map((timezone) =>
75 | new Date().toLocaleString("en-US", {
76 | timeZone: timeZoneMap[timezone],
77 | })
78 | );
79 | return localTimes.map((localTime) => {localTime} );
80 | }
81 |
82 | return (
83 |
84 |
85 |
87 | {selectedCountry.name.common}
88 |
89 | Continent: {selectedCountry.continents}
90 |
91 |
92 | Subregion: {selectedCountry.subregion}
93 |
94 |
95 | Capital: {selectedCountry.capital}
96 |
97 |
98 | Population: {addSeparators(selectedCountry.population)}
99 |
100 |
101 |
102 | {Object.keys(selectedCountry?.languages || selectedCountry.timezones)
103 | .length > 1
104 | ? "Languages: "
105 | : "Language: "}
106 |
107 | {languagesWithSeparators}
108 |
109 |
110 | {
111 |
112 | Currency:
113 | {selectedCountry.currencies &&
114 | Object.values(selectedCountry.currencies).map((currency, index) => (
115 | {currency.name}
116 | ))}
117 |
118 | }
119 |
120 |
121 | {selectedCountry.timezones.length > 1 ? "Timezones:" : "Timezone:"}
122 | {" "}
123 | {selectedCountry.timezones.length > 1 &&
126 |
127 |
128 | {selectedCountry.timezones.length > 1
129 | ? "Current local times:"
130 | : "Current local time:"}
131 | {" "}
132 | {getLocalTime(selectedCountry)}
133 |
134 |
135 | UN Member: {selectedCountry.unMember ? "Yes" : "No"}
136 |
137 | {selectedCountry.flag}
138 |
139 | );
140 | }
141 |
--------------------------------------------------------------------------------
/components/Form/index.js:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import StyledButton from "../StyledButton";
3 | import StyledForm from "./StyledForm";
4 | import StyledFieldset from "./StyledFieldset";
5 |
6 | export default function Form({ name, onAddEntry }) {
7 | const [isVisaValid, setIsVisaValid] = useState(true);
8 | const [text, setText] = useState("");
9 | const [isFormSubmitted, setIsFormSubmitted] = useState(false);
10 |
11 | function handleChange(event) {
12 | setText(event.target.value);
13 | }
14 |
15 | function handleSubmit(event) {
16 | event.preventDefault();
17 | const formData = new FormData(event.target);
18 | const data = Object.fromEntries(formData);
19 |
20 | if (data.allowedDays < 0 || data.allowedDays > 365) {
21 | alert("The allowed days must be between 0 and 365. Please try again.");
22 | return;
23 | }
24 |
25 | onAddEntry(data);
26 | setText("");
27 | setIsFormSubmitted(true);
28 | }
29 |
30 | return (
31 | <>
32 | {!isFormSubmitted && (
33 |
34 | Plan my trip
35 |
36 |
37 | Travel Details
38 |
39 |
40 | Countryname:
41 |
42 | When:
44 |
53 | Required checks:
54 |
55 |
56 | Passport:
57 |
58 |
59 |
68 |
69 |
78 |
79 |
80 |
81 | Vaccination:
82 |
83 |
84 |
93 |
94 |
103 |
104 |
105 |
106 | Visa:
107 |
108 |
109 |
118 |
119 |
128 |
129 |
130 |
131 | Additional checks:
132 |
133 | Allowed days to stay:
134 |
147 | {isVisaValid
148 | ? "Value must be between 1 and 365"
149 | : "You are above max-value of 365"}
150 |
151 |
154 |
164 |
165 | Characters left: {400 - text.length}/400
166 |
167 |
168 | Submit
169 |
170 |
171 | )}
172 |
173 | );
174 | }
175 |
--------------------------------------------------------------------------------
/components/Entry/index.js:
--------------------------------------------------------------------------------
1 | import StyledList from "../StyledList";
2 | import StyledButton from "../StyledButton";
3 | import StyledForm from "../Form/StyledForm";
4 | import { useState } from "react";
5 | import StyledFieldset from "../Form/StyledFieldset";
6 | import styled from "styled-components";
7 |
8 | const StyledButtonWrapper = styled.div`
9 | display: flex;
10 | justify-content: space-between;
11 | gap: 0.5rem;
12 | margin-top: 1rem;
13 | `;
14 |
15 | export default function Entry({
16 | entries,
17 | name,
18 | onEditEntry,
19 | country,
20 | onDeleteEntry,
21 | }) {
22 | const [isVisaValid, setIsVisaValid] = useState(true);
23 | const [isEditing, setIsEditing] = useState(false);
24 | const [remainingCharacters, setRemainingCharacters] = useState(400);
25 | const selectedCountry = entries.find((entry) => entry.name === name);
26 |
27 | function handleSubmit(event) {
28 | event.preventDefault();
29 | const formData = new FormData(event.target);
30 | const data = Object.fromEntries(formData);
31 |
32 | if (data.allowedDays < 0 || data.allowedDays > 365) {
33 | alert("The allowed days must be between 0 and 365. Please try again.");
34 | return;
35 | }
36 |
37 | onEditEntry(country, data);
38 | setIsEditing(!isEditing);
39 | }
40 |
41 | function handleCharacterLengthChange(event) {
42 | setRemainingCharacters(400 - event.target.value.length);
43 | }
44 |
45 | return (
46 | selectedCountry && (
47 | <>
48 |
49 | {selectedCountry.date && (
50 |
51 | When: {" "}
52 | {new Date(selectedCountry.date).toLocaleString("en-US", {
53 | month: "long",
54 | year: "numeric",
55 | })}
56 |
57 | )}
58 | {selectedCountry.passport && (
59 |
60 | Passport required: {selectedCountry.passport}
61 |
62 | )}
63 | {selectedCountry.vaccination && (
64 |
65 | Vaccination required:
66 | {selectedCountry.vaccination}
67 |
68 | )}
69 | {selectedCountry.visa && (
70 |
71 | Visa required: {selectedCountry.visa}
72 |
73 | )}
74 | {selectedCountry.allowedDays && (
75 |
76 | Allowed days: {selectedCountry.allowedDays}
77 |
78 | )}
79 | {selectedCountry.notes && (
80 |
81 | Notes: {selectedCountry.notes}
82 |
83 | )}
84 |
85 |
86 | setIsEditing(!isEditing)}>
87 | {isEditing ? "Cancel" : "Edit"}
88 |
89 | onDeleteEntry(country)}>
90 | Delete
91 |
92 |
93 |
94 | {isEditing && (
95 | <>
96 |
97 | Edit my planned trip
98 |
99 |
100 | Travel Details
101 |
102 | When:
103 |
113 | Required checks:
114 |
115 |
116 | Passport:
117 |
118 |
119 |
131 |
132 |
144 |
145 |
146 |
147 | Vaccination:
148 |
149 |
150 |
162 |
163 |
175 |
176 |
177 |
178 | Visa:
179 |
180 |
181 |
193 |
194 |
206 |
207 |
208 |
209 | Additional checks:
210 |
211 | Allowed days to stay:
212 |
226 | {isVisaValid
227 | ? "Value must be between 1 and 365"
228 | : "You are above max-value of 365"}
229 |
230 |
233 |
243 | Characters left: {remainingCharacters}/400
245 |
246 |
247 |
248 | Save your trip
249 |
250 |
251 |
252 | )}
253 |
254 | )
255 | );
256 | }
257 |
--------------------------------------------------------------------------------