62 |
63 |
65 |
70 |
71 |
72 | );
73 | }
74 |
75 | export default App;
76 |
--------------------------------------------------------------------------------
/frontend/src/app/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from "@reduxjs/toolkit";
2 | import userReducer from "../feature/userSlice";
3 | // import threadReducer from "../features/counter/threadSlice";
4 |
5 | export default configureStore({
6 | reducer: {
7 | user: userReducer,
8 | // thread: threadReducer,
9 | },
10 | });
11 |
--------------------------------------------------------------------------------
/frontend/src/components/AddQuestion/TagsInput.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { makeStyles } from "@material-ui/core/styles";
3 | import Chip from "@material-ui/core/Chip";
4 | import Paper from "@material-ui/core/Paper";
5 | import TagFacesIcon from "@material-ui/icons/TagFaces";
6 |
7 | const useStyles = makeStyles((theme) => ({
8 | root: {
9 | display: "flex",
10 | justifyContent: "center",
11 | flexWrap: "wrap",
12 | listStyle: "none",
13 | padding: theme.spacing(0.5),
14 | margin: 0,
15 | },
16 | chip: {
17 | margin: theme.spacing(0.5),
18 | },
19 | }));
20 |
21 | export default function ChipsArray() {
22 | const classes = useStyles();
23 | const [chipData, setChipData] = React.useState([
24 | { key: 0, label: "Angular" },
25 | { key: 1, label: "jQuery" },
26 | { key: 2, label: "Polymer" },
27 | { key: 3, label: "React" },
28 | { key: 4, label: "Vue.js" },
29 | ]);
30 |
31 | const handleDelete = (chipToDelete) => () => {
32 | setChipData((chips) =>
33 | chips.filter((chip) => chip.key !== chipToDelete.key)
34 | );
35 | };
36 |
37 | return (
38 |
100 |
170 | );
171 | }
172 |
173 | export default Index;
174 |
--------------------------------------------------------------------------------
/frontend/src/components/Auth/index.css:
--------------------------------------------------------------------------------
1 | .auth {
2 | display: flex;
3 | flex-direction: column;
4 | /* width: 100vw; */
5 | height: 90vh;
6 | padding: 30px 0;
7 | background-color: #eee;
8 | }
9 |
10 | .auth-container {
11 | display: flex;
12 | flex-direction: column;
13 | width: 100%;
14 | align-items: center;
15 | justify-content: center;
16 | }
17 |
18 | .auth-container > p {
19 | margin-bottom: 30px;
20 | font-size: 1.5rem;
21 | }
22 |
23 | .sign-options {
24 | display: flex;
25 | flex-direction: column;
26 | width: 300px;
27 | }
28 |
29 | .single-option {
30 | display: flex;
31 | padding: 9px;
32 | margin: 5px 0;
33 | border-radius: 3px;
34 | color: rgba(0, 0, 0, 0.8);
35 | background-color: #fff;
36 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
37 | 0 6px 20px 0 rgba(66, 42, 42, 0.19);
38 | cursor: pointer;
39 | transition: all 0.3s;
40 | }
41 |
42 | .single-option:hover {
43 | box-shadow: 0 4px 8px 0 #0095ff15, 0 6px 20px 0 #0095ff52;
44 | }
45 |
46 | .single-option > p {
47 | margin-left: 10px;
48 | }
49 | img {
50 | width: 20px;
51 | }
52 |
53 | .auth-login {
54 | display: flex;
55 | margin: 40px 0;
56 | width: 300px;
57 | }
58 |
59 | .auth-login-container {
60 | width: 100%;
61 | display: flex;
62 | flex-direction: column;
63 | padding: 20px;
64 | background-color: #fff;
65 | box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
66 | 0 6px 20px 0 rgba(66, 42, 42, 0.19);
67 | border-radius: 3px;
68 | }
69 |
70 | .input-field {
71 | display: flex;
72 | flex-direction: column;
73 | }
74 |
75 | .input-field > p {
76 | font-size: 1.1rem;
77 | margin: 10px 0;
78 | }
79 |
80 | .input-field > input {
81 | padding: 10px;
82 | border: 1px solid #0095ff8e;
83 | background-color: transparent;
84 | border-radius: 3px;
85 | outline: none;
86 | }
87 |
--------------------------------------------------------------------------------
/frontend/src/components/Auth/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | createUserWithEmailAndPassword,
3 | signInWithEmailAndPassword,
4 | signInWithPopup,
5 | } from "firebase/auth";
6 | import React, { useState } from "react";
7 | import { useHistory } from "react-router-dom";
8 | import { auth, provider } from "../../firebase";
9 | import "./index.css";
10 |
11 | function Index() {
12 | const history = useHistory();
13 | const [register, setRegister] = useState(false);
14 | const [email, setEmail] = useState("");
15 | const [password, setPassword] = useState("");
16 | const [username, setUsername] = useState("");
17 | const [error, setError] = useState("");
18 | const [loading, setLoading] = useState(false);
19 |
20 | function validateEmail(email) {
21 | const reg = /^([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/;
22 | if (reg.test(email) === false) {
23 | return false;
24 | } else return true;
25 | }
26 |
27 | const handleGoogleSignIN = () => {
28 | setLoading(true);
29 | signInWithPopup(auth, provider)
30 | .then((res) => {
31 | setLoading(false);
32 | // console.log(res);
33 | history.push("/");
34 | // return (
35 | // <>
36 |
37 | //
38 | // );
39 | })
40 | .catch((error) => {
41 | setLoading(false);
42 | console.log(error);
43 | });
44 | };
45 |
46 | const handleSignIn = () => {
47 | setError();
48 | setLoading(true);
49 | if (email === "" || password === "") {
50 | setError("Required field is missing");
51 | setLoading(false);
52 | } else if (!validateEmail(email)) {
53 | setError("Email is malformed");
54 | setLoading(false);
55 | } else {
56 | signInWithEmailAndPassword(auth, email, password)
57 | .then((res) => {
58 | // console.log(res);
59 | history.push("/");
60 | setLoading(false);
61 | })
62 | .catch((error) => {
63 | console.log(error.code);
64 | setError(error.message);
65 | setLoading(false);
66 | });
67 | }
68 | };
69 |
70 | const handleRegister = () => {
71 | setError("");
72 | setLoading(false);
73 | if (email === "" || password === "" || username === "") {
74 | setError("Required field is missing.");
75 | setLoading(false);
76 | } else if (!validateEmail(email)) {
77 | setError("Email is malformed");
78 | setLoading(false);
79 | } else {
80 | createUserWithEmailAndPassword(auth, email, password)
81 | .then((res) => {
82 | // console.log(res);
83 | history.push("/");
84 | setLoading(false);
85 | })
86 | .catch((error) => {
87 | console.log(error);
88 | setError(error.message);
89 | setLoading(false);
90 | });
91 | }
92 | };
93 | return (
94 |
101 |
169 |
102 |
104 | Ask a public question
103 |
105 |
164 |
165 |
168 |
106 |
163 |
107 |
121 |
108 |
120 | Title
109 | 110 | Be specific and imagine you’re asking a question to another 111 | person 112 | 113 | setTitle(e.target.value)} 116 | type="text" 117 | placeholder="e.g Is there an R function for finding teh index of an element in a vector?" 118 | /> 119 |
122 |
137 |
123 |
136 | Body
124 | 125 | Include all the information someone would need to answer your 126 | question 127 | 128 |
138 |
162 |
139 |
161 | Tags
140 | 141 | Add up to 5 tags to describe what your question is about 142 | 143 | {/* setTag(e.target.value)} 146 | data-role="tagsinput" 147 | data-tag-trigger="Space" 148 | type="text" 149 | placeholder="e.g. (asp.net-mvc php react json)" 150 | /> */} 151 | 152 |
95 |
207 | );
208 | }
209 |
210 | export default Index;
211 |
--------------------------------------------------------------------------------
/frontend/src/components/Header/css/index.css:
--------------------------------------------------------------------------------
1 | header {
2 | /* width: 100vw; */
3 | min-width: fit-content;
4 | display: flex;
5 | position: sticky;
6 | top: 0px;
7 | z-index: 1000;
8 | min-height: 5vh;
9 | }
10 | .header-container {
11 | display: flex;
12 | flex-direction: row;
13 | width: 100%;
14 | align-items: center;
15 | justify-content: space-around;
16 | /* padding: 10px 10px; */
17 | background-color: rgb(251, 250, 250);
18 |
19 | box-shadow: 0px 0.5px 8px rgba(0, 0, 0, 0.178);
20 | }
21 |
22 | .header-left {
23 | display: flex;
24 | flex-direction: row;
25 | margin: 0px 10px;
26 | align-items: center;
27 | }
28 |
29 | .header-left > a > img {
30 | width: 150px;
31 | object-fit: contain;
32 | padding: 0px 0px;
33 | }
34 |
35 | .header-left > a > img:hover {
36 | background-color: #ddd;
37 | cursor: pointer;
38 | padding: 10px 0px;
39 | }
40 |
41 | .header-left > h3 {
42 | font-weight: 400;
43 | font-size: 14px;
44 | margin: 0px 10px;
45 | padding: 5px 10px;
46 | cursor: pointer;
47 | }
48 |
49 | .header-left > h3:hover {
50 | background-color: #ddd;
51 | border-radius: 33px;
52 | }
53 |
54 | .header-middle {
55 | display: flex;
56 | flex-direction: row;
57 | align-items: center;
58 | /* padding: 0px 10px; */
59 | }
60 |
61 | .header-middle > .header-search-container {
62 | display: flex;
63 | padding: 10px 10px;
64 | margin-right: 10px;
65 | background-color: #fff;
66 | border-radius: 3px;
67 | border: 1px solid rgba(34, 34, 34, 0.233);
68 | }
69 |
70 | .header-search-container > input {
71 | border: none;
72 | width: 100%;
73 | margin-left: 5px;
74 | outline: none;
75 | }
76 |
77 | .header-search-container > .MuiSvgIcon-root {
78 | color: #ccc;
79 | }
80 |
81 | .header-right {
82 | display: flex;
83 | }
84 |
85 | .header-right > .header-right-container {
86 | display: flex;
87 | align-items: center;
88 | padding: 5px 10px;
89 | }
90 |
91 | .header-right-container > .MuiSvgIcon-root {
92 | margin: 0px 5px;
93 | color: rgba(0, 0, 0, 0.534);
94 | padding: 10px 5px;
95 | cursor: pointer;
96 | }
97 |
98 | .header-right-container > .MuiSvgIcon-root:hover {
99 | background-color: #ddd;
100 | color: #000;
101 | }
102 |
103 | .header-right-container > img {
104 | width: 20px;
105 | margin: 0 10px;
106 | cursor: pointer;
107 | }
108 |
109 | @media screen and (max-width: 768px) {
110 | .header-middle {
111 | display: none;
112 | }
113 | }
114 |
115 | @media screen and (min-width: 768px) {
116 | .header-middle {
117 | width: calc(20 * 2vw);
118 | }
119 |
120 | .header-search-container {
121 | width: 100%;
122 | }
123 | }
124 |
--------------------------------------------------------------------------------
/frontend/src/components/Header/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "./css/index.css";
3 | import SearchIcon from "@material-ui/icons/Search";
4 | import { Avatar } from "@material-ui/core";
5 | // import Avatar from "@mui/material/Avatar";
6 | import InboxIcon from "@material-ui/icons/Inbox";
7 | import HelpIcon from "@material-ui/icons/Help";
8 | import { Link } from "react-router-dom";
9 | import { auth } from "../../firebase";
10 | import { useSelector } from "react-redux";
11 | import { selectUser } from "../../feature/userSlice";
12 |
13 | function Header() {
14 | const user = useSelector(selectUser);
15 | // console.log(user);
16 | function stringToColor(string) {
17 | let hash = 0;
18 | let i;
19 |
20 | /* eslint-disable no-bitwise */
21 | for (i = 0; i < string.length; i += 1) {
22 | hash = string.charCodeAt(i) + ((hash << 5) - hash);
23 | }
24 |
25 | let color = "#";
26 |
27 | for (i = 0; i < 3; i += 1) {
28 | const value = (hash >> (i * 8)) & 0xff;
29 | color += `00${value.toString(16)}`.substr(-2);
30 | }
31 | /* eslint-enable no-bitwise */
32 |
33 | return color;
34 | }
35 |
36 | function stringAvatar(name) {
37 | return {
38 | sx: {
39 | bgcolor: name ? stringToColor(name) : "rgba(255,255,255,0.8)",
40 | },
41 | children: name && `${name.split(" ")[0][0]}${name.split(" ")[1][0]}`,
42 | };
43 | }
44 | return (
45 |
96 |
206 | Add another way to log in using any of the following services.
97 |
98 |
120 |
99 | 
103 |
105 |
103 | {loading ? "Signing in..." : "Login with Google"}
104 |
106 | 
110 |
112 |
110 | Login with Github
111 |
113 | 
117 |
119 |
117 | Login with Facebook
118 |
121 |
195 | {error !== "" && (
196 |
122 | {register ? (
123 | <>
124 | {" "}
125 |
194 |
126 |
133 | Username
127 | setUsername(e.target.value)} 130 | type="text" 131 | /> 132 |
134 | Email
135 | setEmail(e.target.value)} 138 | type="text" 139 | /> 140 |
141 |
142 |
149 |
158 |
159 | ) : (
160 | <>
161 | Password
143 | setPassword(e.target.value)} 146 | type="password" 147 | /> 148 |
162 | Email
163 | 164 |
165 |
166 |
169 |
178 |
179 | )}
180 |
181 | Password
167 | 168 |setRegister(!register)} 183 | style={{ 184 | marginTop: "10px", 185 | textAlign: "center", 186 | color: "#0095ff", 187 | textDecoration: "underline", 188 | cursor: "pointer", 189 | }} 190 | > 191 | {register ? "Login" : "Register"} ? 192 |
193 |202 | {error} 203 |
204 | )} 205 |
47 |
60 |
99 | 
53 |
54 | {/*
61 |
66 |
62 |
65 |
67 |
98 |
68 | {window.innerWidth < 768 && auth.signOut()}
76 | />
77 | 
*/}
96 |
97 | */}
96 |
17 |
77 | );
78 | }
79 |
80 | export default AllQuestions;
81 |
--------------------------------------------------------------------------------
/frontend/src/components/StackOverflow/Main.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import FilterListIcon from "@material-ui/icons/FilterList";
3 | import "./css/Main.css";
4 | import AllQuestions from "./AllQuestions";
5 | import { Link } from "react-router-dom";
6 | // import axios from "axios";
7 |
8 | function Main({ questions }) {
9 | // const [questions, setQuestions] = useState([]);
10 |
11 | // console.log(questions);
12 | return (
13 |
18 |
76 |
19 |
33 |
20 |
32 |
21 |
24 | 0
22 | votes 23 |
25 |
28 | {data?.answerDetails?.length}
26 | answers 27 |
29 | 2 views
30 |
31 |
34 | {data.title}
35 |
36 | {/* {data.title} */}
37 |
38 |
75 |
43 |
45 | {ReactHtmlParser(truncate(data.body, 200))}
44 |
50 | {tags.map((_tag) => (
51 |
63 | 59 | {_tag} 60 |
61 | ))} 62 |
64 | {data.create_at}
65 |
74 |
66 |
73 | 68 | {data?.user?.displayName 69 | ? data?.user?.displayName 70 | : "Natalie lee"} 71 |
72 |
14 |
58 | );
59 | }
60 |
61 | export default Main;
62 |
--------------------------------------------------------------------------------
/frontend/src/components/StackOverflow/Sidebar.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PublicIcon from "@material-ui/icons/Public";
3 | import StarsIcon from "@material-ui/icons/Stars";
4 | import WorkIcon from "@material-ui/icons/Work";
5 | import "./css/Sidebar.css";
6 | import { Link } from "react-router-dom";
7 |
8 | function Sidebar() {
9 | return (
10 |
15 |
57 |
16 |
25 | All Questions
17 | 18 | 19 | 20 | 21 | {/* */} 22 | 23 | {/* */} 24 |
26 |
49 | {questions.length} questions
27 | 48 |
50 | {questions?.map((_q) => (
51 |
56 |
52 |
54 | ))}
55 |
11 |
93 | );
94 | }
95 |
96 | export default Sidebar;
97 |
--------------------------------------------------------------------------------
/frontend/src/components/StackOverflow/css/AllQuestions.css:
--------------------------------------------------------------------------------
1 | .all-questions {
2 | display: flex;
3 | /* flex-direction: column; */
4 | width: 100%;
5 | padding: 20px 0px;
6 | border-bottom: 1px solid #eee;
7 | width: 100%;
8 | }
9 |
10 | .all-questions-container {
11 | display: flex;
12 | flex-direction: column;
13 | flex-direction: row;
14 | /* align-items: center; */
15 | justify-content: space-between;
16 | width: 100%;
17 | }
18 |
19 | .all-questions-left {
20 | display: flex;
21 | margin-right: 30px;
22 | }
23 |
24 | .all-options {
25 | display: flex;
26 | flex-direction: column;
27 | align-items: center;
28 | color: rgba(0, 0, 0, 0.7);
29 | font-size: small;
30 | }
31 |
32 | .all-option {
33 | display: flex;
34 | flex-direction: column;
35 | align-items: center;
36 | margin-bottom: 10px;
37 | }
38 |
39 | .all-option > p {
40 | font-size: large;
41 | }
42 |
43 | .question-answer {
44 | display: flex;
45 | flex-direction: column;
46 | width: 100%;
47 | }
48 |
49 | .question-answer > a {
50 | color: #0151f0d8;
51 | font-size: 1.1rem;
52 | margin-bottom: 10px;
53 | }
54 | .question-answer > a:hover {
55 | color: #1649b1d8;
56 | font-size: 1.1rem;
57 | margin-bottom: 10px;
58 | }
59 |
60 | .question-answer > p {
61 | font-size: 0.9rem;
62 | color: rgba(0, 0, 0, 0.7);
63 | margin-bottom: 10px;
64 | }
65 |
66 | .author {
67 | display: flex;
68 | flex-direction: column;
69 | margin-left: auto;
70 | }
71 |
72 | .author > small {
73 | color: rgba(0, 0, 0, 0.5);
74 | margin-bottom: 5px;
75 | }
76 |
77 | .auth-details {
78 | display: flex;
79 | align-items: center;
80 | }
81 |
82 | .auth-details > p {
83 | margin-left: 5px;
84 | font-size: small;
85 | color: #0151f0d8;
86 | }
87 |
88 | .comments {
89 | margin: 10px 0;
90 | width: 90%;
91 | margin-left: auto;
92 | }
93 |
94 | .comment {
95 | display: flex;
96 | flex-direction: column;
97 | font-size: 0.9rem;
98 | padding: 10px 0px;
99 | border-bottom: 1px solid #eee;
100 | border-top: 1px solid #eee;
101 | }
102 |
103 | .comment > p {
104 | margin: 10px 0;
105 | }
106 |
107 | .comment > p > span {
108 | padding: 3px;
109 | background-color: #0151f028;
110 | color: #0151f0d8;
111 | border-radius: 2px;
112 | }
113 |
114 | .comments > p {
115 | margin-left: -30px;
116 | margin-top: 20px;
117 | font-size: small;
118 | cursor: pointer;
119 | color: rgba(0, 0, 0, 0.4);
120 | }
121 |
122 | .comments > p:hover {
123 | color: #0151f0a2;
124 | }
125 |
--------------------------------------------------------------------------------
/frontend/src/components/StackOverflow/css/Main.css:
--------------------------------------------------------------------------------
1 | .main {
2 | display: flex;
3 | /* max-width: 700px; */
4 | padding: 30px 10px;
5 | flex: 0.75;
6 | flex-direction: column;
7 | }
8 |
9 | .main-container {
10 | display: flex;
11 | flex-direction: column;
12 | width: 100%;
13 | }
14 |
15 | .main-top {
16 | display: flex;
17 | width: 100%;
18 | align-items: center;
19 | justify-content: space-between;
20 | margin-bottom: 10px;
21 | }
22 |
23 | .main-top > h2 {
24 | font-weight: 400;
25 | font-size: 25px;
26 | color: rgba(0, 0, 0, 0.8);
27 | }
28 |
29 | button {
30 | padding: 10px;
31 | background-color: #0095ff;
32 | color: #fff;
33 | border: 2px solid #007cd446;
34 | outline: none;
35 | border-radius: 3px;
36 | cursor: pointer;
37 | }
38 |
39 | .main-desc {
40 | display: flex;
41 | flex-direction: row;
42 | align-items: center;
43 | font-size: 1.1rem;
44 | color: rgba(0, 0, 0, 0.8);
45 | justify-content: space-between;
46 | padding: 0px 0px 10px 0px;
47 | border-bottom: 1px solid #ddd;
48 | margin-top: 10px;
49 | }
50 |
51 | .main-filter {
52 | display: flex;
53 | align-items: center;
54 | }
55 |
56 | .main-tabs {
57 | display: flex;
58 | border: 1px solid rgba(0, 0, 0, 0.4);
59 | margin-right: 20px;
60 | border-radius: 3px;
61 | }
62 |
63 | .main-tab {
64 | padding: 5px;
65 | border-right: 1px solid rgba(0, 0, 0, 0.4);
66 | }
67 | .main-tab > a {
68 | font-size: small;
69 | }
70 |
71 | .main-filter-item {
72 | display: flex;
73 | padding: 5px;
74 | border: 1px solid #0095ff;
75 | border-radius: 3px;
76 | background-color: #00ccff17;
77 | font-size: small;
78 | align-items: center;
79 | color: #007cd4;
80 | cursor: pointer;
81 | }
82 |
83 | .questions {
84 | display: flex;
85 | flex-direction: column;
86 | width: 100%;
87 | }
88 |
89 | .question {
90 | display: flex;
91 | flex-direction: column;
92 | padding: 15px 0px;
93 | border-bottom: 1px solid #eee;
94 | width: 100%;
95 | }
96 |
97 | pre {
98 | display: flex;
99 | width: 90px;
100 | flex-wrap: wrap;
101 | }
102 |
103 | @media screen and (min-width: 768px) {
104 | .main {
105 | /* display: flex;
106 | max-width: 700px;
107 | padding: 30px 10px; */
108 | flex: 0.6;
109 | }
110 | }
111 |
--------------------------------------------------------------------------------
/frontend/src/components/StackOverflow/css/Sidebar.css:
--------------------------------------------------------------------------------
1 | .sidebar {
2 | display: flex;
3 | padding: 20px 0px 10px 10px;
4 | height: 100%;
5 | border-right: 1px solid #ddd;
6 | flex: 0.5;
7 | max-width: 200px;
8 | }
9 |
10 | .sidebar-container {
11 | margin: 10px 0;
12 | display: flex;
13 | width: 100%;
14 | }
15 |
16 | .sidebar-options {
17 | display: flex;
18 | flex-direction: column;
19 | width: 200px;
20 | }
21 |
22 | .sidebar-option {
23 | display: flex;
24 | flex-direction: column;
25 | margin: 10px 0;
26 | font-size: 14px;
27 | }
28 |
29 | a {
30 | text-decoration: none;
31 | color: rgba(0, 0, 0, 0.534);
32 | }
33 |
34 | a:hover {
35 | color: #000;
36 | }
37 |
38 | .sidebar-option > p {
39 | color: rgba(0, 0, 0, 0.534);
40 | font-size: 14px;
41 | }
42 |
43 | .link {
44 | display: flex;
45 | flex-direction: column;
46 | }
47 |
48 | .link-tag {
49 | display: flex;
50 | align-items: center;
51 | padding: 5px 0;
52 | width: 100%;
53 | }
54 |
55 | .link-tag:hover {
56 | border-right: 5px solid rgb(245, 162, 9);
57 | }
58 |
59 | .link-tag > .MuiSvgIcon-root {
60 | font-size: 18px;
61 | margin-right: 5px;
62 | color: rgb(245, 162, 9);
63 | }
64 |
65 | .tags {
66 | display: flex;
67 | flex-direction: column;
68 | color: rgba(0, 0, 0, 0.534);
69 | margin: 0px 20px;
70 | }
71 |
72 | .tags > p {
73 | margin: 5px 0;
74 | cursor: pointer;
75 | }
76 |
77 | .tags > p:hover {
78 | color: #000;
79 | }
80 |
--------------------------------------------------------------------------------
/frontend/src/components/StackOverflow/css/index.css:
--------------------------------------------------------------------------------
1 | .stack-index {
2 | min-width: fit-content;
3 | display: flex;
4 |
5 | min-height: 85vh;
6 | }
7 |
8 | .stack-index-content {
9 | display: flex;
10 | width: 100%;
11 | /* align-items: center; */
12 | justify-content: center;
13 | }
14 |
--------------------------------------------------------------------------------
/frontend/src/components/StackOverflow/index.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import Sidebar from "./Sidebar";
3 | import "./css/index.css";
4 | import Main from "./Main";
5 | import axios from "axios";
6 |
7 | function Index() {
8 | const [questions, setQuestions] = useState([]);
9 |
10 | useEffect(() => {
11 | async function getQuestion() {
12 | await axios.get("/api/question").then((res) => {
13 | setQuestions(res.data.reverse());
14 | // console.log(res.data)
15 | });
16 | }
17 | getQuestion();
18 | }, []);
19 | return (
20 |
12 |
92 |
13 |
91 |
14 | Home
15 |
16 | {/* Home */}
17 |
18 |
19 |
34 | PUBLIC
20 |
21 |
33 |
22 |
27 |
28 |
29 |
32 | Tags
30 |Users
31 |
35 |
45 | COLLECTIVES
36 |
37 |
44 |
38 |
43 |
46 |
82 | FIND A JOB
47 |
48 |
54 | Jobs
55 |
56 | {/*
62 | Jobs
63 | */}
64 | {/*
70 | Companies
71 | */}
72 |
78 | Companies
79 |
80 |
81 |
83 |
90 | TEAMS
84 |
85 |
89 |
21 |
26 | );
27 | }
28 |
29 | export default Index;
30 |
--------------------------------------------------------------------------------
/frontend/src/components/ViewQuestion/MainQuestion.js:
--------------------------------------------------------------------------------
1 | import { Avatar } from "@material-ui/core";
2 | import React, { useEffect, useState } from "react";
3 | import BookmarkIcon from "@material-ui/icons/Bookmark";
4 | import HistoryIcon from "@material-ui/icons/History";
5 | import ReactQuill from "react-quill";
6 | import Editor from "react-quill/lib/toolbar";
7 | import axios from "axios";
8 | import ReactHtmlParser from "react-html-parser";
9 | import { Link } from "react-router-dom";
10 | import "./index.css";
11 | import { useSelector } from "react-redux";
12 | import { selectUser } from "../../feature/userSlice";
13 | import { stringAvatar } from "../../utils/Avatar";
14 |
15 | function MainQuestion() {
16 | var toolbarOptions = [
17 | ["bold", "italic", "underline", "strike"], // toggled buttons
18 | ["blockquote", "code-block"],
19 |
20 | [{ header: 1 }, { header: 2 }], // custom button values
21 | [{ list: "ordered" }, { list: "bullet" }],
22 | [{ script: "sub" }, { script: "super" }], // superscript/subscript
23 | [{ indent: "-1" }, { indent: "+1" }], // outdent/indent
24 | [{ direction: "rtl" }], // text direction
25 |
26 | // [{ size: ["small", false, "large", "huge"] }], // custom dropdown
27 | [{ header: [1, 2, 3, 4, 5, 6, false] }],
28 |
29 | [
30 | { color: ["#ff0000", "#00ff00", "#0000ff", "#220055"] },
31 | { background: [] },
32 | ], // dropdown with defaults from theme
33 | [{ font: [] }],
34 | [{ align: [] }],
35 |
36 | ["clean"], // remove formatting button
37 | ];
38 | Editor.modules = {
39 | syntax: false,
40 | toolbar: toolbarOptions,
41 | clipboard: {
42 | // toggle to add extra line breaks when pasting HTML:
43 | matchVisual: false,
44 | },
45 | };
46 | /*
47 | * Quill editor formats
48 | * See https://quilljs.com/docs/formats/
49 | */
50 | Editor.formats = [
51 | "header",
52 | "font",
53 | "size",
54 | "bold",
55 | "italic",
56 | "underline",
57 | "strike",
58 | "blockquote",
59 | "list",
60 | "bullet",
61 | "indent",
62 | "link",
63 | "image",
64 | "video",
65 | ];
66 |
67 | let search = window.location.search;
68 | const params = new URLSearchParams(search);
69 | const id = params.get("q");
70 |
71 | const [questionData, setQuestionData] = useState();
72 | const [answer, setAnswer] = useState("");
73 | const [show, setShow] = useState(false);
74 | const [comment, setComment] = useState("");
75 | // const [comments, setComments] = useState([]);
76 | const user = useSelector(selectUser);
77 |
78 | const handleQuill = (value) => {
79 | setAnswer(value);
80 | };
81 |
82 | useEffect(() => {
83 | async function getFunctionDetails() {
84 | await axios
85 | .get(`/api/question/${id}`)
86 | .then((res) => setQuestionData(res.data[0]))
87 | .catch((err) => console.log(err));
88 | }
89 | getFunctionDetails();
90 | }, [id]);
91 |
92 | async function getUpdatedAnswer() {
93 | await axios
94 | .get(`/api/question/${id}`)
95 | .then((res) => setQuestionData(res.data[0]))
96 | .catch((err) => console.log(err));
97 | }
98 |
99 | // console.log(questionData);
100 | const handleSubmit = async () => {
101 | const body = {
102 | question_id: id,
103 | answer: answer,
104 | user: user,
105 | };
106 | const config = {
107 | headers: {
108 | "Content-Type": "application/json",
109 | },
110 | };
111 |
112 | await axios
113 | .post("/api/answer", body, config)
114 | .then(() => {
115 | alert("Answer added successfully");
116 | setAnswer("");
117 | getUpdatedAnswer();
118 | })
119 | .catch((err) => console.log(err));
120 | };
121 |
122 | const handleComment = async () => {
123 | if (comment !== "") {
124 | const body = {
125 | question_id: id,
126 | comment: comment,
127 | user: user,
128 | };
129 | await axios.post(`/api/comment/${id}`, body).then((res) => {
130 | setComment("");
131 | setShow(false);
132 | getUpdatedAnswer();
133 | // console.log(res.data);
134 | });
135 | }
136 |
137 | // setShow(true)
138 | };
139 | return (
140 |
22 |
25 |
141 |
142 |
143 |
151 | {questionData?.title}
144 | 145 | 146 | 147 | {/* 148 | 149 | */} 150 |
152 |
165 |
153 |
164 | 154 | Asked 155 | {new Date(questionData?.created_at).toLocaleString()} 156 |
157 |158 | Activetoday 159 |
160 |161 | Viewed43times 162 |
163 |
166 |
167 |
168 |
180 |
169 |
179 | ▲
170 | 171 |0
172 | 173 |▼
174 | 175 |
181 |
{ReactHtmlParser(questionData?.body)}
182 | 183 |
184 |
185 | asked {new Date(questionData?.created_at).toLocaleString()}
186 |
187 |
196 |
188 |
195 | 190 | {questionData?.user?.displayName 191 | ? questionData?.user?.displayName 192 | : "Natalia lee"} 193 |
194 |
197 |
198 | {questionData?.comments &&
199 | questionData?.comments.map((_qd) => (
200 |
212 | 201 | {_qd.comment}{" "} 202 | 203 | - {_qd.user ? _qd.user.displayName : "Nate Eldredge"} 204 | {" "} 205 | {" "} 206 | 207 | {new Date(_qd.created_at).toLocaleString()} 208 | 209 |
210 | ))} 211 |setShow(!show)}>Add a comment
213 | {show && ( 214 |
215 |