├── .env
├── .github
└── workflows
│ └── codeql-analysis.yml
├── .gitignore
├── .idea
├── .gitignore
├── inspectionProfiles
│ └── Project_Default.xml
├── jsLibraryMappings.xml
├── modules.xml
├── nasa-api-hackathon.iml
└── vcs.xml
├── .vscode
└── launch.json
├── README.md
├── package-lock.json
├── package.json
├── public
├── favicon.ico
├── index.html
├── logo192.png
├── logo512.png
├── manifest.json
└── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── components
├── Footer.js
├── Image.js
├── ImgDetails.js
└── Navbar.js
├── index.css
├── index.js
├── launch.svg
├── logo.svg
├── pages
├── Apod.js
├── BookMarks.js
├── ImgDetail.js
├── ImgSearch.js
├── Index.js
├── Login.js
├── Logout.js
├── NotFound.js
└── Sucess.js
├── reportWebVitals.js
├── setupTests.js
└── space.svg
/.env:
--------------------------------------------------------------------------------
1 | # This is an env file to store back-end URL
2 | REACT_APP_BACKEND_URL="https://back-end-space.herokuapp.com"
--------------------------------------------------------------------------------
/.github/workflows/codeql-analysis.yml:
--------------------------------------------------------------------------------
1 | # For most projects, this workflow file will not need changing; you simply need
2 | # to commit it to your repository.
3 | #
4 | # You may wish to alter this file to override the set of languages analyzed,
5 | # or to provide custom queries or build logic.
6 | #
7 | # ******** NOTE ********
8 | # We have attempted to detect the languages in your repository. Please check
9 | # the `language` matrix defined below to confirm you have the correct set of
10 | # supported CodeQL languages.
11 | #
12 | name: "CodeQL"
13 |
14 | on:
15 | push:
16 | branches: [ master ]
17 | pull_request:
18 | # The branches below must be a subset of the branches above
19 | branches: [ master ]
20 | schedule:
21 | - cron: '32 22 * * 3'
22 |
23 | jobs:
24 | analyze:
25 | name: Analyze
26 | runs-on: ubuntu-latest
27 | permissions:
28 | actions: read
29 | contents: read
30 | security-events: write
31 |
32 | strategy:
33 | fail-fast: false
34 | matrix:
35 | language: [ 'javascript' ]
36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
37 | # Learn more:
38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
39 |
40 | steps:
41 | - name: Checkout repository
42 | uses: actions/checkout@v2
43 |
44 | # Initializes the CodeQL tools for scanning.
45 | - name: Initialize CodeQL
46 | uses: github/codeql-action/init@v1
47 | with:
48 | languages: ${{ matrix.language }}
49 | # If you wish to specify custom queries, you can do so here or in a config file.
50 | # By default, queries listed here will override any specified in a config file.
51 | # Prefix the list here with "+" to use these queries and those in the config file.
52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main
53 |
54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java).
55 | # If this step fails, then you should remove it and run the build manually (see below)
56 | - name: Autobuild
57 | uses: github/codeql-action/autobuild@v1
58 |
59 | # ℹ️ Command-line programs to run using the OS shell.
60 | # 📚 https://git.io/JvXDl
61 |
62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
63 | # and modify them (or add more) to build your code if your project
64 | # uses a compiled language
65 |
66 | #- run: |
67 | # make bootstrap
68 | # make release
69 |
70 | - name: Perform CodeQL Analysis
71 | uses: github/codeql-action/analyze@v1
72 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/.idea/.gitignore:
--------------------------------------------------------------------------------
1 | # Default ignored files
2 | /shelf/
3 | /workspace.xml
4 | # Editor-based HTTP Client requests
5 | /httpRequests/
6 |
--------------------------------------------------------------------------------
/.idea/inspectionProfiles/Project_Default.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/.idea/jsLibraryMappings.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/.idea/nasa-api-hackathon.iml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
1 | {
2 | "version": "0.2.0",
3 | "configurations": [
4 | {
5 | "type": "pwa-msedge",
6 | "request": "launch",
7 | "name": "Launch Edge against localhost",
8 | "url": "http://localhost:3000",
9 | "webRoot": "${workspaceFolder}"
10 | }
11 | ]
12 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Getting Started with Create React App
2 |
3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
4 |
5 | ## Available Scripts
6 |
7 | In the project directory, you can run:
8 |
9 | ### `npm start`
10 |
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 |
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 |
17 | ### `npm test`
18 |
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 |
22 | ### `npm run build`
23 |
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 |
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 |
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 |
32 | ### `npm run eject`
33 |
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 |
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 |
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 |
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 |
42 | ## Learn More
43 |
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 |
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 |
48 | ### Code Splitting
49 |
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 |
52 | ### Analyzing the Bundle Size
53 |
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 |
56 | ### Making a Progressive Web App
57 |
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 |
60 | ### Advanced Configuration
61 |
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 |
64 | ### Deployment
65 |
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 |
68 | ### `npm run build` fails to minify
69 |
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nasa-api-hackathon",
3 | "homepage": "http://codewithpom.github.io/NASA-API-Hackathon",
4 | "version": "0.1.0",
5 | "private": true,
6 | "dependencies": {
7 | "@testing-library/jest-dom": "^5.14.1",
8 | "@testing-library/react": "^11.2.7",
9 | "@testing-library/user-event": "^12.8.3",
10 | "axios": "^0.21.4",
11 | "eslint-plugin-react": "^7.26.0",
12 | "react": "^17.0.2",
13 | "react-device-detect": "^2.0.1",
14 | "react-dom": "^17.0.2",
15 | "react-medium-image-zoom": "^4.3.5",
16 | "react-router-dom": "^5.3.0",
17 | "react-scripts": "4.0.3",
18 | "sawo": "^1.0.1",
19 | "web-vitals": "^1.1.2"
20 | },
21 | "scripts": {
22 | "predeploy": "npm run build",
23 | "deploy": "gh-pages -d build",
24 | "start": "react-scripts start",
25 | "build": "react-scripts build",
26 | "test": "react-scripts test",
27 | "eject": "react-scripts eject"
28 | },
29 | "eslintConfig": {
30 | "extends": [
31 | "react-app",
32 | "react-app/jest"
33 | ]
34 | },
35 | "browserslist": {
36 | "production": [
37 | ">0.2%",
38 | "not dead",
39 | "not op_mini all"
40 | ],
41 | "development": [
42 | "last 1 chrome version",
43 | "last 1 firefox version",
44 | "last 1 safari version"
45 | ]
46 | },
47 | "devDependencies": {
48 | "eslint": "^7.32.0",
49 | "gh-pages": "^3.2.3"
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithpom/NASA-API-Hackathon/bd5545fcb921b5a862f8e5c0a1a6811349c34e98/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
17 |
18 |
27 |
29 |
30 | Space Exploration
31 |
32 |
33 |
34 |
35 | You need to enable JavaScript to run this app.
36 |
37 |
38 |
39 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithpom/NASA-API-Hackathon/bd5545fcb921b5a862f8e5c0a1a6811349c34e98/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewithpom/NASA-API-Hackathon/bd5545fcb921b5a862f8e5c0a1a6811349c34e98/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | *{
2 | line-height: 1.5;
3 | }
4 |
5 | img {
6 | padding-left: 15%;
7 | padding-right: 15%;
8 | padding-top: 5%;
9 | -webkit-user-drag: none;
10 | }
11 |
12 | .card {
13 | text-align: center;
14 | display:inline-block;
15 | margin: 2%;
16 | }
17 |
18 | .text-justify{
19 | text-align: justify;
20 | }
21 |
22 | .base-color{
23 | color: #FFC100;
24 | }
25 |
26 | a{
27 | color: #ffc400;
28 | text-decoration: none;
29 | }
30 |
31 | a:hover{
32 | color:#ffbf00;
33 | text-decoration: underline;
34 | }
35 |
36 | .form-control{
37 | height: 45px;
38 | background: #fafafa;
39 | }
40 |
41 | .form-control:focus{
42 | background: #f1f1f1;
43 | }
44 |
45 | form button[type="submit"]{
46 | background: #ffbf00;
47 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import { HashRouter, Switch, Route } from "react-router-dom";
2 | import Apod from "./pages/Apod"
3 | import ImgSearch from "./pages/ImgSearch";
4 | import Index from "./pages/Index";
5 | import Navbar from "./components/Navbar";
6 | import ImgDetail from "./pages/ImgDetail";
7 | import NotFound from "./pages/NotFound";
8 | import Footer from "./components/Footer";
9 | import Login from "./pages/Login";
10 | import BookMarks from "./pages/BookMarks";
11 | import Sucess from "./pages/Sucess";
12 | import Logout from "./pages/Logout";
13 |
14 |
15 |
16 |
17 | function App() {
18 | return (
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
38 |
39 | export default App;
40 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render( );
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | // import { Link } from 'react-router-dom';
3 |
4 | export default function Footer() {
5 | return (
6 | <>
7 |
8 |
9 |
10 |
11 |
12 |
13 | Design and Developed by Space Exploration
14 |
Illustrations By Storyset
15 |
16 |
27 |
28 |
29 |
30 |
31 |
32 | >
33 | )
34 | }
--------------------------------------------------------------------------------
/src/components/Image.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import Zoom from 'react-medium-image-zoom'
4 | import 'react-medium-image-zoom/dist/styles.css'
5 |
6 | export default function Image(props) {
7 | return (
8 | <>
9 |
10 | {props.image_heading}
11 |
12 |
13 |
14 |
15 |
16 | {props.informationTitle}
17 |
18 | >
19 | )
20 | }
21 |
22 |
23 | Image.propTypes = {
24 | image_heading: PropTypes.string.isRequired,
25 | image_src: PropTypes.string.isRequired,
26 | informationTitle: PropTypes.string.isRequired,
27 | img_alt: PropTypes.string.isRequired
28 | }
29 |
30 |
31 | Image.defaultProps = {
32 | image_heading: "Set The image by image_heading in the props",
33 | image_src: "Set the img src by image_src in the props",
34 | informationTitle: "Set the Title here by informationTitle from the props",
35 | img_alt: "Set the img alt by img_alt from the props"
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/ImgDetails.js:
--------------------------------------------------------------------------------
1 | import { React, useEffect, useState } from 'react'
2 | import PropTypes from 'prop-types'
3 | import Zoom from 'react-medium-image-zoom';
4 | import 'react-medium-image-zoom/dist/styles.css';
5 | import { MobileView, BrowserView } from 'react-device-detect';
6 | import { Link } from 'react-router-dom';
7 | import axios from 'axios';
8 |
9 |
10 | function getCookie(cname) {
11 | let name = cname + "=";
12 | let decodedCookie = decodeURIComponent(document.cookie);
13 | let ca = decodedCookie.split(';');
14 | for (let i = 0; i < ca.length; i++) {
15 | let c = ca[i];
16 | while (c.charAt(0) === ' ') {
17 | c = c.substring(1);
18 | }
19 | if (c.indexOf(name) === 0) {
20 | return c.substring(name.length, c.length);
21 | }
22 | }
23 | return "";
24 | }
25 | function checkCookie() {
26 | let username = getCookie("user-id");
27 | return username !== "";
28 | }
29 |
30 |
31 |
32 |
33 |
34 | export default function ImgDetails(props) {
35 | const [bookmarks, change_bookmarks] = useState([])
36 | useEffect(() => {
37 | const user_id = getCookie("user-id");
38 |
39 | axios.post(`${process.env.REACT_APP_BACKEND_URL}/bookmarks`, {
40 | "payload": {
41 | 'user-id': user_id
42 | }
43 | }).then(function (data) {
44 | change_bookmarks(data.data)
45 | })
46 |
47 | }, [])
48 | function get_bookmarks() {
49 | const user_id = getCookie("user-id");
50 |
51 | axios.post(`${process.env.REACT_APP_BACKEND_URL}/bookmarks`, {
52 | "payload": {
53 | 'user-id': user_id
54 | }
55 | }).then(function (data) {
56 | change_bookmarks(data.data)
57 | })
58 | }
59 |
60 | function remove_bookmarks() {
61 | axios.post(`${process.env.REACT_APP_BACKEND_URL}/delete_bookmark`, {
62 | "payload": {
63 | "user-id": getCookie("user-id"),
64 | "url": window.location.href
65 | }
66 | }).then(function (response) {
67 | get_bookmarks()
68 | })
69 | }
70 |
71 | function add_bookmark() {
72 | axios.post(`${process.env.REACT_APP_BACKEND_URL}/add_bookmark`, {
73 | "payload": {
74 | "user-id": getCookie('user-id'),
75 | "url": window.location.href
76 | }
77 | }).then(function (response) {
78 | get_bookmarks();
79 | })
80 | }
81 | function share() {
82 | navigator.share({
83 | "title": "Share this Image",
84 | "text": props.NASA_id,
85 | "url": window.location.href
86 | })
87 | }
88 |
89 | return (
90 | <>
91 |
92 |
93 |
94 |
95 |
96 | {props.title}
97 |
98 |
99 | {/*
*/}
100 |
101 |
102 |
103 | {checkCookie("user-id") ? (
104 | bookmarks.includes(window.location.href) ? (
105 |
106 |
107 |
108 |
109 | ) : (
110 |
111 |
112 |
113 | )
114 | ) : (
115 | <>
116 |
117 |
118 | Login To Bookmark this image
119 |
120 |
121 | >
122 | )}
123 |
124 |
125 |
126 |
127 |
128 |
129 | Share
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
140 |
141 |
142 |
143 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
NASA ID - {props.NASA_id}
155 | Taken on - {props.taken_on}
156 | Center - {props.center}
157 |
158 |
159 |
160 | Description
161 |
162 |
163 |
166 |
167 |
168 |
169 |
170 | >
171 | )
172 | }
173 |
174 | ImgDetails.propTypes = {
175 | title: PropTypes.string.isRequired,
176 | img_src: PropTypes.string.isRequired,
177 | NASA_id: PropTypes.string.isRequired,
178 | center: PropTypes.string.isRequired,
179 | description: PropTypes.string,
180 | taken_on: PropTypes.string,
181 | }
182 |
183 |
184 | ImgDetails.defaultProps = {
185 | description: "No Description Provided "
186 | }
--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import PropTypes from 'prop-types'
3 | import { NavLink } from 'react-router-dom'
4 |
5 | export default function Navbar(props) {
6 | return (
7 |
8 |
9 |
{props.title}
10 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | Home
20 |
21 |
22 | {props.apod_text}
23 |
24 |
25 | {props.image_search}
26 |
27 |
28 | Your Bookmarks
29 |
30 |
31 | Login
32 |
33 |
34 | Logout
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | )
44 | }
45 |
46 | Navbar.propTypes = {
47 | title: PropTypes.string,
48 | aboutText: PropTypes.string,
49 | aboutLink: PropTypes.string,
50 | image_search: PropTypes.string,
51 | image_search_link: PropTypes.string,
52 | apod_text: PropTypes.string,
53 | apod_link: PropTypes.string
54 | }
55 |
56 |
57 | Navbar.defaultProps = {
58 | title: "Set title here",
59 | aboutText: "About Text here",
60 | aboutLink: "/about",
61 | image_search: "Image Search",
62 | image_search_link: "/search",
63 | apod_text: "APOD",
64 | apod_link: "/apod"
65 | }
66 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 |
7 | ReactDOM.render(
8 |
9 |
10 | ,
11 | document.getElementById('root')
12 | );
13 |
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 |
--------------------------------------------------------------------------------
/src/launch.svg:
--------------------------------------------------------------------------------
1 |
2 | Submit
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/pages/Apod.js:
--------------------------------------------------------------------------------
1 | import '../App.css';
2 | import Image from '../components/Image';
3 | import React, { useState } from 'react'
4 | import axios from 'axios';
5 |
6 |
7 | function Apod() {
8 | const [data, change_data] = useState({ date: "" });
9 | React.useEffect(() => {
10 | axios.get(`https://api.nasa.gov/planetary/apod?api_key=${process.env.REACT_APP_NASA_API}`).then((response) => {
11 | change_data(response.data);
12 | });
13 | }, []);
14 |
15 | const to_date = (dateString) => {
16 | const year = dateString.substring(0, 4);
17 | const month = dateString.substring(4, 6);
18 | const day = dateString.substring(6, 8);
19 | const date = new Date(year, month - 1, day);
20 |
21 | return date.toDateString();
22 |
23 | }
24 |
25 | return (
26 | <>
27 |
28 |
29 |
Today's Hit
30 |
31 |
32 |
33 |
34 | This picture was taken by {data.copyright} on {to_date(data.date.replace("-", ""))}
35 |
36 |
37 |
38 | Explanation
39 |
40 |
41 | {data.explanation}
42 |
43 |
44 |
45 | >
46 | );
47 | }
48 |
49 | export default Apod;
50 |
--------------------------------------------------------------------------------
/src/pages/BookMarks.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { React, useEffect, useState } from 'react'
3 | import { Link } from 'react-router-dom';
4 |
5 | function getCookie(cname) {
6 | let name = cname + "=";
7 | let decodedCookie = decodeURIComponent(document.cookie);
8 | let ca = decodedCookie.split(';');
9 | for (let i = 0; i < ca.length; i++) {
10 | let c = ca[i];
11 | while (c.charAt(0) === ' ') {
12 | c = c.substring(1);
13 | }
14 | if (c.indexOf(name) === 0) {
15 | return c.substring(name.length, c.length);
16 | }
17 | }
18 | return "";
19 | }
20 |
21 | export default function BookMarks() {
22 | const [element, change_element] = useState([]);
23 | useEffect(() => {
24 | if (getCookie('user-id') === "") {
25 | window.location.href = "#/login?redirect=#bookmarks";
26 | return <>>;
27 | }
28 |
29 | axios.post(`${process.env.REACT_APP_BACKEND_URL}/bookmarks`, {
30 | "payload": {
31 | 'user-id': getCookie('user-id')
32 | }
33 | }).then(function (data) {
34 | change_element(data.data);
35 | })
36 |
37 |
38 |
39 | }, [])
40 |
41 |
42 | function remove_card(id) {
43 | const element = document.getElementById(id);
44 | axios.post(`${process.env.REACT_APP_BACKEND_URL}/delete_bookmark`, {
45 | "payload": {
46 | "user-id": getCookie("user-id"),
47 | "url": element.getAttribute("link")
48 | }
49 | }).then(function (response) {
50 | element.remove();
51 | })
52 |
53 |
54 | }
55 |
56 | console.log(element)
57 | function get_Url() {
58 | let loc = window.location.href;
59 | console.log(loc.split("#")[0]);
60 | return loc.split("#")[0];
61 |
62 | }
63 |
64 | return (
65 |
66 |
67 | Your boomarks
68 |
69 |
70 | Your bookmarks are synced with your account
71 |
72 |
73 | {
74 | Array(element)[0].map((link, index) => {
75 | console.log(link)
76 | return (
77 |
78 |
79 |
80 |
81 |
{decodeURI(link.split("/").slice(-1))}
82 | remove_card(index)}>
83 |
84 |
85 |
86 |
87 |
88 | Details
89 |
90 |
91 |
92 |
93 |
94 | )
95 | })
96 | }
97 |
98 |
99 | )
100 | }
101 |
--------------------------------------------------------------------------------
/src/pages/ImgDetail.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import ImgDetails from '../components/ImgDetails';
3 | import axios from 'axios';
4 |
5 |
6 | export default function ImgDetail(props) {
7 | const img_url = `https://images-assets.nasa.gov/image/${props.match.params.id}/${props.match.params.id}~thumb.jpg`;
8 | const NASA_id = props.match.params.id;
9 | const [data, change_data] = React.useState({
10 | title: "Loading",
11 | center: "Loading",
12 | description: "Loading",
13 | taken_on: "Loading"
14 | });
15 |
16 | React.useEffect(() => {
17 | axios.get(`https://images-assets.nasa.gov/image/${props.match.params.id}/metadata.json`).then((response) => {
18 | let final_data = {
19 | title: response.data['AVAIL:Title'],
20 | center: response.data["AVAIL:Center"],
21 | taken_on: response.data['AVAIL:DateCreated']
22 | }
23 | if (response.data["AVAIL:Description"] !== "") {
24 | final_data['description'] = response.data["AVAIL:Description"].replace("\n", " ")
25 | } else {
26 | final_data['description'] = "No Description Provided "
27 | }
28 | console.log(final_data);
29 | change_data(final_data);
30 |
31 |
32 | }).catch(function (err) {
33 | window.location.href = "#/404"
34 | });
35 | }, [props.match.params.id]);
36 |
37 | return (
38 | <>
39 |
40 | >
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/src/pages/ImgSearch.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react'
2 | import axios from "axios";
3 | import ReactDOM from 'react-dom';
4 | import { HashRouter, Link } from 'react-router-dom';
5 |
6 |
7 | export default function ImgSearch() {
8 | const [display, show] = useState("none");
9 | const bringMore = () => {
10 | console.log("Once more")
11 |
12 | let query = document.getElementById("input").value;
13 | axios.get(`https://images-api.nasa.gov/search?page=1&q=${query}&media_type=image`).then((response) => {
14 | show("");
15 | console.log(response);
16 |
17 | ReactDOM.unmountComponentAtNode(document.getElementById('data_div'))
18 |
19 |
20 | // if (response['data']['collection']['items']['links'] === undefined){
21 | // return;
22 | // }
23 | console.log(response['data']['collection']['items'].length)
24 | if (response['data']['collection']['items'].length === 0) {
25 | console.log("No results found");
26 | document.getElementById("end").style.display = "";
27 | return;
28 | } else {
29 | document.getElementById("end").style.display = "none";
30 | }
31 |
32 | let element =
33 |
34 |
35 | {response['data']['collection']['items'].map(add)}
36 |
37 |
38 |
39 | function add(item, index) {
40 | try {
41 | return
42 |
43 |
45 |
46 |
{item['data'][0]['title']}
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 | Taken on
56 | - {item['data'][0]['date_created']}
57 | Center -
58 |
59 | {item['data'][0]['center']}
60 |
61 |
62 | NASA Id - {item['data'][0]['nasa_id']}
63 |
64 |
65 |
66 | Details
67 |
68 |
69 |
70 |
71 |
72 | } catch (e) {
73 | console.log("Done")
74 | }
75 |
76 | }
77 | console.log("Rendering");
78 | ReactDOM.render(element, document.getElementById("data_div"));
79 | console.log("Rendered");
80 |
81 | });
82 | }
83 |
84 | return <>
85 |
86 |
87 |
88 |
89 | Enter the search term
90 |
91 |
92 |
94 |
95 |
96 | Search for it
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 | Sorry No results found
111 |
112 |
113 |
114 | >
115 | }
116 |
117 |
118 |
--------------------------------------------------------------------------------
/src/pages/Index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import space from '../space.svg';
3 | import launch from '../launch.svg';
4 |
5 | export default function Index() {
6 | return (
7 | <>
8 |
9 |
10 |
11 | {/* About Us */}
12 |
13 |
14 | Space Exploration
15 |
16 |
17 |
18 |
19 | About us
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | This is a place to research about space and this was made as a hackathon project and we
28 | use official NASA API that we got from
29 | here . We have added personal account for you to bookmark things in it and we have used SAWO Labs in it. We are even working on a discord bot for you to make easy to use it in discord without any problem.
30 |
31 |
32 |
33 |
34 |
35 |
36 | {/* Contact Us */}
37 |
38 |
39 | Contact us
40 |
41 |
42 |
43 |
44 |
45 |
62 |
63 |
64 |
65 |
66 | >
67 | )
68 | }
69 |
70 |
--------------------------------------------------------------------------------
/src/pages/Login.js:
--------------------------------------------------------------------------------
1 |
2 | import Sawo from "sawo"
3 | import { React, useEffect } from "react";
4 | import axios from "axios";
5 |
6 | const API_KEY = "7db5557d-bd1b-4a77-8b14-0a09da4f233e";
7 |
8 | function setCookie(cname, cvalue, exdays) {
9 | const d = new Date();
10 | d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
11 | let expires = "expires=" + d.toUTCString();
12 | document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
13 | }
14 |
15 |
16 | export default function Login() {
17 | function LoginCallback(payload) {
18 | console.log(payload);
19 | axios.post(`${process.env.REACT_APP_BACKEND_URL}/create_account`, { "payload": payload }).then(function (reponse) {
20 | setCookie("user-id", payload['user_id'], 30);
21 | const location = window.location.href;
22 | const param_start = location.indexOf("?");
23 | console.log(param_start);
24 | const params = location.slice(param_start);
25 | console.log(params);
26 | if (param_start === -1) {
27 | window.location.href = "#/sucess";
28 | } else {
29 | window.location.href = `#/sucess${params}`;
30 | }
31 |
32 | })
33 | }
34 | useEffect(() => {
35 | const sawoConfigEmail = {
36 | onSuccess: LoginCallback, //required,
37 | //required, must be one of: 'email', 'phone_number_sms',
38 | identifierType: 'email',
39 | apiKey: API_KEY,
40 | containerID: "sawo-container-email",
41 | }
42 |
43 | const sawoConfigNumber = {
44 | onSuccess: LoginCallback, //required,
45 | //required, must be one of: 'email', 'phone_number_sms',
46 | identifierType: 'phone_number_sms',
47 | apiKey: API_KEY,
48 | containerID: "sawo-container-phone",
49 | }
50 |
51 | const sawoEmail = new Sawo(sawoConfigEmail);
52 | const sawoNumber = new Sawo(sawoConfigNumber);
53 | sawoEmail.showForm();
54 | sawoNumber.showForm();
55 |
56 |
57 | }, [])
58 |
59 | function change_to_number() {
60 | document.getElementById("sawo-container-email").style.display = "none";
61 | document.getElementById("sawo-container-phone").style.display = "";
62 | document.getElementById("number").style.display = "none";
63 | document.getElementById("email").style.display = "";
64 |
65 | }
66 |
67 | function change_to_email() {
68 | document.getElementById("sawo-container-email").style.display = "";
69 | document.getElementById("sawo-container-phone").style.display = "none";
70 | document.getElementById("number").style.display = "";
71 | document.getElementById("email").style.display = "none";
72 |
73 | }
74 |
75 | return (
76 |
77 |
78 |
79 |
83 |
84 |
85 |
86 | Verify by email
87 |
88 |
89 | Verify by number
90 |
91 |
92 |
93 |
94 |
95 | )
96 | }
97 |
--------------------------------------------------------------------------------
/src/pages/Logout.js:
--------------------------------------------------------------------------------
1 | import { React, useEffect } from 'react'
2 | function setCookie(cname, cvalue, exdays) {
3 | const d = new Date();
4 | d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
5 | let expires = "expires=" + d.toGMTString();
6 | document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
7 | }
8 |
9 | export default function Logout() {
10 | useEffect(() => {
11 | setCookie("user-id", "", 0)
12 | window.location.href = "#/";
13 |
14 | }, [])
15 | return (
16 |
17 |
18 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/pages/NotFound.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Link } from "react-router-dom";
3 | export default function NotFound() {
4 | return (
5 |
6 |
7 |
8 |
9 |
10 | 404 Page not found
11 |
12 |
13 | You have reached the end of SPACE but you can return back to Earth by Home
14 |
15 |
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/src/pages/Sucess.js:
--------------------------------------------------------------------------------
1 | import { React, useEffect } from 'react'
2 |
3 | export default function Sucess() {
4 | function redirect() {
5 | const payloads_as_string = window.location.href.slice(window.location.href.indexOf("?"));
6 | const redirect_page = new URLSearchParams(payloads_as_string).get("redirect");
7 | if (redirect_page === null) {
8 | console.log("Do not go anywhere");
9 | } else {
10 | console.log("Ok so you can now go");
11 | console.log(redirect_page);
12 | setTimeout(() => {
13 | window.location = /.*redirect_page=([^&]*).*/.exec(document.location.href)[1];
14 |
15 |
16 | }, 5000)
17 | }
18 |
19 | }
20 | useEffect(() => {
21 | redirect()
22 |
23 | }, [])
24 | return (
25 |
26 |
27 |
28 | You are Now Logged in
29 |
30 |
31 |
32 | Now you are ready to explore the SPACE , have fun.
33 |
34 |
35 |
36 | If you have come here from a page of this site you will be redirected to that page in 5 seconds.
37 |
38 |
39 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/space.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------