Skip to content

Commit e5a585c

Browse files
cythilyacythilya
committed
feat: init project
1 parent 1610f3c commit e5a585c

19 files changed

+444
-0
lines changed

‎.gitignore

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
lerna-debug.log*
8+
9+
# Diagnostic reports (https://nodejs.org/api/report.html)
10+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11+
12+
# Runtime data
13+
pids
14+
*.pid
15+
*.seed
16+
*.pid.lock
17+
18+
# Directory for instrumented libs generated by jscoverage/JSCover
19+
lib-cov
20+
21+
# Coverage directory used by tools like istanbul
22+
coverage
23+
*.lcov
24+
25+
# nyc test coverage
26+
.nyc_output
27+
28+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29+
.grunt
30+
31+
# Bower dependency directory (https://bower.io/)
32+
bower_components
33+
34+
# node-waf configuration
35+
.lock-wscript
36+
37+
# Compiled binary addons (https://nodejs.org/api/addons.html)
38+
build/Release
39+
40+
# Dependency directories
41+
node_modules/
42+
jspm_packages/
43+
44+
# TypeScript v1 declaration files
45+
typings/
46+
47+
# TypeScript cache
48+
*.tsbuildinfo
49+
50+
# Optional npm cache directory
51+
.npm
52+
53+
# Optional eslint cache
54+
.eslintcache
55+
56+
# Microbundle cache
57+
.rpt2_cache/
58+
.rts2_cache_cjs/
59+
.rts2_cache_es/
60+
.rts2_cache_umd/
61+
62+
# Optional REPL history
63+
.node_repl_history
64+
65+
# Output of 'npm pack'
66+
*.tgz
67+
68+
# Yarn Integrity file
69+
.yarn-integrity
70+
71+
# dotenv environment variables file
72+
.env
73+
.env.test
74+
75+
# parcel-bundler cache (https://parceljs.org/)
76+
.cache
77+
78+
# Next.js build output
79+
.next
80+
81+
# Nuxt.js build / generate output
82+
.nuxt
83+
dist
84+
85+
# Gatsby files
86+
.cache/
87+
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88+
# https://nextjs.org/blog/next-9-1#public-directory-support
89+
# public
90+
91+
# vuepress build output
92+
.vuepress/dist
93+
94+
# Serverless directories
95+
.serverless/
96+
97+
# FuseBox cache
98+
.fusebox/
99+
100+
# DynamoDB Local files
101+
.dynamodb/
102+
103+
# TernJS port file
104+
.tern-port

‎README.md

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# Performance Monitoring Demo
2+
3+
## Setup
4+
5+
- Clone this project.
6+
- Install dependencies by using `yarn`.
7+
8+
## Run Cypress Test
9+
10+
- Run `yarn start` in one console.
11+
- In another console,
12+
- Run `yarn cypress` in local for silence mode in CI.
13+
- Run `yarn cypress:open` in local for interactive mode to see what is going on.

‎cypress.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const { defineConfig } = require('cypress')
2+
3+
module.exports = defineConfig({
4+
defaultCommandTimeout: 5000,
5+
e2e: {
6+
setupNodeEvents(on, config) {
7+
return require('./cypress/plugins/index.js')(on, config)
8+
},
9+
defaultCommandTimeout: 10000,
10+
slowTestThreshold: 5000,
11+
},
12+
})

‎cypress/e2e/performance.cy.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
describe('index', () => {
2+
it('view this page', () => {
3+
cy.visit('http://localhost:3000/');
4+
cy.intercept('GET', '**/exec?api=display-record&serviceId=summer-dev-test', {
5+
"code": 200,
6+
"message": "success",
7+
"data": [{
8+
"comment": "蛋糕",
9+
"imageId": "1cbFTacqguUTk7HGIJ2Ly1iml92A2_2gh",
10+
"name": "蛋糕",
11+
"photoUrl": "https://drive.google.com/uc?id=1cbFTacqguUTk7HGIJ2Ly1iml92A2_2gh",
12+
"thumbnailUrl": "https://drive.google.com/thumbnail?id=1cbFTacqguUTk7HGIJ2Ly1iml92A2_2gh",
13+
},
14+
{
15+
"comment": "我的書",
16+
"imageId": "1Uc2Z8tLgQCbsHMJmUfK5lNEyqQCe1t5e",
17+
"name": "我的書",
18+
"photoUrl": "https://drive.google.com/uc?id=1Uc2Z8tLgQCbsHMJmUfK5lNEyqQCe1t5e",
19+
"thumbnailUrl": "https://drive.google.com/thumbnail?id=1Uc2Z8tLgQCbsHMJmUfK5lNEyqQCe1t5e",
20+
},
21+
{
22+
"comment": "北海道",
23+
"imageId": "1C5Wn8b4QYfV_uAFcW4QPFTg-hgJYIGZS",
24+
"name": "北海道",
25+
"photoUrl": "https://drive.google.com/uc?id=1C5Wn8b4QYfV_uAFcW4QPFTg-hgJYIGZS",
26+
"thumbnailUrl": "https://drive.google.com/thumbnail?id=1C5Wn8b4QYfV_uAFcW4QPFTg-hgJYIGZS",
27+
}
28+
]
29+
});
30+
});
31+
});

‎cypress/plugins/index.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
/// <reference types="cypress" />
2+
// ***********************************************************
3+
// This example plugins/index.js can be used to load plugins
4+
//
5+
// You can change the location of this file or turn off loading
6+
// the plugins file with the 'pluginsFile' configuration option.
7+
//
8+
// You can read more here:
9+
// https://on.cypress.io/plugins-guide
10+
// ***********************************************************
11+
12+
// This function is called when a project is opened or re-opened (e.g. due to
13+
// the project's config changing)
14+
15+
/**
16+
* @type {Cypress.PluginConfig}
17+
*/
18+
module.exports = (on, config) => {
19+
// `on` is used to hook into various events Cypress emits
20+
// `config` is the resolved Cypress config
21+
}

‎cypress/support/e2e.js

Whitespace-only changes.

‎package.json

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{
2+
"name": "performance-monitoring-demo",
3+
"version": "0.1.0",
4+
"private": true,
5+
"dependencies": {
6+
"@sentry/react": "^7.57.0",
7+
"@testing-library/jest-dom": "^5.16.5",
8+
"@testing-library/react": "^13.4.0",
9+
"@testing-library/user-event": "^13.5.0",
10+
"react": "^18.2.0",
11+
"react-dom": "^18.2.0",
12+
"react-scripts": "5.0.1",
13+
"web-vitals": "^2.1.4"
14+
},
15+
"scripts": {
16+
"start": "react-scripts start",
17+
"build": "react-scripts build",
18+
"test": "react-scripts test",
19+
"eject": "react-scripts eject",
20+
"cypress:open": "./node_modules/cypress/bin/cypress open",
21+
"cypress": "./node_modules/cypress/bin/cypress run"
22+
},
23+
"eslintConfig": {
24+
"extends": [
25+
"react-app",
26+
"react-app/jest"
27+
]
28+
},
29+
"browserslist": {
30+
"production": [
31+
">0.2%",
32+
"not dead",
33+
"not op_mini all"
34+
],
35+
"development": [
36+
"last 1 chrome version",
37+
"last 1 firefox version",
38+
"last 1 safari version"
39+
]
40+
},
41+
"devDependencies": {
42+
"babel-plugin-named-exports-order": "^0.0.2",
43+
"cypress": "^10.10.0",
44+
"prop-types": "^15.8.1",
45+
"webpack": "^5.74.0"
46+
},
47+
"_id": "[email protected]"
48+
}

‎public/favicon.ico

3.78 KB
Binary file not shown.

‎public/index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
<meta name="theme-color" content="#000000" />
8+
<meta
9+
name="description"
10+
content="Web site created using create-react-app"
11+
/>
12+
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13+
<!--
14+
manifest.json provides metadata used when your web app is installed on a
15+
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16+
-->
17+
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18+
<!--
19+
Notice the use of %PUBLIC_URL% in the tags above.
20+
It will be replaced with the URL of the `public` folder during the build.
21+
Only files inside the `public` folder can be referenced from the HTML.
22+
23+
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24+
work correctly both with client-side routing and a non-root public URL.
25+
Learn how to configure a non-root public URL by running `npm run build`.
26+
-->
27+
<title>React App</title>
28+
</head>
29+
<body>
30+
<noscript>You need to enable JavaScript to run this app.</noscript>
31+
<div id="root"></div>
32+
<!--
33+
This HTML file is a template.
34+
If you open it directly in the browser, you will see an empty page.
35+
36+
You can add webfonts, meta tags, or analytics to this file.
37+
The build step will place the bundled scripts into the <body> tag.
38+
39+
To begin the development, run `npm start` or `yarn start`.
40+
To create a production bundle, use `npm run build` or `yarn build`.
41+
-->
42+
</body>
43+
</html>

‎public/logo192.png

5.22 KB
Loading

‎public/logo512.png

9.44 KB
Loading

‎public/manifest.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
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+
}

‎public/robots.txt

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# https://www.robotstxt.org/robotstxt.html
2+
User-agent: *
3+
Disallow:

‎src/App.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
.App {
2+
display: flex;
3+
flex-wrap: wrap;
4+
text-align: center;
5+
width: 100%;
6+
}
7+
8+
.App-logo {
9+
height: 40vmin;
10+
pointer-events: none;
11+
}
12+
13+
@media (prefers-reduced-motion: no-preference) {
14+
.App-logo {
15+
animation: App-logo-spin infinite 20s linear;
16+
}
17+
}
18+
19+
.App-header {
20+
background-color: #282c34;
21+
min-height: 100vh;
22+
display: flex;
23+
flex-direction: column;
24+
align-items: center;
25+
justify-content: center;
26+
font-size: calc(10px + 2vmin);
27+
color: white;
28+
}
29+
30+
.App-link {
31+
color: #61dafb;
32+
}
33+
34+
@keyframes App-logo-spin {
35+
from {
36+
transform: rotate(0deg);
37+
}
38+
to {
39+
transform: rotate(360deg);
40+
}
41+
}

‎src/App.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { useEffect, useState } from 'react';
2+
import './App.css';
3+
4+
const App = () => {
5+
const [photoList, setPhotoList] = useState([]);
6+
7+
useEffect(() => {
8+
fetch('https://script.google.com/macros/s/AKfycbwqEWBMBuxVTTEWSzgekY1g08G1XD2fauTUlfkzAYsTcyQit2T1rM8L4FbpwEtrMi98oA/exec?api=display-record&serviceId=summer-dev-test', {
9+
method: 'GET'})
10+
.then(res => res.json())
11+
.then(({ data }) => {
12+
setPhotoList(data);
13+
});
14+
}, []);
15+
16+
return (
17+
<div className="App">
18+
{
19+
!!photoList.length && photoList.map(({
20+
comment,
21+
imageId,
22+
photoUrl,
23+
}) => {
24+
return (
25+
<img
26+
alt={comment}
27+
key={imageId}
28+
src={photoUrl}
29+
width={300}
30+
/>)
31+
})
32+
}
33+
</div>
34+
);
35+
}
36+
37+
export default App;

0 commit comments

Comments
 (0)