aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/components/Feed/Feed.tsx5
-rw-r--r--src/components/Header/Header.tsx8
-rw-r--r--src/components/PollCard/PollCard.tsx20
-rw-r--r--src/index.tsx31
-rw-r--r--src/pages/AuthPage/AuthPage.tsx5
-rw-r--r--src/pages/AuthPage/SignInForm.tsx4
-rw-r--r--src/pages/FeedPage/FeedPage.tsx8
-rw-r--r--src/pages/ProfilePage/ProfilePage.tsx9
-rw-r--r--src/types.d.ts11
9 files changed, 66 insertions, 35 deletions
diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 8dc3ec1..3b8e16f 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -5,6 +5,7 @@ import PollCard from '../PollCard/PollCard';
interface PropTypes {
polls: Poll[];
+ navigate: (prefix: string, id: string) => void;
}
const useStyles = makeStyles(theme => ({
@@ -15,12 +16,12 @@ const useStyles = makeStyles(theme => ({
}
}));
-const Feed: React.FC<PropTypes> = ({ polls }) => {
+const Feed: React.FC<PropTypes> = ({ polls, navigate }) => {
const classes = useStyles();
return (
<div className={classes.root}>
- {polls.map(poll => <PollCard poll={poll} key={poll._id} />)}
+ {polls.map(poll => <PollCard poll={poll} key={poll._id} navigate={navigate} />)}
</div>
);
};
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 0ee6b5f..4e25fa3 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -13,7 +13,7 @@ import HomeIcon from '@material-ui/icons/Home';
import SearchBar from './SearchBar';
interface PropTypes {
- setPage: (newPage: string) => void;
+ navigate: (prefix: string) => void;
}
const useStyles = makeStyles({
@@ -28,15 +28,15 @@ const useStyles = makeStyles({
}
});
-const Header: React.FC<PropTypes> = ({ setPage }) => {
+const Header: React.FC<PropTypes> = ({ navigate }) => {
const classes = useStyles();
const handleHome = (): void => {
- setPage('feed');
+ navigate('feed');
};
const handleProfile = (): void => {
- setPage('profile');
+ navigate('profile');
};
const handleNotifications = (): void => {};
diff --git a/src/components/PollCard/PollCard.tsx b/src/components/PollCard/PollCard.tsx
index d5c99cc..7f587f3 100644
--- a/src/components/PollCard/PollCard.tsx
+++ b/src/components/PollCard/PollCard.tsx
@@ -5,13 +5,15 @@ import {
CardActionArea,
CardMedia,
Avatar,
- CardHeader
+ CardHeader,
+Link
} from '@material-ui/core/';
import { Poll } from '../../types';
import PercentageBar from './PercentageBar';
interface PropTypes {
poll: Poll;
+ navigate: (prefix: string, id: string) => void;
}
const useStyles = makeStyles(theme => ({
@@ -30,19 +32,29 @@ const useStyles = makeStyles(theme => ({
}));
-const PollCard: React.FC<PropTypes> = ({ poll }) => {
+const PollCard: React.FC<PropTypes> = ({ poll, navigate }) => {
const classes = useStyles();
const { author, contents } = poll;
+ const handleNavigate = () => {
+ navigate('profile', poll.author._id);
+ };
+
const leftPercentage = Math.round(100 * (contents.left.votes / (contents.left.votes + contents.right.votes)));
const rightPercentage = 100 - leftPercentage;
-
return (
<Card className={classes.root}>
<CardHeader
avatar={(
- <Avatar aria-label="avatar" src={author.avatarUrl} alt={author.name[0].toUpperCase()} />
+ <Link href="#">
+ <Avatar
+ aria-label="avatar"
+ src={author.avatarUrl}
+ alt={author.name[0].toUpperCase()}
+ onClick={handleNavigate}
+ />
+ </Link>
)}
title={author.name}
/>
diff --git a/src/index.tsx b/src/index.tsx
index 55bf773..d7326cb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -13,9 +13,10 @@ import Header from './components/Header/Header';
import ProfilePage from './pages/ProfilePage/ProfilePage';
import FeedPage from './pages/FeedPage/FeedPage';
import AuthPage from './pages/AuthPage/AuthPage';
-import { User } from './types';
+import { User, Page } from './types';
import { get } from './requests';
+
const theme = createMuiTheme({
palette: {
primary: {
@@ -33,13 +34,25 @@ const useStyles = makeStyles({
});
const App: React.FC = () => {
- const [page, setPage] = useState('feed');
const [user, setUser] = React.useState<User | undefined>();
+ const [page, setPage] = useState<Page>({ prefix: 'feed', id: '' });
const classes = useStyles();
+ const navigate = (prefix: string, id?: string): void => {
+ if (prefix === 'profile' && !id && !user) setPage({
+ prefix: 'auth',
+ id: ''
+ });
+ else setPage({
+ prefix,
+ id: (id || user?._id || '')
+ });
+ };
+
const logOut = () => {
localStorage.removeItem('userId');
setUser(undefined);
+ navigate('auth');
};
useEffect(() => {
@@ -54,17 +67,11 @@ const App: React.FC = () => {
return (
<ThemeProvider theme={theme}>
<CssBaseline />
- <Header setPage={setPage} />
+ <Header navigate={navigate} />
<div className={classes.root}>
- {
- page === 'profile'
- ? (
- user
- ? <ProfilePage logOut={logOut} id={user?._id} />
- : <AuthPage setUser={setUser} />
- )
- : <FeedPage />
- }
+ { page.prefix === 'profile' && <ProfilePage logOut={logOut} id={page.id} navigate={navigate} /> }
+ { page.prefix === 'feed' && <FeedPage navigate={navigate} /> }
+ { page.prefix === 'auth' && <AuthPage setUser={setUser} navigate={navigate}/> }
</div>
</ThemeProvider>
);
diff --git a/src/pages/AuthPage/AuthPage.tsx b/src/pages/AuthPage/AuthPage.tsx
index d9c43d3..82d468d 100644
--- a/src/pages/AuthPage/AuthPage.tsx
+++ b/src/pages/AuthPage/AuthPage.tsx
@@ -4,10 +4,11 @@ import SignInForm from './SignInForm';
interface PropTypes {
setUser: (newUser: User | undefined) => void;
+ navigate: (prefix: string, id: string) => void;
}
-const AuthPage: React.FC<PropTypes> = ({ setUser }) => {
- return <SignInForm setUser={setUser} />;
+const AuthPage: React.FC<PropTypes> = ({ setUser, navigate }) => {
+ return <SignInForm setUser={setUser} navigate={navigate} />;
};
export default AuthPage;
diff --git a/src/pages/AuthPage/SignInForm.tsx b/src/pages/AuthPage/SignInForm.tsx
index 6e27535..b7696e7 100644
--- a/src/pages/AuthPage/SignInForm.tsx
+++ b/src/pages/AuthPage/SignInForm.tsx
@@ -7,6 +7,7 @@ import { get } from '../../requests';
interface PropTypes {
setUser: (newUser: User) => void;
+ navigate: (prefix: string, id: string) => void;
}
const useStyles = makeStyles(theme => ({
@@ -22,7 +23,7 @@ const useStyles = makeStyles(theme => ({
}
}));
-const SignInForm: React.FC<PropTypes> = ({ setUser }) => {
+const SignInForm: React.FC<PropTypes> = ({ setUser, navigate }) => {
const classes = useStyles();
const inputRef = useRef<HTMLInputElement>();
@@ -33,6 +34,7 @@ const SignInForm: React.FC<PropTypes> = ({ setUser }) => {
const user = response.data[0];
setUser(user);
localStorage.setItem('userId', user._id);
+ navigate('profile', user._id);
});
}
};
diff --git a/src/pages/FeedPage/FeedPage.tsx b/src/pages/FeedPage/FeedPage.tsx
index 03bacfd..fd75190 100644
--- a/src/pages/FeedPage/FeedPage.tsx
+++ b/src/pages/FeedPage/FeedPage.tsx
@@ -3,7 +3,11 @@ import { Poll } from '../../types';
import Feed from '../../components/Feed/Feed';
import { get } from '../../requests';
-const FeedPage: React.FC = () => {
+interface PropTypes {
+ navigate: (prefix: string, id: string) => void;
+}
+
+const FeedPage: React.FC<PropTypes> = ({ navigate }) => {
const [polls, setPolls] = useState<Poll[]>([]);
useEffect(() => {
@@ -12,7 +16,7 @@ const FeedPage: React.FC = () => {
});
}, []);
- return <Feed polls={polls} />;
+ return <Feed polls={polls} navigate={navigate} />;
};
export default FeedPage;
diff --git a/src/pages/ProfilePage/ProfilePage.tsx b/src/pages/ProfilePage/ProfilePage.tsx
index 984fb1e..46637cb 100644
--- a/src/pages/ProfilePage/ProfilePage.tsx
+++ b/src/pages/ProfilePage/ProfilePage.tsx
@@ -6,10 +6,11 @@ import { get } from '../../requests';
interface PropTypes {
logOut: () => void;
+ navigate: (prefix: string, id: string) => void;
id: string;
}
-const ProfilePage: React.FC<PropTypes> = ({ logOut, id }) => {
+const ProfilePage: React.FC<PropTypes> = ({ logOut, id, navigate }) => {
const [userInfo, setUserInfo] = useState<User>();
const [polls, setPolls] = useState<Poll[]>([]);
@@ -17,19 +18,19 @@ const ProfilePage: React.FC<PropTypes> = ({ logOut, id }) => {
get(`/users/${id}`).then(response => {
setUserInfo(response.data);
});
- },[]);
+ }, [id]);
useEffect(() => {
get(`/profiles/${id}`).then(response => {
setPolls(response.data);
});
- },[]);
+ }, [id]);
return (
<>
<ProfileInfo user={userInfo} logOut={logOut} />
- <Feed polls={polls} />
+ <Feed polls={polls} navigate={navigate} />
</>
);
};
diff --git a/src/types.d.ts b/src/types.d.ts
index 31c2c74..e84f96c 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -1,8 +1,14 @@
+export interface Page {
+ prefix: string;
+ id: string;
+}
+
export interface User {
name: string;
avatarUrl: string;
_id: string;
}
+
interface ImageData {
url: string;
votes: number;
@@ -10,10 +16,7 @@ interface ImageData {
export interface Poll {
_id: string;
- author: {
- name: string;
- avatarUrl: string;
- };
+ author: User;
contents: {
left: ImageData;
right: ImageData;
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-23 18:52:34 +0000