Feat[front]: Add new post page UI

Issue #3
emranprojects · Aug 12, 2022 · 78cfb05 · 78cfb05
1 parent 4fb7176
commit 78cfb05
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 33 deletions.
diff --git a/frontend/src/appPaths.js b/frontend/src/appPaths.js
@@ -4,6 +4,7 @@ const appPaths = {
     userProfile: (userId) => `/u/${userId}`,
     userSearch: "/user-search",
     friendRequests: "/friend-requests",
+    newPost: "/new-post",
 }
 
 export default appPaths
diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -1,33 +1,34 @@
-import React, {useState} from 'react';
-import ReactDOM from 'react-dom/client';
+import React, {useState} from 'react'
+import ReactDOM from 'react-dom/client'
 
-import 'bootstrap/scss/bootstrap.scss'; // Bootstrap should be imported before index.scss to not rollback overrides
-import './index.scss';
+import 'bootstrap/scss/bootstrap.scss' // Bootstrap should be imported before index.scss to not rollback overrides
+import './index.scss'
 
-import 'react-toastify/dist/ReactToastify.css';
-import * as serviceWorkerRegistration from './serviceWorkerRegistration';
-import reportWebVitals from './reportWebVitals';
-import Timeline from "./pages/Timeline";
-import Navbar from "./components/Navbar";
-import LoginContext from "./components/LoginContext";
-import loginUtils from "./utils/loginUtils";
-import {ToastContainer} from 'react-toastify';
-import {BrowserRouter, Route, Routes} from "react-router-dom";
-import Login from "./pages/Login";
-import appPaths from "./appPaths";
-import LandingPage from "./pages/LandingPage";
-import UserProfile from "./pages/UserProfile";
-import UserSearch from "./pages/UserSearch";
+import 'react-toastify/dist/ReactToastify.css'
+import * as serviceWorkerRegistration from './serviceWorkerRegistration'
+import reportWebVitals from './reportWebVitals'
+import Timeline from "./pages/Timeline"
+import Navbar from "./components/Navbar"
+import LoginContext from "./components/LoginContext"
+import loginUtils from "./utils/loginUtils"
+import {ToastContainer} from 'react-toastify'
+import {BrowserRouter, Route, Routes} from "react-router-dom"
+import Login from "./pages/Login"
+import appPaths from "./appPaths"
+import LandingPage from "./pages/LandingPage"
+import UserProfile from "./pages/UserProfile"
+import UserSearch from "./pages/UserSearch"
 import Drawer from "./components/Drawer"
 import FriendRequests from "./pages/FriendRequests"
+import Post from "./pages/Post"
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(
     <React.StrictMode>
         <Root/>
         <ToastContainer rtl={true} position="bottom-left"/>
-    </React.StrictMode>
-);
+    </React.StrictMode>,
+)
 
 function Root() {
     const [isLoggedIn, setIsLoggedIn] = useState(loginUtils.isLoggedIn())
@@ -44,6 +45,7 @@ function Root() {
                 <Route path={appPaths.userProfile(":userId")} element={<UserProfile/>}/>
                 <Route path={appPaths.userSearch} element={<UserSearch/>}/>
                 <Route path={appPaths.friendRequests} element={<FriendRequests/>}/>
+                <Route path={appPaths.newPost} element={<Post/>}/>
             </Routes>
         </BrowserRouter>
     </LoginContext.Provider>
@@ -52,9 +54,9 @@ function Root() {
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://cra.link/PWA
-serviceWorkerRegistration.unregister();
+serviceWorkerRegistration.unregister()
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+reportWebVitals()
diff --git a/frontend/src/pages/Post.js b/frontend/src/pages/Post.js
@@ -0,0 +1,40 @@
+import Container from "react-bootstrap/Container"
+import Row from "react-bootstrap/Row"
+import Card from "react-bootstrap/Card"
+import Form from "react-bootstrap/Form"
+import Button from "react-bootstrap/Button"
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
+import {faImage} from "@fortawesome/free-solid-svg-icons/faImage"
+
+export default function () {
+    return (
+        <Container>
+            <Row className="mb-5"/>
+            <Row>
+                <Card>
+                    <Card.Header><h4>ایجاد پست جدید</h4></Card.Header>
+                    <Card.Body>
+                        <Form>
+                            <Form.Group className="mb-3">
+                                <Form.Label>عنوان</Form.Label>
+                                <Form.Control type="text"/>
+                            </Form.Group>
+                            <Form.Group className="mb-3">
+                                <Form.Label>توضیحات</Form.Label>
+                                <Form.Control type="text" as="textarea" rows={3}/>
+                            </Form.Group>
+                            <Form.Group className="mb-3">
+                                <Button variant="outline-primary"><FontAwesomeIcon icon={faImage}/> افزودن عکس</Button>
+                            </Form.Group>
+                        </Form>
+                    </Card.Body>
+                    <Card.Footer>
+                        <Row>
+                            <Button>ذخیره</Button>
+                        </Row>
+                    </Card.Footer>
+                </Card>
+            </Row>
+        </Container>
+    )
+}
diff --git a/frontend/src/pages/UserProfile.js b/frontend/src/pages/UserProfile.js
@@ -100,32 +100,34 @@ export default function () {
                     <Row><h4>{user.first_name} {user.last_name}</h4></Row>
                     <Row><span>{friends.length} دوست</span></Row>
                     <Row><span>{posts.length} پست</span></Row>
-                    {isSelf || isFriend ? "" :
-                        <Row className="mt-3">
-                            <Col>
+                    <Row className="mt-3">
+                        <Col>
+                            {isSelf || isFriend ? "" :
                                 <abbr title={hasPendingFriendRequest ? "درخواست قبلا ارسال شده است" : ""}>
                                     <Button onClick={friendRequestBtnClicked}
                                             disabled={hasPendingFriendRequest}>درخواست دوستی</Button>
                                 </abbr>
-                            </Col>
-                        </Row>
-                    }
-                    {isFriend &&
-                    <Row className="mt-3">
-                        <Col>
+                            }
+                            {isFriend &&
                             <Button variant="outline-danger" className="shadow-none"
                                     onClick={unfriendBtnClicked}
                                     disabled={hasPendingFriendRequest}>حذف دوستی</Button>
+                            }
                         </Col>
                     </Row>
-                    }
                 </Col>
             </Row>
             <h3>دوستان</h3>
+            {isSelf &&
+            <a className="mb-2 btn btn-outline-primary" href={appPaths.friendRequests}>مشاهده درخواست‌های دوستی</a>
+            }
             <Row className="mb-5">
                 <UsersList users={friends}/>
             </Row>
             <h3>پست‌ها</h3>
+            {isSelf &&
+            <a className="mb-2 btn btn-outline-primary" href={appPaths.newPost}>ایجاد پست جدید</a>
+            }
             <Row>
                 <ProductsList posts={posts}/>
             </Row>