Skip to content

Commit

Permalink
Format code with prettier
Browse files Browse the repository at this point in the history 
This commit fixes the style issues introduced in cf9a804 according to the output
from prettier.

Details: https://deepsource.io/gh/dapoadedire/astro-pic-of-the-day/transform/de67e148-41dd-4bcc-9b98-aa8f4667e829/
  • Loading branch information
@deepsource-autofix
deepsource-autofix[bot] committed Jan 19, 2023
1 parent cf9a804 commit b8c53e1
Show file tree
Hide file tree
Showing 10 changed files with 164 additions and 178 deletions.
72 changes: 34 additions & 38 deletions .eslintrc.json
View file
@@ -1,41 +1,37 @@
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended",
"prettier"
],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": 0
},
"plugins": [
"react",
"jsx-a11y",
"import"
],
"parserOptions": {
"ecmaVersion": 2022,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"plugin:react-hooks/recommended",
"prettier"
],
"rules": {
"react/prop-types": 0,
"react/react-in-jsx-scope": 0
},
"plugins": ["react", "jsx-a11y", "import"],
"parserOptions": {
"ecmaVersion": 2022,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"env": {
"browser": true,
"node": true,
"es6": true
},
"settings": {
"react": {
"version": "detect"
},
"settings": {
"react": {
"version": "detect"
},
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"]
}
}
"import/resolver": {
"node": {
"extensions": [".js", ".jsx"]
}
}
}
}
}
2 changes: 0 additions & 2 deletions README.md
View file
Expand Up @@ -63,5 +63,3 @@ This project is used by the following people:

![astro-pic-of-the-day vercel app_](https://user-images.githubusercontent.com/95668340/210280150-12a45f73-a591-4df2-9b21-7ce680da3bf1.png)
eenshot


7 changes: 5 additions & 2 deletions index.html
View file
Expand Up @@ -6,8 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>NASA Astromomy Picture Of The Day</title>
<meta name="description" content="NASA Astronomy Picture of the Day" />
<script defer data-domain="astro-pic-of-the-day.vercel.app" src="https://plausible.io/js/script.js"></script>

<script
defer
data-domain="astro-pic-of-the-day.vercel.app"
src="https://plausible.io/js/script.js"
></script>
</head>
<body>
<div id="root"></div>
Expand Down
17 changes: 7 additions & 10 deletions src/App.jsx
View file
Expand Up @@ -3,17 +3,14 @@ import Home from "./components/Home";
import "normalize.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient(
{
defaultOptions: {
queries: {
staleTime: Infinity,
cacheTime: Infinity,
},
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: Infinity,
cacheTime: Infinity,
},
}
)

},
});

function App() {
return (
Expand Down
46 changes: 31 additions & 15 deletions src/components/Footer.jsx
View file
@@ -1,17 +1,33 @@
const Footer = () => (
<footer>
<a href="https://www.google.com/search?q=Dapo+adedire" target="_blank" rel="noreferrer">Dapo Adedire</a>
<ul>
<li>
<a href="https://www.github.com/dapoadedire" target="_blank" rel="noreferrer">Github</a>
</li>
<li>
<a href="https://www.twitter.com/dapo_adedire" target="_blank" rel="noreferrer">Twitter</a>
</li>

</ul>
<footer>
<a
href="https://www.google.com/search?q=Dapo+adedire"
target="_blank"
rel="noreferrer"
>
Dapo Adedire
</a>
<ul>
<li>
<a
href="https://www.github.com/dapoadedire"
target="_blank"
rel="noreferrer"
>
Github
</a>
</li>
<li>
<a
href="https://www.twitter.com/dapo_adedire"
target="_blank"
rel="noreferrer"
>
Twitter
</a>
</li>
</ul>
</footer>
);

</footer>
)

export default Footer
export default Footer;
92 changes: 41 additions & 51 deletions src/components/Home.jsx
View file
@@ -1,66 +1,56 @@
import { useState} from "react";
import {
currentDate,
generateRandomDate,

} from "../helpers/utils";
import { useState } from "react";
import { currentDate, generateRandomDate } from "../helpers/utils";
import { useQuery } from "@tanstack/react-query";

import searchAPOD from "../helpers/searchAPOD";

import Result from "./Result";
import Footer from "./Footer";






const Home = () => {
const todaysDate = currentDate();
const [date, setDate] = useState(todaysDate);

const results = useQuery(["apod", date], searchAPOD);

return(
<>
<main>
<div className="form-container">


<form
onSubmit={(e) => {
e.preventDefault();
const date = e.target.date.value;
setDate(date);
}}
>
<label htmlFor="date">
<input type="date" name="date" id="date" max={todaysDate}
min="1995-06-16"
defaultValue={todaysDate}
/>
</label>
<button type="submit">Search</button>
</form>
<div className="button">
<button onClick={
() => {
const randomDate = generateRandomDate();
setDate(randomDate);
}
}>
Random
</button>
</div>
</div>
<Result results={results} />

</main>
<Footer />

return (
<>
<main>
<div className="form-container">
<form
onSubmit={(e) => {
e.preventDefault();
const date = e.target.date.value;
setDate(date);
}}
>
<label htmlFor="date">
<input
type="date"
name="date"
id="date"
max={todaysDate}
min="1995-06-16"
defaultValue={todaysDate}
/>
</label>
<button type="submit">Search</button>
</form>
<div className="button">
<button
onClick={() => {
const randomDate = generateRandomDate();
setDate(randomDate);
}}
>
Random
</button>
</div>
</div>
<Result results={results} />
</main>
<Footer />
</>
)

}
);
};
export default Home;
50 changes: 23 additions & 27 deletions src/components/Result.jsx
View file
@@ -1,6 +1,5 @@
import { getReadableDate } from "../helpers/utils";
const Result = ({ results }) => {

if (results.isLoading) {
return (
<div className="loading-spinner">
Expand All @@ -18,35 +17,32 @@ const Result = ({ results }) => {

return (
<>

<div>
<div className="picture">
<h2>Astromomy Picture Of The Day</h2>
<figure>
{data.media_type === "video" ? (
<iframe src={data.url} title="a">
{data.title}
</iframe>
) : (
<img src={data.url} alt={data.title} />
<div>
<div className="picture">
<h2>Astromomy Picture Of The Day</h2>
<figure>
{data.media_type === "video" ? (
<iframe src={data.url} title="a">
{data.title}
</iframe>
) : (
<img src={data.url} alt={data.title} />
)}
<figcaption>
{data.copyright && (
<p>Image Credits and Copyright: {data.copyright}</p>
)}
<figcaption>
{data.copyright && <p>Image Credits and Copyright: {data.copyright}</p>}
<p className="title">
{data.title} - {getReadableDate(data.date)}
</p>
</figcaption>
</figure>


</div>
<p className="title">
{data.title} - {getReadableDate(data.date)}
</p>
</figcaption>
</figure>
</div>

<div className="explaination">
<p>{data.explanation}</p>
</div>
<div className="explaination">
<p>{data.explanation}</p>
</div>


</div>
</>
);
};
Expand Down
26 changes: 12 additions & 14 deletions src/helpers/searchAPOD.jsx
View file
@@ -1,16 +1,14 @@

const API_KEY = import.meta.env.VITE_API_KEY

const searchAPOD = async ({queryKey}) => {
const date = queryKey[1];
const response = await fetch(
`https://api.nasa.gov/planetary/apod?api_key=${API_KEY}&date=${date}`
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status})`);
}
return response.json();

const API_KEY = import.meta.env.VITE_API_KEY;

const searchAPOD = async ({ queryKey }) => {
const date = queryKey[1];
const response = await fetch(
`https://api.nasa.gov/planetary/apod?api_key=${API_KEY}&date=${date}`
);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status})`);
}
return response.json();
};

export default searchAPOD;
export default searchAPOD;
1 change: 0 additions & 1 deletion src/helpers/utils.jsx
View file
Expand Up @@ -6,7 +6,6 @@ export const currentDate = () => {
return changeDateFormat(`${day}/${month}/${year}`);
};


export const changeDateFormat = (date) => {
const dateArray = date.split("/");
const year = dateArray[2];
Expand Down

0 comments on commit b8c53e1

Please sign in to comment.