From b1d2abbab561c30c1b0f5d6946c0d38bf510e325 Mon Sep 17 00:00:00 2001 From: Giacomo-Cattani <151133021+Giacomo-Cattani@users.noreply.github.com> Date: Wed, 8 May 2024 23:12:52 +0200 Subject: [PATCH 1/4] Update README.md --- README.md | 43 +++++++++++++++++++++---------------------- 1 file changed, 21 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 0d6babe..28748d5 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,29 @@ -# React + TypeScript + Vite +# 🌦️ Weather Forecast Web Application -This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. +Welcome to our Weather Forecast Web Application! This application allows users to get the current weather and a 6-day forecast for any location worldwide. -Currently, two official plugins are available: +## Features -- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh -- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +- **Current Weather:** Get the current weather conditions for any location. +- **6-Day Forecast:** View a detailed forecast for the next 6 days. +- **Search by Location:** Search for weather information by city name or zip code. +- **Responsive Design:** The application is optimized for various devices, including desktops, tablets, and mobile phones. -## Expanding the ESLint configuration +## Technologies Used -If you are developing a production application, we recommend updating the configuration to enable type aware lint rules: +- **Frontend:** React.js, Material-UI +- **API:** Open-Meteo API, Openstreetmap API, ... -- Configure the top-level `parserOptions` property like this: +## Usage -```js -export default { - // other rules... - parserOptions: { - ecmaVersion: 'latest', - sourceType: 'module', - project: ['./tsconfig.json', './tsconfig.node.json'], - tsconfigRootDir: __dirname, - }, -} -``` +1. Clone this and `BackEnd` repository to your local machine. +2. Install dependencies using `npm install`. +4. Start the development server using `npm run dev`. +5. Open your web browser and navigate to `http://localhost:5173` to view the application. -- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked` -- Optionally add `plugin:@typescript-eslint/stylistic-type-checked` -- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list + +## Authors + +[@Fabio Musitelli](https://github.com/FabioMusi04) + +[@Giacomo Cattani](https://github.com/Giacomo-Cattani) From 6679efb531cc15bc9b7e256798e2409e8fcba4ed Mon Sep 17 00:00:00 2001 From: Giacomo-Cattani <151133021+Giacomo-Cattani@users.noreply.github.com> Date: Wed, 8 May 2024 23:13:26 +0200 Subject: [PATCH 2/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 28748d5..acc4817 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# 🌦️ Weather Forecast Web Application +# 🌦️ Weather Forecast Web Application (FrontEnd) Welcome to our Weather Forecast Web Application! This application allows users to get the current weather and a 6-day forecast for any location worldwide. From 18f7b36cab44f48909a58f8ad231adcf5713f5b9 Mon Sep 17 00:00:00 2001 From: Giacomo-Cattani Date: Thu, 9 May 2024 09:13:45 +0200 Subject: [PATCH 3/4] fix: handling some errors --- src/components/LeftCard.tsx | 19 ++++++++++++++++--- src/store/store.ts | 2 +- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/components/LeftCard.tsx b/src/components/LeftCard.tsx index 532c283..10feef1 100644 --- a/src/components/LeftCard.tsx +++ b/src/components/LeftCard.tsx @@ -8,10 +8,11 @@ import { useMediaQuery } from "@mui/material"; import icons from '../assets/icons/index.ts'; -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import Heart from "react-animated-heart"; import { UserStore } from "../store/store.ts"; import axiosInstance from "../axios/axiosConf.ts"; +import { CustomAlertProps, CustomAlert } from "./CustomAlert.tsx"; import { WeatherIcon, getStringFromNumber, WeatherNames } from "../components/WeatherIcon"; interface LeftCardProps { @@ -26,6 +27,12 @@ const LeftCard: React.FC = ({ city, WeatherInfo, countryCode, sta const { favoriteCities, toggleFavouritesCities, checkFavourite } = UserStore(); const [isClick, setClick] = React.useState(false); const isLogged = UserStore((state) => state.isLogged); + + const [alert, setAlert] = useState({ + message: null, + severity: null, + handleClose: () => { } + }); useEffect(() => { setClick(checkFavourite({ city, stateCode, countryCode })); @@ -43,8 +50,14 @@ const LeftCard: React.FC = ({ city, WeatherInfo, countryCode, sta }, [favoriteCities]) const handleFavourite = async (city2: object) => { - toggleFavouritesCities(city2); - setClick(!isClick); + if (favoriteCities.length < 8) { + toggleFavouritesCities(city2); + setClick(!isClick); + } + else { + setAlert({ message: "You already have 8 favourites, remove one for adding more", severity: "error", handleClose: () => setAlert({ message: null, severity: null, handleClose: () => { } }) }); + return; + } }; const theme = useTheme(); diff --git a/src/store/store.ts b/src/store/store.ts index ec4b244..5bd6c2a 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -85,7 +85,7 @@ export const UserStore = create( updatedCities.push(city); } else { // If the limit is reached, do not add the city - + } } else { // Remove city if it exists in the list From 1adde54fb7c319404d998a105c40a74e46d9e555 Mon Sep 17 00:00:00 2001 From: Giacomo-Cattani Date: Thu, 9 May 2024 09:17:00 +0200 Subject: [PATCH 4/4] fix: fix custom alert --- src/components/LeftCard.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/LeftCard.tsx b/src/components/LeftCard.tsx index 10feef1..33348dc 100644 --- a/src/components/LeftCard.tsx +++ b/src/components/LeftCard.tsx @@ -27,7 +27,7 @@ const LeftCard: React.FC = ({ city, WeatherInfo, countryCode, sta const { favoriteCities, toggleFavouritesCities, checkFavourite } = UserStore(); const [isClick, setClick] = React.useState(false); const isLogged = UserStore((state) => state.isLogged); - + const [alert, setAlert] = useState({ message: null, severity: null, @@ -65,6 +65,11 @@ const LeftCard: React.FC = ({ city, WeatherInfo, countryCode, sta return ( +