Judy-Milkyway · AscEzio · Dec 4, 2021 · Dec 7, 2021 · Dec 7, 2021 · Dec 7, 2021
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "hack-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^12.8.3",
+    "axios": "^0.24.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-router-dom": "^5.3.0",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="description" content="Web site created using create-react-app" />
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+  <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+  <title>React App</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+    }
+
+    html,
+    body {
+      width: 100vw;
+      height: 100vh;
+    }
+  </style>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="root"></div>
+  <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/app.js b/src/app.js
@@ -0,0 +1,33 @@
+import React, { useState } from 'react';
+import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
+import { Focus } from "./components/focus"
+import { User } from "./components/user"
+import { AddTodo } from "./components/addTodo"
+import CountDown from "./components/countDown"
+import { SystemMsg } from './components/systemMsg';
+import { Finish } from './components/finish';
+import Community from './components/Community/Community'
+import { UserChange } from './components/userChange';
+import Loginlogon from "./components/Loginlogon/Loginlogon"
+
+export const App = () => {
+    return (
+        <div>
+            <Router>
+                <Switch>
+                    <Route path='/' exact component={Loginlogon} />
+                    <Route path="/focus" component={Focus} />
+                    <Route path="/user" component={User} />
+                    <Route path='/club' component={Community} />
+                    {/* <Route path="/additem" render={() => (<AddTodo onChange={handleChange} onClick={handleClick} value={inputValue} />)} /> */}
+                    <Route path="/countdown" render={() => (<CountDown duration={1500} />)} />
+                    <Route path='/message' component={SystemMsg} />
+                    {/* <Route path="/" component={ } /> */}
+                    <Route path='/finish' component={Finish} />
+                    <Route path='/userchange' component={UserChange} />
+                </Switch>
+            </Router>
+        </div>
+    )
+}
+// render={() => (<Focus todoList={todoList} />)}
diff --git a/src/assets/footer/focus.svg b/src/assets/footer/focus.svg
diff --git a/src/assets/footer/home.svg b/src/assets/footer/home.svg
diff --git a/src/assets/footer/user.svg b/src/assets/footer/user.svg
diff --git a/src/assets/todoItem/start.svg b/src/assets/todoItem/start.svg
diff --git a/src/components/Community/Community.jsx b/src/components/Community/Community.jsx
@@ -0,0 +1,109 @@
+import React, { Component } from 'react'
+import { Footer } from '../footer'
+import InstantMessage from './InstantMessage/InstantMessage'
+import Rankinglist from './Rankinglist/Rankinglist'
+// import "./Community.css"
+import "./style.css"
+export default class Community extends Component {
+    //初始化状态 
+    state = {
+        page: "小憩",
+        messages: [
+            { id: "1", username: "还没想好名字", message: "写代码好累。", time: "十二分钟前" },
+            { id: "002", username: "许锦鹏", message: "许锦鹏在12月07日完成专注5小时", time: "十二分钟前" },
+        ],
+        rank: [
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+            { id: "1", username: "还没想好名字", Totaltime: "16:25:00" },
+        ]
+
+    }
+    //选着渲染页面
+    chosePage = (page) => {
+        const { messages, rank } = this.state
+        if (page == "小憩") {
+            return <InstantMessage messages={messages} />
+        } else if (page == "排行榜") {
+            return <Rankinglist rank={rank} />
+        }
+    }
+    //切换到《小憩》页面
+    changePageToXQ = () => {
+        this.setState({ page: "小憩" })
+        //     var xhr = new XMLHttpRequest();
+        //     xhr.open("GET","https://www.errequalsnil.top/community/message",true)
+        //     xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
+        //     xhr.send("reset=1");
+        //     xhr.onreadystatechange = function(){
+        //         console.log("1");
+        //         if(xhr.readyState===4 && xhr.status===200){
+        //             console.log(xhr.responseText)
+        //             // this.props.changeisOnline(true)
+        //         }
+        //     }
+        //     console.log(xhr.responseText)
+    }
+    //切换到《排行榜》页面
+    changePageToRANKING = () => {
+        this.setState({ page: "排行榜" })
+    }
+    render() {
+        //获取状态 
+        const { page } = this.state
+        return (
+            <div className='community'>
+                <div className="title">
+                    <div className='font'>
+                        <a href="#" className='XQ' onClick={this.changePageToXQ}>小憩</a>
+                        <i></i>
+                        <a href="#" onClick={this.changePageToRANKING}>专注排行榜</a>
+                    </div>
+                </div>
+                {this.chosePage(page)}
+                <Footer />
+            </div>
+        )
+    }
+}
diff --git a/src/components/Community/InstantMessage/InstantMessage.jsx b/src/components/Community/InstantMessage/InstantMessage.jsx
@@ -0,0 +1,17 @@
+import React, { Component } from 'react'
+import Message from '../Message/Message'
+
+export default class InstantMessage extends Component {
+    render() {
+        const {messages} = this.props
+        return(
+            <div className='sharebox'>
+                {
+                    messages.map((message)=>{
+                        return <Message key={message.id} {...message}/>
+                    })
+                }
+            </div>
+        )
+    }
+}
diff --git a/src/components/Community/Message/001.png b/src/components/Community/Message/001.png
diff --git a/src/components/Community/Message/Message.jsx b/src/components/Community/Message/Message.jsx
@@ -0,0 +1,23 @@
+import React, { Component } from 'react'
+
+export default class Message extends Component {
+    render() {
+        const { id, username, message, time } = this.props
+        //console.log(message);
+        return (
+            <div className="sharelist">
+                <div className="userMessage">
+                    <div className="messageFace"></div>
+                    <div className='userMessage2'>
+                        <div className='username'>{username}</div>
+                        <i></i>
+                        <div className='time'>{time}</div>
+                    </div>
+                </div>
+                <div className="Message">
+                    <span>{message}</span>
+                </div>
+            </div>
+        )
+    }
+}
diff --git a/src/components/Community/OtherUser/OtherUser.jsx b/src/components/Community/OtherUser/OtherUser.jsx
@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class OtherUser extends Component {
+    render(){
+        return(
+            <div>
+                <div className="otherUserFace"></div>
+            </div>
+        )
+    }
+}
diff --git a/src/components/Community/Rank/Rank.jsx b/src/components/Community/Rank/Rank.jsx
@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+
+export default class Rank extends Component {
+    render() {
+        const { id, username, Totaltime } = this.props
+        return (
+            <li className='rank'>
+                <span className='id'>{id}</span>
+                <div className='messageFace'></div>
+                <span className='username'>{username}</span>
+                <span className='time'>{Totaltime}</span>
+            </li>
+        )
+    }
+}