-
+
+
+
+ } />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
);
}
diff --git a/twitter-clone/src/Constants.ts b/twitter-clone/src/Constants.ts
new file mode 100644
index 00000000..999344cb
--- /dev/null
+++ b/twitter-clone/src/Constants.ts
@@ -0,0 +1,9 @@
+//App Urls
+export const homeUrl: string = "/";
+export const loginUrl: string = "/login";
+export const signUpUrl: string = "/signup";
+
+//API Routes
+export const apiRoute: string = "http://localhost:3001/";
+export const usersRoute: string = apiRoute + "users";
+export const tweetsUrl: string = apiRoute + "tweets";
diff --git a/twitter-clone/src/components/NavBar.tsx b/twitter-clone/src/components/NavBar.tsx
new file mode 100644
index 00000000..c396d7e6
--- /dev/null
+++ b/twitter-clone/src/components/NavBar.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { User } from "../redux/User";
+import { NavBarUser } from "./NavBarUser";
+import AppBar from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Toolbar from "@mui/material/Toolbar";
+import logo from "../logo/duck.png";
+import { homeUrl } from "../Constants";
+import { Link } from "react-router-dom";
+
+export default function NavBar() {
+ const user: User = useSelector((state: any) => state.user);
+
+ return (
+
+
+
+
+ 
+
+
+ Another Twitter Clone
+
+
+
+ );
+}
diff --git a/twitter-clone/src/components/NavBarUser.tsx b/twitter-clone/src/components/NavBarUser.tsx
new file mode 100644
index 00000000..641fa682
--- /dev/null
+++ b/twitter-clone/src/components/NavBarUser.tsx
@@ -0,0 +1,102 @@
+import React from "react";
+import Avatar from "react-avatar";
+import { unsetUser, User } from "../redux/User";
+import * as paths from "../Constants";
+import { useNavigate } from "react-router-dom";
+import Divider from "@mui/material/Divider";
+import Stack from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import { useDispatch } from "react-redux";
+
+export interface NavBarUserProps {
+ user: User;
+}
+
+export function NavBarUser(props: NavBarUserProps) {
+ const navigate = useNavigate();
+ const dispatch = useDispatch();
+ const [anchorElUser, setAnchorElUser] = React.useState
(
+ null
+ );
+
+ const navigateToLogin = () => {
+ navigate(paths.loginUrl);
+ };
+
+ const navigateToSignup = () => {
+ navigate(paths.signUpUrl);
+ };
+
+ function handleOpenUserMenu(event: React.SyntheticEvent) {
+ setAnchorElUser(event.currentTarget);
+ }
+
+ function handleCloseUserMenu() {
+ setAnchorElUser(null);
+ }
+
+ function handleLogOut() {
+ dispatch(unsetUser());
+ handleCloseUserMenu();
+ navigateToLogin();
+ }
+
+ if (props.user.loggedIn) {
+ return (
+
+ {props.user.name}
+
+
+
+ );
+ } else {
+ return (
+ }
+ >
+
+
+
+ );
+ }
+}
diff --git a/twitter-clone/src/index.tsx b/twitter-clone/src/index.tsx
index ef2edf8e..a105f0c6 100644
--- a/twitter-clone/src/index.tsx
+++ b/twitter-clone/src/index.tsx
@@ -1,14 +1,21 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import "./index.css";
+import App from "./App";
+import { BrowserRouter as Router } from "react-router-dom";
+import { Provider } from "react-redux";
+import reportWebVitals from "./reportWebVitals";
+import { store } from "./redux/Store";
ReactDOM.render(
-
+
+
+
+
+
,
- document.getElementById('root')
+ document.getElementById("root")
);
// If you want to start measuring performance in your app, pass a function
diff --git a/twitter-clone/src/logo.svg b/twitter-clone/src/logo.svg
deleted file mode 100644
index 9dfc1c05..00000000
--- a/twitter-clone/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/twitter-clone/src/logo/duck.png b/twitter-clone/src/logo/duck.png
new file mode 100644
index 00000000..f6492f21
Binary files /dev/null and b/twitter-clone/src/logo/duck.png differ
diff --git a/twitter-clone/src/pages/home/Home.tsx b/twitter-clone/src/pages/home/Home.tsx
new file mode 100644
index 00000000..9420d5f1
--- /dev/null
+++ b/twitter-clone/src/pages/home/Home.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import GetTweets from "../../util/GetTweets";
+import TweetInput from "./components/TweetInput";
+import TweetsFeed from "./components/TweetsFeed";
+import Container from "@mui/material/Container";
+
+export default function Home() {
+ GetTweets();
+
+ return (
+
+
+
+
+ );
+}
diff --git a/twitter-clone/src/pages/home/components/TweetContainer.tsx b/twitter-clone/src/pages/home/components/TweetContainer.tsx
new file mode 100644
index 00000000..c42c1cbe
--- /dev/null
+++ b/twitter-clone/src/pages/home/components/TweetContainer.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { Tweet } from "../../../redux/Tweets";
+import Avatar from "react-avatar";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Stack from "@mui/material/Stack";
+
+export default function TweetContainer({ author_id, text }: Tweet) {
+ return (
+
+
+
+
+
+
+
+
+ {author_id}
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/twitter-clone/src/pages/home/components/TweetInput.tsx b/twitter-clone/src/pages/home/components/TweetInput.tsx
new file mode 100644
index 00000000..f8a409b1
--- /dev/null
+++ b/twitter-clone/src/pages/home/components/TweetInput.tsx
@@ -0,0 +1,100 @@
+import React from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+import axios from "axios";
+import { tweetsUrl } from "../../../Constants";
+import DOMPurify from "isomorphic-dompurify";
+import { setTweets } from "../../../redux/Tweets";
+import { User } from "../../../redux/User";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import Stack from "@mui/material/Stack";
+import Button from "@mui/material/Button";
+
+export default function TweetInput() {
+ const user: User = useSelector((state: any) => state.user);
+ const dispatch = useDispatch();
+
+ const TweetSchema = Yup.object().shape({
+ tweet: Yup.string()
+ .max(140, "Keep this tweet 140 characters maximum.")
+ .required("Write at least 1 character."),
+ });
+
+ const formik = useFormik({
+ initialValues: { tweet: "" },
+ validationSchema: TweetSchema,
+ onSubmit: (values, actions) => {
+ actions.setSubmitting(true);
+ axios
+ .post(tweetsUrl, {
+ author_id: user.id,
+ text: DOMPurify.sanitize(values.tweet),
+ })
+ .then((response) => {
+ if (response.status === 201 && response.data) {
+ axios
+ .get(tweetsUrl)
+ .then((response) => {
+ dispatch(setTweets(response.data ?? []));
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ }
+ })
+ .catch((error) => {
+ console.error(error);
+ })
+ .finally(() => {
+ actions.setSubmitting(false);
+ actions.resetForm();
+ });
+ },
+ });
+
+ return (
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/twitter-clone/src/pages/home/components/TweetsFeed.tsx b/twitter-clone/src/pages/home/components/TweetsFeed.tsx
new file mode 100644
index 00000000..5a821da9
--- /dev/null
+++ b/twitter-clone/src/pages/home/components/TweetsFeed.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import TweetContainer from "./TweetContainer";
+import { Tweet } from "../../../redux/Tweets";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Skeleton from "@mui/material/Skeleton";
+
+export default function TweetsFeed() {
+ const tweets: Tweet[] = useSelector((state: any) => state.tweets);
+
+ return (
+
+
+ {tweets.length > 0 ? (
+ tweets.map((tweet: Tweet) => (
+
+ ))
+ ) : (
+
+
+
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/twitter-clone/src/pages/login/Login.tsx b/twitter-clone/src/pages/login/Login.tsx
new file mode 100644
index 00000000..b486bb18
--- /dev/null
+++ b/twitter-clone/src/pages/login/Login.tsx
@@ -0,0 +1,143 @@
+import React from "react";
+import axios from "axios";
+import { useDispatch } from "react-redux";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+import { usersRoute, homeUrl, signUpUrl } from "../../Constants";
+import { setUser } from "../../redux/User";
+import { Link, useNavigate } from "react-router-dom";
+import Button from "@mui/material/Button";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Container from "@mui/material/Container";
+import Grid from "@mui/material/Grid";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+
+export default function Login() {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const [userMessage, setUserMessage] = React.useState("");
+
+ const LoginSchema = Yup.object().shape({
+ username: Yup.string().required("Username is required"),
+ password: Yup.string().required("Password is required"),
+ });
+
+ const formik = useFormik({
+ initialValues: { username: "", password: "" },
+ validationSchema: LoginSchema,
+ onSubmit: (values, actions) => {
+ actions.setSubmitting(true);
+ axios
+ .get(usersRoute + "/" + values.username)
+ .then((response) => {
+ if (
+ response.status === 200 &&
+ response.data?.id === values.username &&
+ response.data?.password === values.password
+ ) {
+ dispatch(
+ setUser({
+ id: response.data.id,
+ name: response.data.name,
+ loggedIn: true,
+ })
+ );
+ navigate(homeUrl);
+ } else {
+ actions.setSubmitting(false);
+ setUserMessage("Invalid email or password");
+ }
+ })
+ .catch((error) => {
+ actions.setSubmitting(false);
+ console.error(error);
+ setUserMessage("Something went wrong");
+ });
+ },
+ });
+
+ return (
+
+
+ Log in
+
+
+
+
+
+
+ {userMessage.length > 0 ? (
+
+ {userMessage}
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+ Don’t have an account? Sign up
+
+
+ );
+}
diff --git a/twitter-clone/src/pages/sign-up/SignUp.tsx b/twitter-clone/src/pages/sign-up/SignUp.tsx
new file mode 100644
index 00000000..98d2ad65
--- /dev/null
+++ b/twitter-clone/src/pages/sign-up/SignUp.tsx
@@ -0,0 +1,180 @@
+import React from "react";
+import axios from "axios";
+import { useDispatch } from "react-redux";
+import { useFormik } from "formik";
+import * as Yup from "yup";
+import { homeUrl, loginUrl, usersRoute } from "../../Constants";
+import { setUser } from "../../redux/User";
+import { Link, useNavigate } from "react-router-dom";
+import * as EmailValidator from "email-validator";
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Container from "@mui/material/Container";
+import Grid from "@mui/material/Grid";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+
+export default function SignUp() {
+ const dispatch = useDispatch();
+ const navigate = useNavigate();
+ const [userMessage, setUserMessage] = React.useState("");
+
+ const LoginSchema = Yup.object().shape({
+ email: Yup.string()
+ .test("email", "Incorrect email format", (email) =>
+ email ? EmailValidator.validate(email) : false
+ )
+ .required("Email is required"),
+ password: Yup.string()
+ .min(8, "Must be at least 8 characters long")
+ .max(512, "Must be at most 512 characters long")
+ .required("Password is required"),
+ username: Yup.string().required("Username is required"),
+ fullName: Yup.string()
+ .max(512, "Must be at most 512 characters long")
+ .required("Full name is required"),
+ });
+
+ const formik = useFormik({
+ initialValues: { email: "", password: "", username: "", fullName: "" },
+ validationSchema: LoginSchema,
+ onSubmit: (values, actions) => {
+ actions.setSubmitting(true);
+ axios
+ .post(usersRoute, {
+ id: values.username,
+ name: values.fullName,
+ email: values.email,
+ password: values.password,
+ })
+ .then((response) => {
+ if (response.status === 201) {
+ dispatch(
+ setUser({
+ id: response.data.id,
+ name: response.data.name,
+ loggedIn: true,
+ })
+ );
+ navigate(homeUrl);
+ } else {
+ actions.setSubmitting(false);
+ setUserMessage("Something went wrong");
+ }
+ })
+ .catch((error) => {
+ actions.setSubmitting(false);
+ console.error(error);
+ setUserMessage("Something went wrong");
+ });
+ },
+ });
+
+ return (
+
+
+ Sign up
+
+
+
+
+
+
+
+
+ {userMessage.length > 0 ? (
+
+ {userMessage}
+
+ ) : null}
+
+
+
+
+
+
+
+
+
+ Already have an account? Log in
+
+
+ );
+}
diff --git a/twitter-clone/src/redux/Store.ts b/twitter-clone/src/redux/Store.ts
new file mode 100644
index 00000000..9f3cda6d
--- /dev/null
+++ b/twitter-clone/src/redux/Store.ts
@@ -0,0 +1,15 @@
+import { configureStore } from "@reduxjs/toolkit";
+import userReducer from "./User";
+import tweetsReducer from "./Tweets";
+
+export const store = configureStore({
+ reducer: {
+ user: userReducer,
+ tweets: tweetsReducer,
+ },
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType;
+// Inferred type: {users: User, tweets: TweetContainer[]}
+export type AppDispatch = typeof store.dispatch;
diff --git a/twitter-clone/src/redux/Tweets.ts b/twitter-clone/src/redux/Tweets.ts
new file mode 100644
index 00000000..e7d9e52b
--- /dev/null
+++ b/twitter-clone/src/redux/Tweets.ts
@@ -0,0 +1,24 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface Tweet {
+ id: string;
+ author_id: string;
+ text: string;
+}
+
+const initialState: Tweet[] = [];
+
+export const tweetsSlice = createSlice({
+ name: "tweets",
+ initialState,
+ reducers: {
+ setTweets: (state, action: PayloadAction) => {
+ state = action.payload;
+ return state;
+ },
+ },
+});
+
+export const { setTweets } = tweetsSlice.actions;
+
+export default tweetsSlice.reducer;
diff --git a/twitter-clone/src/redux/User.ts b/twitter-clone/src/redux/User.ts
new file mode 100644
index 00000000..1b1524f9
--- /dev/null
+++ b/twitter-clone/src/redux/User.ts
@@ -0,0 +1,32 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+export interface User {
+ id: string;
+ name: string;
+ loggedIn: boolean;
+}
+
+const initialState: User = {
+ id: "",
+ name: "",
+ loggedIn: false,
+};
+
+export const userSlice = createSlice({
+ name: "user",
+ initialState,
+ reducers: {
+ setUser: (state, action: PayloadAction) => {
+ state = action.payload;
+ return state;
+ },
+ unsetUser: (state) => {
+ state = initialState;
+ return state;
+ },
+ },
+});
+
+export const { setUser, unsetUser } = userSlice.actions;
+
+export default userSlice.reducer;
diff --git a/twitter-clone/src/util/GetTweets.tsx b/twitter-clone/src/util/GetTweets.tsx
new file mode 100644
index 00000000..d6edc353
--- /dev/null
+++ b/twitter-clone/src/util/GetTweets.tsx
@@ -0,0 +1,18 @@
+import axios from "axios";
+import { useDispatch } from "react-redux";
+import { tweetsUrl } from "../Constants";
+import { setTweets } from "../redux/Tweets";
+
+export default function GetTweets(userId: string = "") {
+ const dispatch = useDispatch();
+ const searchString = userId ? "?id=" + userId : "";
+
+ axios
+ .get(tweetsUrl + searchString)
+ .then((response) => {
+ dispatch(setTweets(response.data ?? []));
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+}
diff --git a/twitter-clone/src/util/HomeRedirectWrapper.tsx b/twitter-clone/src/util/HomeRedirectWrapper.tsx
new file mode 100644
index 00000000..4106d4fa
--- /dev/null
+++ b/twitter-clone/src/util/HomeRedirectWrapper.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { Navigate } from "react-router-dom";
+import { homeUrl } from "../Constants";
+
+/**
+ * Wrapper that redirects directly to the home page if user is logged in
+ * @param children the children component to be used if auth is false
+ */
+const HomeRedirectWrapper = ({ children }: { children: JSX.Element }) => {
+ const auth = useSelector((state: any) => state.user.loggedIn);
+
+ return auth ? : children;
+};
+
+export default HomeRedirectWrapper;