Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Clicklistdata #8

Merged
merged 5 commits into from
Nov 16, 2021
Merged

Clicklistdata #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1dd9c55
merge conflict resolved index.js
Priyami Nov 15, 2021
2b74242
onclick listitem retrieved
Priyami Nov 15, 2021
013f53f
Lifting state up(city) Listlocation -> Box component
Priyami Nov 16, 2021
f092315
search by fullcityname api(GET)
Priyami Nov 16, 2021
24185f0
frontend onclick of search button data display from api
Priyami Nov 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 40 additions & 16 deletions server/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
const express = require('express');
const path = require('path');

const bodyParser = require('body-parser');
const dotenv = require('dotenv').config();
// console.log(process.env.API_KEY)

const axios = require('axios');
const address = process.argv[2]; // query the place you want to know the weather from
const app = express()
const app = express();
const cors = require('cors');
// const { response } = require('express');
// let request = require('request');
const apiRouter = require('./routes/handler.js')
//app.use(express.bodyParser());
//app.use(express.urlencoded({ extended: true }));
require('dotenv').config({path: path.join(__dirname, '.env')});
const api_key = process.env.API_KEY;

app.use(bodyParser.json());
app.use(bodyParser());
app.use(bodyParser.urlencoded({
extended: true
}));

app.use(cors());

const PORT = 4000;
var city;
let fullCityName;
console.log(api_key);

// app.use("/", apiRouter);

if(!address) {
console.log('Please enter the name of the city')
}
app.get('/', async (req, res) => {
try {
const response = await axios({
url: `https://api.weatherapi.com/v1/current.json?key=${process.env.API_KEY}&q=boston`,
url: `https://api.weatherapi.com/v1/current.json?key=${api_key}&q=boston`,
method: "get",
headers: { 'content-type': 'application/json' },

});
res.status(200).json(response.data);
} catch (err) {
Expand All @@ -41,8 +41,10 @@ app.get('/', async (req, res) => {
app.get('/week', async (req, res) => {
try {
const response = await axios({
url: `https://api.weatherapi.com/v1/forecast.json?key=${process.env.API_KEY}&q=boston&days=7`,
url: `https://api.weatherapi.com/v1/forecast.json?key=${api_key}&q=boston&days=7`,
method: "get",
headers: { 'content-type': 'application/json' },

});
res.status(200).json(response.data);
console.log("server",response.data);
Expand All @@ -60,7 +62,7 @@ app.post('/city', function (request, response) {
console.log("city inside listdata", city);
try {
const response = await axios({
url: `http://api.weatherapi.com/v1/search.json?key=${process.env.API_KEY}&q=${city}`,
url: `http://api.weatherapi.com/v1/search.json?key=${api_key}&q=${city}`,
method: "get",
});
res.status(200).json(response.data);
Expand All @@ -70,11 +72,33 @@ app.post('/city', function (request, response) {
}
})

})
app.post('/fullcity', function (request, response) {
var data = request.body;
console.log("data to Server", data);
fullCityName = request.body.fullcityname;

})
app.get('/search', async (req, res) => {
try {
const response = await axios({


url: `https://api.weatherapi.com/v1/current.json?key=${api_key}&q=${fullCityName}`,
method: "get",
headers: { 'content-type': 'application/json' },

});
console.log("city inside search", fullCityName);
res.status(200).json(response.data);
} catch (err) {
res.status(500).json({ message: err });
}
})




app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
})
Expand Down
94 changes: 53 additions & 41 deletions src/component/Box.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@ import React, { Component } from 'react';
import { Card, Button, Form, InputGroup, Col, CardGroup } from 'react-bootstrap';
import "./Box.css";
import { FaSearchengin } from 'react-icons/fa';
import { WiDayThunderstorm } from "react-icons/wi";
import Dayweather from './Weekweather';
import { useState, useEffect } from 'react';
import background from "/src/images/Background.jpg";
import axios from 'axios';
import GetData from './GetData';
import Weekweather from './Weekweather';
import Listlocation from './Listlocation';


//Default Weather Boston - Api from Node Server
const useWeather = () => {
const [weather, setWeather] = useState([]);
useEffect(() => {
Expand All @@ -32,9 +30,7 @@ const useWeather = () => {
}





//Three Days weather on More Details Click
const useWeekweather = () => {
const [showWeekweather, setWeekweather] = useState([]);

Expand All @@ -56,51 +52,73 @@ const useWeekweather = () => {

}

/*const useListcity = () => {
const [showListcity, setListcity] = useState([]);
/*const useSearchdata = () => {
const [showSearchData, setSearchData] = useState([]);


useEffect(() => {
let mounted = true

axios.get('http://localhost:4000/listdata')
axios.get('http://localhost:4000/search')
.then((res) => {
if (mounted) {
setListcity(res.data)
console.log("listdata",res.data)
setSearchData(res.data)
console.log("searchdata",res.data)
}

return () => mounted = false;

})
}, [])
return showListcity
return showSearchData

}*/

const Box = props => {

const Box = (props) => {
const [showMore, setMore] = useState('');
const [city, setCity] = useState('');
const [showListcity, setListcity] = useState([]);
const [showSearchData, setSearchData] = useState([]);


const toggle = () => setMore(!showMore);

const searchHandle = () => {

axios.get('http://localhost:4000/search')
.then(res => {
setSearchData(res.data)
})
.catch(err => {
console.log("Error in response", err)
})

}

const addCityHandler = city => {
console.log(city, "in the Box");
setCity(city);
axios.post('http://localhost:4000/fullcity',{'fullcityname':city})
.then(res => {
console.log("City value response", res.data);
})
.catch(err => {
console.log("Error in Request", err);

});
}


const handleChange = (e) => {
const handleChange = (e) => {
e.preventDefault();

if (e.target.id === "city") {
if (e.target.id === "city" ) {
setCity(e.target.value);
}
console.log("city before axios", city);

}

}



//List the cities when type on textbox
const handleSpace= (e) => {
if (e.keyCode === 32)
{
Expand All @@ -115,7 +133,6 @@ const Box = props => {
axios.get('http://localhost:4000/listdata')
.then(res => {
setListcity(res.data)
//console.log("listdata",res.data)
})
.catch(err => {
console.log("Error in response", err)
Expand All @@ -125,32 +142,27 @@ const Box = props => {
};






const weather = useWeather();
const showWeek = useWeekweather();
//const listCity = useListcity();



let data = Object.keys(weather).map((key) =>{
let defaultdata = Object.keys(weather).map((key) =>{
console.log("weather location", weather[key]);
return weather[key]
})

let weekdata = Object.keys(showWeek).map((key) =>{
let weekData = Object.keys(showWeek).map((key) =>{
console.log("weather week", showWeek[key]);
return showWeek[key]
})
/*let listdata = Object.keys(showListcity).map((key) =>{
console.log("city list", showListcity[key]);
return showListcity[key]
})*/
let SearchData = Object.keys(showSearchData).map((key) =>{
console.log("weather Search", showSearchData[key]);
return showSearchData[key]
})






return (

<div className="box" style={{ backgroundImage: `url(${background})` }}>
Expand All @@ -161,7 +173,7 @@ const Box = props => {
<InputGroup>
<InputGroup.Prepend >
<InputGroup.Text>
<FaSearchengin />
<FaSearchengin onClick = {searchHandle} />

</InputGroup.Text>
</InputGroup.Prepend>
Expand All @@ -180,14 +192,14 @@ const Box = props => {


</Form.Row>
<Listlocation data = {showListcity}></Listlocation>
<Listlocation data = {showListcity} city = {addCityHandler}></Listlocation>
</Card.Header>

<GetData data = {data}></GetData>
<GetData data = {defaultdata} data = {SearchData}></GetData>


<Button onClick={toggle} variant="primary">More Details</Button>
{showMore && <Weekweather data = {weekdata}/>}
{showMore && <Weekweather data = {weekData}/>}

</Card>

Expand Down
18 changes: 14 additions & 4 deletions src/component/Listlocation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,26 @@
import React, { Component } from 'react';
import React, { useState,useEffect } from 'react';
import { ListGroup } from 'react-bootstrap';
import "./Listlocation.css";


const Listlocation = (data) => {
console.log(data,"Listlocation")
const [item, setItem] = useState('');
console.log(data.data,"Listlocation")

const handleClick = (e) => {
e.preventDefault();
setItem(e.target.innerText);
console.log("clicked Item", e.target.innerText);
data.city(e.target.innerText);


}

return (
<div>
{
data.data.map(location =>
<ListGroup variant="dark" key={location.id}>
<ListGroup.Item>{location.name}</ListGroup.Item>
<ListGroup.Item onClick={handleClick}>{location.name}</ListGroup.Item>
</ListGroup>
)

Expand Down