From cb932bd23713baf855c7763c6fcab359ac2fc4f2 Mon Sep 17 00:00:00 2001 From: cyberviking5 Date: Mon, 2 Oct 2023 19:13:36 +0530 Subject: [PATCH 1/4] Weather App --- .../kitchen-sink/src/examples/weather-app.tsx | 134 ++++++++++++++++++ 1 file changed, 134 insertions(+) create mode 100644 packages/kitchen-sink/src/examples/weather-app.tsx diff --git a/packages/kitchen-sink/src/examples/weather-app.tsx b/packages/kitchen-sink/src/examples/weather-app.tsx new file mode 100644 index 0000000000..06dd56267e --- /dev/null +++ b/packages/kitchen-sink/src/examples/weather-app.tsx @@ -0,0 +1,134 @@ +import styled from "styled-components"; +import { useState } from 'react'; +import React from 'react' +import { block } from 'million/react'; + +const Condition = styled.span` + margin: 20px auto; + text-transform: capitalize; + font-size: 14px; + & span { + font-size: 28px; + } +`; + +const SearchBox = styled.form` + display: flex; + flex-direction: row; + justify-content: space-evenly; + margin: 20px; + border: black solid 1px; + border-radius: 2px; + + & input { + padding: 10px; + font-size: 14px; + border: none; + outline: none; + font-family: Montserrat; + font-weight: bold; + } + & button { + background-color: blue; + font-size: 14px; + padding: 0 10px; + color: white; + border: none; + outline: none; + cursor: pointer; + font-family: Montserrat; + font-weight: bold; + } +`; +const ChooseCityLabel = styled.span` + color: white; + margin: 10px auto; + font-size: 18px; + font-weight: bold; +`; +const WelcomeWeatherLogo = styled.img` + width: 140px; + height: 140px; + margin: 40px auto; +`; + +type Weather={ + weather:string, + city:string, + weatherDesc:string | undefined, + temp:any, +} + +const WeatherComponent=block(({weather,city,weatherDesc,temp}:Weather)=>{ + console.log(weather) + console.log(city) + return ( +
+ + {typeof(temp)==="number"?( + {`${Math.floor(temp - 273)}°C`} + ):(

NOT DEFINED

)} + {` | ${weatherDesc}`} + +

{city.toUpperCase()}

+
+ ) +}) + +export default function Weather() { + const [city, updatecity] = useState(null);; + const handleChange = (event: React.ChangeEvent) => { + updatecity(event.target.value); + }; + const [weather, updateWeather] = useState(); + const [temp, updatetemp] = useState(); + const [weatherDesc, updateWeatherDesc] = useState(); + const fetchWeather = async (e: React.FormEvent) => { + e.preventDefault(); + const response = await fetch( + `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=fe4feefa8543e06d4f3c66d92c61b69c`, + ); + const data=await response.json(); + updateWeather(data.weather[0].main) + updateWeatherDesc(data.weather[0].description) + updatetemp(data.main.temp) + // console.log(data.weather[0].main); + }; + return ( +
+ Weather App + {city && weather ? ( + <> + + + ) : ( + <> + + Find Weather of your city + {e.preventDefault();await fetchWeather(e)}}> + + + + + )} +
+ ) +} From dcea2e5ecaa38dd2c7d61cb6da7b4c82f7d13598 Mon Sep 17 00:00:00 2001 From: cyberviking5 Date: Tue, 3 Oct 2023 00:49:59 +0530 Subject: [PATCH 2/4] cleanup --- .../kitchen-sink/src/examples/redux-todo.tsx | 1 - .../kitchen-sink/src/examples/weather-app.tsx | 162 ++++++++++-------- packages/kitchen-sink/src/main.tsx | 10 +- 3 files changed, 102 insertions(+), 71 deletions(-) diff --git a/packages/kitchen-sink/src/examples/redux-todo.tsx b/packages/kitchen-sink/src/examples/redux-todo.tsx index 6fbb0ae8bf..074e29bebb 100644 --- a/packages/kitchen-sink/src/examples/redux-todo.tsx +++ b/packages/kitchen-sink/src/examples/redux-todo.tsx @@ -68,7 +68,6 @@ const MainTodoApp = block(() => { const TodoApp = () => { const [input, setInput] = useState(''); - const count = useSelector( (state: { todo: typeof initialState }) => state.todo.count, ); diff --git a/packages/kitchen-sink/src/examples/weather-app.tsx b/packages/kitchen-sink/src/examples/weather-app.tsx index 06dd56267e..cd7bee8f2a 100644 --- a/packages/kitchen-sink/src/examples/weather-app.tsx +++ b/packages/kitchen-sink/src/examples/weather-app.tsx @@ -1,6 +1,6 @@ -import styled from "styled-components"; +import styled from 'styled-components'; import { useState } from 'react'; -import React from 'react' +import React from 'react'; import { block } from 'million/react'; const Condition = styled.span` @@ -52,83 +52,109 @@ const WelcomeWeatherLogo = styled.img` margin: 40px auto; `; -type Weather={ - weather:string, - city:string, - weatherDesc:string | undefined, - temp:any, -} +type Weather = { + weather: string; + city: string; + weatherDesc: string | undefined; + temp: any; +}; -const WeatherComponent=block(({weather,city,weatherDesc,temp}:Weather)=>{ - console.log(weather) - console.log(city) +const WeatherComponent = block( + ({ weather, city, weatherDesc, temp }: Weather) => { + console.log(weather); + console.log(city); return ( -
- - {typeof(temp)==="number"?( - {`${Math.floor(temp - 273)}°C`} - ):(

NOT DEFINED

)} - {` | ${weatherDesc}`} - -

{city.toUpperCase()}

-
- ) -}) +
+ + + {typeof temp === 'number' ? ( + + {`${Math.floor(temp - 273)}°C`} + + ) : ( +

NOT DEFINED

+ )} + + {` | ${weatherDesc}`} + +

{city.toUpperCase()}

+
+ ); + }, +); export default function Weather() { - const [city, updatecity] = useState(null);; - const handleChange = (event: React.ChangeEvent) => { - updatecity(event.target.value); - }; - const [weather, updateWeather] = useState(); - const [temp, updatetemp] = useState(); - const [weatherDesc, updateWeatherDesc] = useState(); - const fetchWeather = async (e: React.FormEvent) => { - e.preventDefault(); - const response = await fetch( - `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=fe4feefa8543e06d4f3c66d92c61b69c`, - ); - const data=await response.json(); - updateWeather(data.weather[0].main) - updateWeatherDesc(data.weather[0].description) - updatetemp(data.main.temp) + const [city, updatecity] = useState(null); + const handleChange = (event: React.ChangeEvent) => { + updatecity(event.target.value); + }; + const [weather, updateWeather] = useState(); + const [temp, updatetemp] = useState(); + const [weatherDesc, updateWeatherDesc] = useState(); + const fetchWeather = async (e: React.FormEvent) => { + e.preventDefault(); + const response = await fetch( + `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=fe4feefa8543e06d4f3c66d92c61b69c`, + ); + const data = await response.json(); + updateWeather(data.weather[0].main); + updateWeatherDesc(data.weather[0].description); + updatetemp(data.main.temp); // console.log(data.weather[0].main); - }; + }; return ( -
- Weather App - {city && weather ? ( - <> - +
+ + Weather App + + {city && weather ? ( + <> + ) : ( <> - - Find Weather of your city - {e.preventDefault();await fetchWeather(e)}}> - - - + Find Weather of your city + { + e.preventDefault(); + await fetchWeather(e); + }} + > + + + )}
- ) + ); } diff --git a/packages/kitchen-sink/src/main.tsx b/packages/kitchen-sink/src/main.tsx index af6eb2c249..437aff7c5d 100644 --- a/packages/kitchen-sink/src/main.tsx +++ b/packages/kitchen-sink/src/main.tsx @@ -26,7 +26,10 @@ type Module = { default: ComponentType }; Object.entries(import.meta.glob('./examples/*.{tsx,jsx}')).map( async ([key, mod]) => [ - key.replace('./examples/', '').replace('.tsx', '').replace('.jsx', ''), + key + .replace('./examples/', '') + .replace('.tsx', '') + .replace('.jsx', ''), mod as () => Promise, ] as const, ), @@ -67,7 +70,10 @@ type Module = { default: ComponentType }; key={key} disabled={hasSelected && selected === index} > - {key.replace('./examples/', '').replace('.tsx', '').replace('.jsx', '')} + {key + .replace('./examples/', '') + .replace('.tsx', '') + .replace('.jsx', '')} ); })}{' '} From 22165c9d5748b53b032ee9f5f6ea3f0c3220b1ab Mon Sep 17 00:00:00 2001 From: cyberviking5 Date: Tue, 3 Oct 2023 12:24:56 +0530 Subject: [PATCH 3/4] Removing consoles --- packages/kitchen-sink/src/examples/weather-app.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/kitchen-sink/src/examples/weather-app.tsx b/packages/kitchen-sink/src/examples/weather-app.tsx index cd7bee8f2a..5177622966 100644 --- a/packages/kitchen-sink/src/examples/weather-app.tsx +++ b/packages/kitchen-sink/src/examples/weather-app.tsx @@ -53,16 +53,13 @@ const WelcomeWeatherLogo = styled.img` `; type Weather = { - weather: string; city: string; weatherDesc: string | undefined; temp: any; }; const WeatherComponent = block( - ({ weather, city, weatherDesc, temp }: Weather) => { - console.log(weather); - console.log(city); + ({city, weatherDesc, temp }: Weather) => { return (
@@ -100,7 +97,6 @@ export default function Weather() { updateWeather(data.weather[0].main); updateWeatherDesc(data.weather[0].description); updatetemp(data.main.temp); - // console.log(data.weather[0].main); }; return (
Date: Tue, 3 Oct 2023 12:27:57 +0530 Subject: [PATCH 4/4] Cleanup --- .../kitchen-sink/src/examples/weather-app.tsx | 46 ++++++++----------- 1 file changed, 20 insertions(+), 26 deletions(-) diff --git a/packages/kitchen-sink/src/examples/weather-app.tsx b/packages/kitchen-sink/src/examples/weather-app.tsx index 5177622966..faaba8ba43 100644 --- a/packages/kitchen-sink/src/examples/weather-app.tsx +++ b/packages/kitchen-sink/src/examples/weather-app.tsx @@ -58,27 +58,25 @@ type Weather = { temp: any; }; -const WeatherComponent = block( - ({city, weatherDesc, temp }: Weather) => { - return ( -
- - - {typeof temp === 'number' ? ( - - {`${Math.floor(temp - 273)}°C`} - - ) : ( -

NOT DEFINED

- )} - - {` | ${weatherDesc}`} - -

{city.toUpperCase()}

-
- ); - }, -); +const WeatherComponent = block(({ city, weatherDesc, temp }: Weather) => { + return ( +
+ + + {typeof temp === 'number' ? ( + + {`${Math.floor(temp - 273)}°C`} + + ) : ( +

NOT DEFINED

+ )} + + {` | ${weatherDesc}`} + +

{city.toUpperCase()}

+
+ ); +}); export default function Weather() { const [city, updatecity] = useState(null); @@ -125,11 +123,7 @@ export default function Weather() { {city && weather ? ( <> - + ) : ( <>