Skip to content

Commit

Permalink
update frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
xiaoyuanxun committed Dec 9, 2023
1 parent 4ad7f64 commit 87e010c
Show file tree
Hide file tree
Showing 76 changed files with 5,931 additions and 3,126 deletions.
3 changes: 3 additions & 0 deletions frontend/.env
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
REACT_APP_DFX_NETWORK = local

REACT_APP_USER_CANISTER_ID = bkyz2-fmaaa-aaaaa-qaaaq-cai
5,762 changes: 2,716 additions & 3,046 deletions frontend/package-lock.json

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,18 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@dfinity/auth-client": "^0.20.2",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.65",
"@types/react": "^18.2.38",
"@types/react-dom": "^18.2.17",
"antd": "^5.11.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.20.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4"
Expand Down
37 changes: 1 addition & 36 deletions frontend/src/App.css
Original file line number Diff line number Diff line change
@@ -1,38 +1,3 @@
.App {
text-align: center;
}

.App-logo {
height: 40vmin;
pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}

.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}

.App-link {
color: #61dafb;
}

@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}

}
86 changes: 72 additions & 14 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,82 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { Layout } from 'antd';
import Sider from './components/sider';
import { Outlet, Link } from "react-router-dom";
import Post from './components/post';
import Comment from './components/comment';
import { AuthClient} from "@dfinity/auth-client";

// const { Header, Content, Footer, Sider } = Layout;
function App() {
const [authClient, setAuthClient] = useState<AuthClient | undefined>();
const [isLogin, setIsLogin] = useState<Boolean>(false);

const handleLogIn = async () => {
const _authClient = await AuthClient.create();
_authClient.login({
maxTimeToLive: BigInt(7 * 24 * 60 * 60 * 1000 * 1000 * 1000),
onSuccess: async () => {
setAuthClient(_authClient);
setIsLogin(true);
}});
}

useEffect( () => {

}, [authClient, isLogin]);

return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
<Layout
hasSider={true}
style={{
height: '100vh',
}}
>
<Layout.Sider
theme='light'
width={370}
>
Learn React
</a>
</header>
<Sider
authClient={authClient}
isLogIn={isLogin}
handleLogIn={handleLogIn}
/>
</Layout.Sider>

<Layout.Content style={{
backgroundColor: "white",
overflowY: 'auto',
scrollbarWidth: 'thin',
width: '200px',
borderRight: '1px solid',
}}>
<Post/>
<Post/>
<Post/>
<Post/>
<Post/>
<Post/>
<Post/>
</Layout.Content>

<Layout.Content style={{
backgroundColor : 'white',
overflowY: 'auto',
scrollbarWidth: 'thin',
}}>
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
<Comment />
</Layout.Content>
</Layout>
</div>
);
}
Expand Down
63 changes: 63 additions & 0 deletions frontend/src/actors/feed.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { ActorSubclass, HttpAgent, Identity } from "@dfinity/agent";
import { _SERVICE } from "../declarations/feed/feed.did";
import { createActor } from "../declarations/feed/index";
import { _getHttpAgent } from '../utils/common';
import { Principal } from "@dfinity/principal";

const DFX_NETWORK = process.env.REACT_APP_DFX_NETWORK;

export default class Feed {

canisterId: Principal;
identity: Identity;
actor: ActorSubclass<_SERVICE>;

constructor(canisterId: Principal, identity: Identity) {
this.canisterId = canisterId;
this.identity = identity;
this.actor = createActor(canisterId, {
agent: _getHttpAgent(identity),
});
}

// async createPost() {
// // 发帖前更新当前可用的bucket
// assert(await this.actor.checkAvailableBucket(), true);

// const result = await this.actor.createPost(
// "this is title",
// "this is content"
// );
// // console.log('createPost result', result);
// return result
// }

// async createComment(postId, content) {
// const result = await this.actor.createComment(postId, content);
// return result;
// }

// async createRepost(postId) {
// const result = await this.actor.createRepost(postId);
// return result;
// }

// async createLike(postId) {
// const result = await this.actor.createLike(postId);
// return result;
// }

// async getFeedNumber() {
// const result = await this.actor.getFeedNumber();
// return result;
// }

// async getFeed(postId) {
// return await this.actor.getFeed(postId);
// }

// async getLatestFeed(n) {
// return await this.actor.getLatestFeed(n);
// }

}
68 changes: 68 additions & 0 deletions frontend/src/actors/user.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { ActorSubclass, HttpAgent, Identity } from "@dfinity/agent";
import { _SERVICE } from "../declarations/user/user.did";
import { createActor } from "../declarations/user/index";
import { _getHttpAgent } from '../utils/common';
import { Principal } from "@dfinity/principal";

const userCanisterId = process.env.REACT_APP_USER_CANISTER_ID;

export default class User {

canisterId: Principal;

identity: Identity;

actor: ActorSubclass<_SERVICE>;

constructor(identity: Identity) {
this.canisterId = Principal.fromText(userCanisterId!);
this.identity = identity;
this.actor = createActor(userCanisterId!, {
agent: _getHttpAgent(identity),
});
}

// async createProfile() {
// const result = await this.actor.createProfile({
// name: "John",
// biography : "I am a developer",
// education : "MIT",
// company : "Dfinity Foundation",
// imgUrl : "https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
// feedCanister : [] //,
// });
// console.log("createProfile Result", result, "\n");
// }

// async updateProfile() {
// const result = await this.actor.updateProfile({
// name: "update: John",
// biography : "update: I am a developer",
// education : "update: MIT",
// company : "update: Dfinity Foundation",
// imgUrl : "https://images.unsplash.com/photo-1593642532842-98d0fd5ebc1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
// feedCanister : [] //,
// });
// console.log("updateProfile Result", result, "\n");
// }

// async getProfile() {
// const result = await this.actor.getProfile(this.identity.getPrincipal());
// console.log("getProfile result : ", result, "\n");
// }

// async follow(user) {
// const result = await this.actor.follow(user);
// return result;
// }

// async getFollowersList(user) {
// const result = await this.actor.getFollowersList(user);
// return result;
// }

// async init(_rootFeedCanister) {
// const result = await this.actor.init(_rootFeedCanister);
// return result;
// }
}
30 changes: 30 additions & 0 deletions frontend/src/components/comment.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { Flex, Space, Avatar, Typography, Divider } from 'antd';

export default function Comment() {
return (
<Flex
vertical
style={{
paddingLeft: '10px',
}}
>
<Divider />
<Space>
<Avatar
size={32}
src="https://avatars.githubusercontent.com/u/120618331?s=200&v=4"
style={{
border: '1px solid #D3D540',
}}
/>
<p>NeutronStarDAO</p>
</Space>
<Typography.Paragraph>
This is Comment;This is Comment;This is Comment;
This is Comment;This is Comment;This is Comment;
This is Comment;This is Comment;This is Comment;
This is Comment;This is Comment;This is Comment;
</Typography.Paragraph>
</Flex>
)
}
21 changes: 21 additions & 0 deletions frontend/src/components/errorPage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import React from 'react';
import { Button, Result } from 'antd';


function backHome() {

}

const ErrorPage: React.FC = () => (
<Result
status="404"
title="404"
subTitle="Sorry, the page you visited does not exist."
extra={<Button type="primary" onClick={backHome} >Back Home</Button>}
style={{
height: '100vh',
}}
/>
);

export default ErrorPage;
Loading

0 comments on commit 87e010c

Please sign in to comment.