edit selectors and styling

src/Components/PageHeader.jsx

@@ -1,8 +1,9 @@
 import plus from '../assets/plus.svg'
 import pencil from '../assets/pencil.svg'
 import trash from '../assets/trash.svg'
-import { Link } from 'react-router-dom'
+import { Link, Form, useNavigate } from 'react-router-dom'
 export default function (props) {
+    const navigate = useNavigate()
     return (
         <header id="page-header">
             <h2>
@@ -12,17 +13,36 @@ export default function (props){
                 {props.heading}
             </h1>
             <span id="icon-container">
-            <Link to={`${props.url}/create`} >
+                
+                    <button onClick={() => { navigate(`${props.url}/create`) }}>
                         <img src={plus} />
-            </Link>
+                    </button>
-            <Link to={`${props.url}${props?.id?`/${props.id}`:""}/edit`} >
+                    <button onClick={() => { navigate(`${props.url}${props?.id ? `/${props.id}` : ""}/edit`) }}>
                         <img src={pencil} />
-            </Link>
+                    </button>
-            <Link to={`${props.url}${props?.id?`/${props.id}`:""}/delete`} >
+                    <Form
-            <img src={trash}/>
+                    method="post"
-            </Link>  
+                    action="delete"
+                    onSubmit={(event) => {
+                        if (
+                            !confirm(
+                                "Please confirm you want to delete this record."
+                            )
+                        ) {
+                            event.preventDefault();
+                        }
+                    }}
+                >
+                    <button type="submit"
+                    ><img src={trash} /></button>
+                </Form>
+
+
             </span>
 
+
+
+
         </header>
     )
 }

src/main.jsx

@@ -16,6 +16,9 @@ import { action as deleteStoryAction } from './routes/deleteStory';
 import { action as deletePublicationAction } from './routes/deletePublication';
 import EditSubmission, {action as editSubmissionAction} from './routes/editSubmission';
 import CreateSubmission, {action as createSubmissionAction} from './routes/createSubmission';
+import EditStoryRoot from './routes/editStoryRoot';
+import EditPublicationRoot from './routes/editPublicationRoot';
+import EditSubmissionRoot from './routes/editSubmissionRoot';
 import './styles/index.css'
 import {
   createBrowserRouter,
@@ -28,6 +31,11 @@ const router = createBrowserRouter([
     element: <Root/>,
     errorElement: <ErrorPage />,
     children:[
+      {
+        index:true,
+        element:<Submissions/>,
+        loader:submissionsLoader
+      },
       {
         path: "/stories",
         element: <Stories/>,
@@ -61,18 +69,33 @@ const router = createBrowserRouter([
         loader: storiesLoader,
         action: editStoryAction
       },
+      {
+        path:"/story/edit",
+        element: <EditStoryRoot/>,
+        loader: storiesLoader
+      },
       {
         path:"/publication/:publicationId/edit",
         element: <EditPublication/>,
         loader: publicationsLoader,
         action: editPublicationAction
       },
+      {
+        path:"/publication/edit",
+        element: <EditPublicationRoot/>,
+        loader: publicationsLoader
+      },
       {
         path:"/submission/:submissionId/edit",
         element: <EditSubmission/>,
         loader: editSubmissionLoader,
         action: editSubmissionAction
       },
+      {
+        path:"/submission/edit",
+        element: <EditSubmissionRoot/>,
+        loader: submissionsLoader
+      },
       {
         path:"/story/create",
         element: <CreateStory/>,

src/routes/createPublication.jsx

@@ -20,6 +20,7 @@ export default function CreatePublication(){
         <div id="page-container">
         <PageHeader super={`Publication`} heading="CREATE"/>
         <Form method="post" id="new-story-form">
+            <label>Title:
             <input
                 placeholder='title'
                 aria-label="Title"
@@ -27,6 +28,8 @@ export default function CreatePublication(){
                 name="title"
                 defaultValue=""
             />
+            </label>
+            <label>Website:
             <input
                 placeholder='website'
                 aria-label="Website:"
@@ -35,6 +38,8 @@ export default function CreatePublication(){
                 name="link"
                 defaultValue=""
             />
+            </label>
+            <label>Query after (days):
             <input
                 placeholder='1000'
                 aria-label="Query after:"
@@ -43,6 +48,11 @@ export default function CreatePublication(){
                 name="query_after_days"
                 defaultValue=""
             />
+            </label>
+           
+            
+            
+            
         <button type="submit">SAVE</button>
         <button type="button">CANCEL</button>
         </Form>

src/routes/editPublicationRoot.jsx

@@ -0,0 +1,26 @@
+import { Form, Link, useLoaderData } from "react-router-dom";
+import Dropdown from "../Components/Dropdown";
+import { useState } from "react";
+export default function EditPublicationRoot (){
+const {publications} = useLoaderData()
+const publicationsOptions = publications?.map(row=>[row.id,row.title])
+const [id,setId]=useState(1)
+const handleChange = (event) => {
+    const value = event.target.value
+    console.log(value)
+    setId(value)
+}
+    return(
+        <>
+        <div id="page-container">
+        <Form >
+        <h2>Which publication would you like to edit?</h2>
+
+        <Dropdown name="pub_id" value={id} options={publicationsOptions} handleChange={handleChange}/>
+        <br/>
+        <Link to={`/publication/${id}/edit`}>OK</Link>
+        </Form>
+        </div>
+        </>
+    )
+}

src/routes/editStoryRoot.jsx

@@ -0,0 +1,26 @@
+import { Form, Link, useLoaderData } from "react-router-dom";
+import Dropdown from "../Components/Dropdown";
+import { useState } from "react";
+export default function EditStoryRoot (){
+const {stories} = useLoaderData()
+const storiesOptions = stories?.map(row=>[row.id,row.title])
+const [id,setId]=useState(1)
+const handleChange = (event) => {
+    const value = event.target.value
+    console.log(value)
+    setId(value)
+}
+    return(
+        <>
+        <div id="page-container">
+        <Form >
+        <h2>Which story would you like to edit?</h2>
+
+        <Dropdown name="story_id" value={id} options={storiesOptions} handleChange={handleChange}/>
+        <br/>
+        <Link to={`/story/${id}/edit`}>OK</Link>
+        </Form>
+        </div>
+        </>
+    )
+}

src/routes/editSubmissionRoot.jsx

@@ -0,0 +1,28 @@
+import { Form, Link, useLoaderData } from "react-router-dom";
+import Dropdown from "../Components/Dropdown";
+import { useState } from "react";
+export default function EditSubmissionRoot (){
+const {submissions} = useLoaderData()
+const submissionsOptions = submissions?.map(row=>[row.id,row.date_submitted])
+const [id,setId]=useState(1)
+const handleChange = (event) => {
+    const value = event.target.value
+    console.log(value)
+    setId(value)
+}
+    return(
+        <>
+        <div id="page-container">
+        <Form >
+        <h2>Which submission would you like to edit?</h2>
+        <label>Date submitted:
+        <Dropdown name="sub_id" value={id} options={submissionsOptions} handleChange={handleChange}/>
+
+        </label>
+        <br/>
+        <Link to={`/submission/${id}/edit`}>OK</Link>
+        </Form>
+        </div>
+        </>
+    )
+}

src/routes/publication.jsx

@@ -22,22 +22,7 @@ export default function Publication() {
                 sortByDefault='date_submitted'
                 header='Submissions:'
             ></Table>
-            <Link to={`/publication/${publicationData.id}/edit`}>EDIT</Link>
+           
-            <Form
-  method="post"
-  action="delete"
-  onSubmit={(event) => {
-    if (
-      !confirm(
-        "Please confirm you want to delete this record."
-      )
-    ) {
-      event.preventDefault();
-    }
-  }}
->
-  <button type="submit">Delete</button>
-</Form>
             </div>
         </>
     )

src/routes/root.jsx

@@ -11,6 +11,7 @@ export function Root() {
         <div id="container">
           {navigation==="loading"?<Loader/>:""}
         <div id="sidebar">
+          <h1>Submission <br/> Manager</h1> version 1.0
           <ul>
             <li>
             <Link to={`stories`}>STORIES</Link>

src/routes/story.jsx

@@ -24,24 +24,8 @@ export default function Story() {
           header='Submissions:'
         ></Table>
 
-        <Form
+        
-          method="post"
+        
-          action="delete"
-          onSubmit={(event) => {
-            if (
-              !confirm(
-                "Please confirm you want to delete this record."
-              )
-            ) {
-              event.preventDefault();
-            }
-          }}
-        >
-          <button type="submit">Delete</button>
-        </Form>
-        <Form>
-           <Link to={`/story/${storyData.id}/edit`}>EDIT</Link>
-        </Form>
       </div>
     </>
   )

src/styles/Form.css

@@ -8,6 +8,7 @@ form{
     padding:2rem;
     width:max-content;
     margin:auto;
+    text-align: center;
 
 }
 
@@ -44,8 +45,8 @@ input,select {
     background-color: var(--fg-color);
     box-shadow: var(--box-shadow-light);   
 }
-form button, form a{
+form button, form a, #page-header button{
-    float:right;
+    display:inline;
     font-size: 3.2rem;
     padding: 1rem;
     border-radius: 2rem;
@@ -53,8 +54,9 @@ form button, form a{
     margin:1rem;
     margin-top: 4rem;
     background-color: hsl(var(--color-3),var(--light));
+    
 }
-form button:hover{
+form button:hover, form a:hover, #page-header button:hover{
     background-color: hsl(var(--color-3),var(--lightest));
 }
 

src/styles/PageHeader.css

@@ -2,16 +2,33 @@
     width: 5rem;
     height: 5rem;
     margin: 1rem;
-    filter: invert(83%) sepia(12%) saturate(387%) hue-rotate(129deg) brightness(89%) contrast(89%);}
+    filter: invert(83%) sepia(12%) saturate(387%) hue-rotate(129deg) brightness(89%) contrast(89%);
+}
+
 #page-header h1 {
     display: inline;
 }
 
+#page-header form {
+    padding: 0;
+    background-color: transparent;
+    box-shadow: none;
+    display:inline;
+
+}
+
 #page-header {
     display: flex;
     width: 100%;
     justify-content: space-between;
+    align-items: center;
 }
 
-#icon-container{
+#icon-container a{
+    padding:0;
+}
+#page-header h1{
+    font-size:6rem;
+    text-shadow: var(--text-shadow-light);
+    margin-right: 5rem;
 }

src/styles/Sidebar.css

@@ -0,0 +1,17 @@
+#sidebar{   
+    padding: 3rem;
+    background-image: linear-gradient(to right,hsl(var(--color-3),var(--medium))85%,hsla(var(--color-2),var(--light),0%));
+    color: white;
+    min-height: 100vh;
+}
+#sidebar a{
+    color:white;
+}
+#sidebar h1{
+    text-shadow: var(--text-shadow-dark);
+    font-size:4.5rem;
+}
+#sidebar a:hover{
+    text-shadow:
+    0 0 1em hsla(var(--accent),var(--off-white),50%);
+  }

src/styles/Variables.css

@@ -9,11 +9,14 @@
     --off-white:98%;
     --lightest:90%;
     --light:85%;
+    --medium:60%;
     --dark:50%;
     --darkest:20%;
 
     --box-shadow:10px 10px 30px 0px hsla(var(--color-5),var(--dark));
     --box-shadow-light:5px 5px 30px 0px hsla(var(--color-5),var(--light));
+    --text-shadow-light: 5px 5px 4px hsla(var(--color-5),var(--light));
+    --text-shadow-dark: 3px 3px 15px hsla(var(--color-5),var(--dark),70%);
 
 
 }

src/styles/index.css

@@ -2,6 +2,7 @@
 @import 'Variables.css';
 @import 'Form.css';
 @import 'PageHeader.css';
+@import 'Sidebar.css';
 *,
 *::before,
 *::after {
@@ -24,6 +25,20 @@ article ol,
 article ul {
     list-style-position: inside;
 }
+a{
+  text-decoration: none;
+}
+a:visited,a:link{
+  text-decoration: none;
+  color: black;
+  font-weight: bold;
+}
+a:hover{
+  text-shadow:
+  1px 1px 2px white,
+  0 0 3em white,
+  0 0 1em hsl(var(--accent),var(--off-white));
+}
 html {
   font-size: 62.5%; 
   -webkit-text-size-adjust: none;
@@ -45,7 +60,7 @@ html {
   
   #container{
     display:grid;
-    grid-template-columns: 20rem 1fr ;
+    grid-template-columns: 35rem 1fr ;
   }
   #sidebar{
     font-size: 3.2rem;