diff --git a/client/constants.js b/client/constants.js index 57c85f4e85..4470d8eb29 100644 --- a/client/constants.js +++ b/client/constants.js @@ -41,6 +41,8 @@ export const DELETE_COLLECTION = 'DELETE_COLLECTION'; export const ADD_TO_COLLECTION = 'ADD_TO_COLLECTION'; export const REMOVE_FROM_COLLECTION = 'REMOVE_FROM_COLLECTION'; export const EDIT_COLLECTION = 'EDIT_COLLECTION'; +export const CHANGE_VISIBILITY = 'CHANGE_VISIBILITY'; +export const SET_PROJECT_VISIBILITY = 'SET_PROJECT_VISIBILITY'; export const DELETE_PROJECT = 'DELETE_PROJECT'; diff --git a/client/images/earth.svg b/client/images/earth.svg new file mode 100644 index 0000000000..bd71dbcd8a --- /dev/null +++ b/client/images/earth.svg @@ -0,0 +1,14 @@ + + + + \ No newline at end of file diff --git a/client/images/lock.svg b/client/images/lock.svg new file mode 100644 index 0000000000..70dc13f20e --- /dev/null +++ b/client/images/lock.svg @@ -0,0 +1,13 @@ + + + \ No newline at end of file diff --git a/client/modules/IDE/actions/project.js b/client/modules/IDE/actions/project.js index 1d8943336b..7b7e4fa9df 100644 --- a/client/modules/IDE/actions/project.js +++ b/client/modules/IDE/actions/project.js @@ -410,3 +410,45 @@ export function deleteProject(id) { }); }; } +export function changeVisibility(projectId, projectName, visibility) { + return (dispatch, getState) => { + const state = getState(); + + apiClient + .patch('/project/visibility', { projectId, visibility }) + .then((response) => { + if (response.status === 200) { + const { visibility: newVisibility } = response.data; + + dispatch({ + type: ActionTypes.CHANGE_VISIBILITY, + payload: { + id: response.data.id, + visibility: newVisibility + } + }); + + if (state.project.id === response.data.id) { + dispatch({ + type: ActionTypes.SET_PROJECT_VISIBILITY, + visibility: newVisibility + }); + dispatch({ + type: ActionTypes.SET_PROJECT_NAME, + name: response.data.name + }); + } + dispatch( + setToastText(`${projectName} is now ${newVisibility.toLowerCase()}`) + ); + dispatch(showToast(2000)); + } + }) + .catch((error) => { + dispatch({ + type: ActionTypes.ERROR, + error: error?.response?.data + }); + }); + }; +} diff --git a/client/modules/IDE/components/Header/MobileNav.jsx b/client/modules/IDE/components/Header/MobileNav.jsx index dfb0209c1b..5a49691da7 100644 --- a/client/modules/IDE/components/Header/MobileNav.jsx +++ b/client/modules/IDE/components/Header/MobileNav.jsx @@ -35,6 +35,7 @@ import { setLanguage } from '../../actions/preferences'; import Overlay from '../../../App/components/Overlay'; import ProjectName from './ProjectName'; import CollectionCreate from '../../../User/components/CollectionCreate'; +import { changeVisibility } from '../../actions/project'; const Nav = styled(Menubar)` background: ${prop('MobilePanel.default.background')}; @@ -75,6 +76,13 @@ const Title = styled.div` margin: 0; } + > section { + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + } + > h5 { font-size: ${remSize(13)}; font-weight: normal; @@ -212,6 +220,7 @@ const MobileMenuItem = ({ children, ...props }) => ( const MobileNav = () => { const project = useSelector((state) => state.project); const user = useSelector((state) => state.user); + const dispatch = useDispatch(); const { t } = useTranslation(); @@ -237,21 +246,48 @@ const MobileNav = () => { } const title = useMemo(resolveTitle, [pageName, project.name]); - + const userIsOwner = user?.username === project.owner?.username; const Logo = AsteriskIcon; + + const showPrivacyToggle = + project?.owner && title === project.name && userIsOwner; + const showOwner = project?.owner && title === project.name && !userIsOwner; + + const toggleVisibility = (e) => { + try { + const isChecked = e.target.checked; + dispatch( + changeVisibility( + project.id, + project.name, + isChecked ? 'Private' : 'Public' + ) + ); + } catch (error) { + console.log(error); + } + }; return (