add select visibility menu

yannicklescure · Apr 15, 2022 · 6edde2b · 6edde2b
1 parent b064179
commit 6edde2b
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 15 deletions.
diff --git a/client/src/components/Stories/Form.js b/client/src/components/Stories/Form.js
@@ -33,7 +33,6 @@ const Form = ({ from = undefined, article = undefined }) => {
       const slug = slugify(title);
       const timestamp = new Date().getTime();
       data = { ...story, content, title, userId, slug, timestamp };
-
     }
     setFormData(data);
     setLoading(false);
@@ -112,20 +111,24 @@ const Wrapper = styled.form`
   gap: 16px;
   margin-bottom: 16px;
 `;
-const Title = styled.input``;
+const Title = styled.input`
+  border: 1px solid ${COLORS.grey};
+  background-color: ${COLORS.light};
+`;
 const Text = styled.textarea`
   font-size: 16px;
   height: 34px;
   border-radius: 4px;
   padding: 8px 12px;
-  border: 1px solid ${COLORS.secondary};
+  border: 1px solid ${COLORS.grey};
   outline: none;
   line-height: 1.6;
   min-height: ${TEXTAREA_HEIGHT}px;
   resize: none;
   height: ${({ scrollHeight }) => scrollHeight}px;
   overflow: hidden;
   box-sizing: border-box;
+  background-color: ${COLORS.light};
 `;
 
 export default Form;
diff --git a/client/src/components/Stories/Select.js b/client/src/components/Stories/Select.js
@@ -0,0 +1,82 @@
+import { useContext } from "react";
+import styled from "styled-components";
+import { COLORS, MIN_CHAR } from "../../constants";
+import { StoryContext } from "../../contexts/StoryContext";
+import { capitalizeStr } from "../../helpers";
+
+const Select = ({ from = undefined, article = undefined }) => {
+  const {
+    state: { story },
+    actions: { initialStory, readyToPublish, updateStory, readyToUpdate },
+  } = useContext(StoryContext);
+
+  const handleChange = (event) => {
+    // console.log(event.target.value);
+    const data = { ...story, visibility: event.target.value.toLowerCase() };
+    // console.log(data);
+
+    if (data.content.length > MIN_CHAR && data.title.length > MIN_CHAR && data.imageSrc !== "undefined") {
+      from === 'editStory'
+        ? readyToUpdate({ story: data })
+        : readyToPublish({ story: data })
+    }
+    else if (data.content.length > MIN_CHAR || data.title.length > MIN_CHAR) {
+      updateStory({ story: data });
+    }
+    else {
+      initialStory();
+    }
+  }
+
+  const options = [
+    {
+      label: 'Public',
+      value: 'public'
+    },
+    {
+      label: 'Private',
+      value: 'private'
+    },
+    {
+      label: 'Unlisted',
+      value: 'unlisted'
+    },
+  ];
+
+  return (
+    <Wrapper>
+      <div>Visibility</div>
+      <StyledSelect 
+        onChange={handleChange}
+        value={capitalizeStr(story.visibility)}
+      >
+        {options.map((option) => (
+          <StyledOption 
+          key={option.value}
+          option={option.value}
+          >{option.label}</StyledOption>
+        ))}
+      </StyledSelect>
+    </Wrapper>
+  )
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-weight: bold;
+  gap: 12px;
+`;
+const StyledSelect = styled.select`
+  padding: 2px 4px;
+  font-size: 16px;
+  border: 1px solid ${COLORS.grey};
+  border-radius: 4px;
+  background-color: ${COLORS.light};
+  outline: none;
+`;
+const StyledOption = styled.option`
+`;
+
+export default Select;
diff --git a/client/src/components/buttons/UpdateStory.js b/client/src/components/buttons/UpdateStory.js
@@ -26,7 +26,7 @@ const UpdateStory = () => {
   }, [status]);
 
   const handleUpdateStory = () => {
-    console.log(story);
+    // console.log(story);
     setReady(false);
     sendingStoryToServer();
     setLoading(true);
@@ -39,7 +39,7 @@ const UpdateStory = () => {
     })
       .then((res) => res.json())
       .then((json) => {
-        console.log(json);
+        // console.log(json);
         if (json.status === 200) {
           initialStory();
           // receivedUserFromServer({ user: json.data });

diff --git a/client/src/contexts/StoryContext.js b/client/src/contexts/StoryContext.js
@@ -95,7 +95,7 @@ export const StoryProvider = ({ children }) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
   useEffect(() => {
-    console.log(localStorage);
+    // console.log(localStorage);
     if (localStorage?.title) {
       dispatch({
         hasLoaded: true,
@@ -161,7 +161,7 @@ export const StoryProvider = ({ children }) => {
   };
 
   const receivedStoryFromServer = (data) => {
-    console.log(data);
+    // console.log(data);
     setLocalStorage(data);
     dispatch({
       ...data,

diff --git a/client/src/pages/Article/Article.js b/client/src/pages/Article/Article.js
@@ -23,14 +23,14 @@ const ArticlePage = () => {
     let unmounted = false;
     let fetchUrl = `/api/stories/${username}/${slug}`;
     if (user._id) fetchUrl += `?_id=${user._id}`;
-    console.log(fetchUrl);
+    // console.log(fetchUrl);
     fetch(fetchUrl)
       .then((res) => {
         if (!unmounted) return res.json();
       })
       .then((response) => {
         if (!unmounted) {
-          console.log(response);
+          // console.log(response);
           const status = {
             404: () => {
               setVisibility('not-found');

diff --git a/client/src/pages/Article/Edit.js b/client/src/pages/Article/Edit.js
@@ -1,11 +1,11 @@
 import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import Loading from "../../components/Loading";
-import Article from "../../components/Article";
 import { UserContext } from "../../contexts/UserContext";
 import NotFound from "../NotFound";
 import Form from "../../components/Stories/Form";
 import Picture from "../../components/Picture";
+import Select from "../../components/Stories/Select";
 
 const ArticleEdit = () => {
   const params = useParams();
@@ -25,14 +25,14 @@ const ArticleEdit = () => {
     let unmounted = false;
     let fetchUrl = `/api/stories/${username}/${slug}`;
     if (user._id) fetchUrl += `?_id=${user._id}`;
-    console.log(fetchUrl);
+    // console.log(fetchUrl);
     fetch(fetchUrl)
       .then((res) => {
         if (!unmounted) return res.json();
       })
       .then((response) => {
         if (!unmounted) {
-          console.log(response);
+          // console.log(response);
           const status = {
             404: () => {
               setVisibility('not-found');
@@ -58,8 +58,9 @@ const ArticleEdit = () => {
 
   return (
     <>
-      <Form from="editStory" article={article} />
+      <Select from="editStory" article={article} />
       <Picture from="editStory" article={article} />
+      <Form from="editStory" article={article} />
     </>
   )
 }

diff --git a/client/src/pages/NewStory.js b/client/src/pages/NewStory.js
@@ -1,11 +1,13 @@
 import Picture from "../components/Picture";
 import Form from "../components/Stories/Form";
+import Select from "../components/Stories/Select";
 
 const NewStory = () => {
   return (
     <>
-      <Form from="story" />
+      <Select from="story" />
       <Picture from="story" />
+      <Form from="story" />
     </>
   )
 }

diff --git a/client/src/settings.js b/client/src/settings.js
@@ -16,7 +16,7 @@ export const initialStates = {
     content: "",
     userId: null,
     imageSrc: "undefined",
-    visibility: "unlisted",
+    visibility: "public",
     createdAt: "0", 
     updatedAt: "0",
   },