create source page

src/App.tsx

@@ -10,7 +10,6 @@ import "./assets/styles/style.scss";
 // Types
 import { PostType } from "./types/posts";
 import { SourceType } from "./types/sources";
-import { LinksAll } from "./types/links";
 
 // Pages
 import Login from "./pages/Login";
@@ -21,6 +20,7 @@ import Details from "./pages/Details";
 import Post from "./pages/Post";
 import Source from "./pages/Source";
 import EditSource from "./pages/EditSource";
+import CreateSource from "./pages/CreateSource";
 
 // Helpers
 import { getLinks } from "./helpers/apiRequests";
@@ -28,18 +28,7 @@ import { getLinks } from "./helpers/apiRequests";
 const App = () => {
   const navigate = useNavigate();
   const date = new Date("0.0.0000");
-  const [posts, setPosts] = useState<PostType[]>([
-    {
-      id: -1,
-      category: "",
-      title: "",
-      link: "",
-      publish_date: date,
-      summary: "",
-      createdAt: date,
-      updatedAt: date,
-    },
-  ]);
+  const [posts, setPosts] = useState<PostType[]>();
 
   const [sources, setSources] = useState<SourceType[]>();
 
@@ -89,6 +78,10 @@ const App = () => {
               element={<Main child={<EditSource />} />}
             />
             <Route path="/posts/:id" element={<Main child={<Post />} />} />
+            <Route
+              path="/source/create"
+              element={<Main child={<CreateSource />} />}
+            />
 
             <Route
               path="/user_details"

src/assets/styles/_details.scss

@@ -22,8 +22,8 @@
     }
 
     input {
-      padding: 0.7rem 1rem;
-      border: 0.1rem solid #cccccc;
+      font-size: 1.6rem;
+      padding: 1rem 1.2rem;
       border-radius: 0.5rem;
     }
   }

src/assets/styles/_source.scss

@@ -155,3 +155,43 @@
     }
   }
 }
+
+.source {
+  &__link {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    max-width: 30rem;
+    font-size: 1.6rem;
+    border-radius: 0.5rem;
+    background: $base-blue;
+    padding: 1rem 2rem;
+    @include transition-std;
+    text-align: center;
+
+    &:hover {
+      background: $hover-blue;
+      @include transition-std;
+    }
+  }
+
+  &__head {
+    svg {
+      width: 4rem;
+      height: 4rem;
+    }
+  }
+
+  &__create {
+    &.inner {
+      display: flex;
+      flex-direction: column;
+      gap: 4rem;
+    }
+    &__block {
+      display: flex;
+      flex-direction: column;
+      gap: 4rem;
+    }
+  }
+}

src/pages/CreateSource.tsx

@@ -0,0 +1,82 @@
+// Modules
+import { useContext, useEffect, useState } from "react";
+import { IconContext } from "react-icons";
+import { useNavigate } from "react-router-dom";
+import { ContextType } from "../types/context";
+import { PostContext } from "../context/PostContext";
+
+// Icons
+import { FaRegPlusSquare } from "react-icons/fa";
+
+// Helpers
+import { createLink, getLinks } from "../helpers/apiRequests";
+import { SourceEditDataType } from "../types/sources";
+
+const CreateSource = () => {
+  const { setSources } = useContext<ContextType>(PostContext).sourceValue;
+  const navigate = useNavigate();
+  const [data, setData] = useState<SourceEditDataType>({
+    name: "",
+    source: "",
+  });
+  return (
+    <main className="source__create">
+      <div className="container">
+        <div className="source__create inner">
+          <div className="dashboard__head source__head">
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <FaRegPlusSquare />
+            </IconContext.Provider>
+            <h1>Source</h1>
+          </div>
+
+          <form
+            onSubmit={(e: React.FormEvent<HTMLFormElement>) =>
+              e.preventDefault()
+            }
+            className="source__create__block"
+          >
+            <div className="source-edit__input">
+              <label htmlFor="name">Source name</label>
+              <input
+                placeholder="Enter name"
+                type="text"
+                id="name"
+                value={data.name}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setData({ ...data, name: e.target.value });
+                }}
+              />
+            </div>
+            <div className="source-edit__input">
+              <label htmlFor="source">Source link</label>
+              <input
+                placeholder="Enter link"
+                type="text"
+                id="source"
+                value={data.source}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  setData({ ...data, source: e.target.value });
+                }}
+              />
+            </div>
+            <button
+              className="source-edit__submit"
+              onClick={() => {
+                createLink(() => {}, data);
+                setTimeout(() => {
+                  navigate("/source");
+                  getLinks(setSources);
+                }, 2000);
+              }}
+            >
+              Create new source
+            </button>
+          </form>
+        </div>
+      </div>
+    </main>
+  );
+};
+
+export default CreateSource;

src/pages/Details.tsx

@@ -1,9 +1,10 @@
 // Modules
 import React, { useContext, useState, useEffect } from "react";
 import { UserContext } from "../context/UserContext";
+import { IconContext } from "react-icons";
 
 // Icons
-import { CgDetailsLess } from "react-icons/cg";
+import { FaAlignLeft } from "react-icons/fa";
 import { userContextType } from "../types/user";
 
 const Details = () => {
@@ -14,7 +15,10 @@ const Details = () => {
       <div className="container">
         <div className="details inner">
           <div className="dashboard__head">
-            <CgDetailsLess className="dashboard__img" />
+            <IconContext.Provider value={{ color: "#8DD77F" }}>
+              <FaAlignLeft className="dashboard__img" />
+            </IconContext.Provider>
+
             <h1>Details</h1>
           </div>
           <div className="details__content">

src/pages/Posts.tsx

@@ -227,7 +227,7 @@ const Posts = () => {
             </thead>
             <tbody>
               {load ? <Loader /> : null}
-              {posts[0] ? (
+              {posts ? (
                 posts[0].id !== -1 ? (
                   showAll ? (
                     posts.map((post: PostType) => {

src/pages/Source.tsx

@@ -8,6 +8,7 @@ import { Link } from "react-router-dom";
 import { PostContext } from "../context/PostContext";
 
 // Icons
+import { FaRegPlusSquare } from "react-icons/fa";
 import { FaSourcetree } from "react-icons/fa";
 import { FaRegEdit } from "react-icons/fa";
 import { FaTrash } from "react-icons/fa";
@@ -103,6 +104,10 @@ const Source = () => {
               </tbody>
             </table>
           </div>
+          <Link to="/source/create" className="source__link">
+            <FaRegPlusSquare />
+            <span>Create source</span>
+          </Link>
         </div>
       </div>
     </main>