diff --git a/client/src/components/Stories/Form.js b/client/src/components/Stories/Form.js index a272e76..246f642 100644 --- 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,13 +111,16 @@ 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; @@ -126,6 +128,7 @@ const Text = styled.textarea` 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 new file mode 100644 index 0000000..7e28c91 --- /dev/null +++ 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 ( + +
Visibility
+ + {options.map((option) => ( + {option.label} + ))} + + + ) +} + +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; \ No newline at end of file diff --git a/client/src/components/buttons/UpdateStory.js b/client/src/components/buttons/UpdateStory.js index 7683771..bd0d16f 100644 --- 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 index c2ed96d..9006d25 100644 --- 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 index b009d67..ba373fa 100644 --- 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 index 3e80f66..ef8a047 100644 --- 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 ( <> -
+ + ) } diff --git a/client/src/settings.js b/client/src/settings.js index c491a2b..1694ff0 100644 --- 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", },