Merge pull request #188 from celluloid-camp/fix-video-player-annotation

fix logout and annotation refresh

docker-compose.yml

@@ -53,9 +53,7 @@ services:
  upload-scripts
  web-authn
  client-policies
- dynamic-scopes 
- volumes:
- - /etc/localtime:/etc/localtime:ro 
+ dynamic-scopes 
  depends_on:
  - postgres
  command: start

packages/client/src/App.tsx

@@ -13,20 +13,21 @@ import { MuiThemeProvider } from "@material-ui/core/styles";
 import ResetScroll from "components/ResetScroll";
 
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import { MuiPickersUtilsProvider } from "@material-ui/pickers";
 import en from "i18n/en";
 import fr from "i18n/fr";
 import * as i18next from "i18next";
-import MomentUtils from 'material-ui-pickers/utils/moment-utils';
+import MomentUtils from "material-ui-pickers/utils/moment-utils";
 import { initReactI18next } from "react-i18next";
 
 import { Provider } from "react-redux";
-import createAppStore from "store";
+import createAppStore, { history } from "store";
 import { Bright } from "utils/ThemeUtils";
 import LanguageDetector from "i18next-browser-languagedetector";
 
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { About } from "components/About";
+import { ConnectedRouter } from "connected-react-router";
 
 const queryClient = new QueryClient();
 
@@ -62,6 +63,7 @@ const styles = createStyles({
 const Content = () => {
  return (
  <Provider store={store}>
+ {/* <ConnectedRouter history={history}> */}
  <MuiThemeProvider theme={Bright}>
  <QueryClientProvider client={queryClient}>
  {/* <MuiPickersUtilsProvider utils={MomentUtils}> */}
@@ -70,7 +72,7 @@ const Content = () => {
  <React.Fragment>
  <UpdateIndicator />
  <BrowserRouter>
- <ResetScroll/>
+  <ResetScroll />
  <Routes>
  <Route
  path="/"
@@ -92,6 +94,7 @@ const Content = () => {
  {/* </MuiPickersUtilsProvider> */}
  </QueryClientProvider>
  </MuiThemeProvider>
+ {/* </ConnectedRouter> */}
  </Provider>
  );
 };

packages/client/src/actions/ProjectActions.ts

@@ -120,7 +120,7 @@ export const createProjectThunk =
  dispatch(triggerUpsertProjectLoading());
  return ProjectService.create(data)
  .then(project => {
- dispatch(push(`/projects/${project.id}`));
+ // dispatch(push(`/projects/${project.id}`));
  dispatch(discardNewVideo());
  return dispatch(succeedUpsertProject(project));
  })

packages/client/src/actions/Signin/UserActions.tsx

@@ -28,9 +28,12 @@ export const fetchCurrentUserThunk = () => (dispatch: Dispatch) => {
 };
 
 export const doLogoutThunk = () => (dispatch: Dispatch) => {
+
+ console.log("doLogoutThunk")
  return UserService
  .logout()
  .then(() => {
+ console.log("logout result")
  return dispatch(succeedCurrentUser());
  })
  .catch(error => {

packages/client/src/scenes/Home/components/NewProject/NewProjectContainer.tsx

@@ -53,6 +53,7 @@ import { AppState } from "types/StateTypes";
 import { PeertubeVideoInfo } from "types/YoutubeTypes";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 const styles = ({ spacing }: Theme) =>
  createStyles({
@@ -161,6 +162,7 @@ const NewProjectContainer: React.FC<Props> = ({
  onCancel,
  onNewTag,
 }) => {
+ const navigate = useNavigate();
  const { t } = useTranslation();
  const [state, setState] = useState<State>({
  project: {
@@ -216,6 +218,14 @@ const NewProjectContainer: React.FC<Props> = ({
  });
  };
 
+ const handleSubmit = async (project: ProjectCreateData)=>{
+ const {error, payload} = await onSubmit(project);
+ if(!error){
+ navigate(`/projects/${(payload as ProjectGraphRecord).id}`);
+ }
+
+
+ }
  if (video && user && user.role !== "Student") {
  return (
  <Dialog
@@ -501,7 +511,7 @@ const NewProjectContainer: React.FC<Props> = ({
  </Button>
  <Button
  onClick={() =>
- onSubmit({ ...project, videoId: video.id, host: video.host })
+ handleSubmit({ ...project, videoId: video.id, host: video.host })
  }
  color="primary"
  variant="contained"

packages/client/src/scenes/Project/scenes/Video/VideoComponent.tsx

@@ -261,7 +261,7 @@ export default connect(
  </TransitionGroup>
  </div>
  )}
- {isReady && user && canAnnotate(project, user) && (
+ {user && canAnnotate(project, user) && (
  <Zoom
  appear={true}
  exit={true}

packages/client/src/services/UserService.tsx

@@ -3,23 +3,23 @@ import {
  Credentials,
  TeacherConfirmData,
  TeacherConfirmResetPasswordData,
- StudentSignupData
-} from '@celluloid/types';
+ StudentSignupData,
+} from "@celluloid/types";
 
-import * as Constants from './Constants';
+import * as Constants from "./Constants";
 
 export default class {
  static login(credentials: Credentials) {
  const headers = {
- Accepts: 'application/json',
- 'Content-type': 'application/json'
+ Accepts: "application/json",
+ "Content-type": "application/json",
  };
  return fetch(`/api/users/login`, {
- method: 'POST',
+ method: "POST",
  headers: new Headers(headers),
- credentials: 'include',
- body: JSON.stringify(credentials)
- }).then(response => {
+ credentials: "include",
+ body: JSON.stringify(credentials),
+ }).then((response) => {
  if (response.status === 200) {
  return response.json();
  } else if (response.status === 400) {
@@ -33,16 +33,16 @@ export default class {
 
  static signup(data: TeacherSignupData) {
  const headers = {
- Accepts: 'application/json',
- 'Content-type': 'application/json'
+ Accepts: "application/json",
+ "Content-type": "application/json",
  };
 
  return fetch(`/api/users/signup`, {
- method: 'POST',
+ method: "POST",
  headers: new Headers(headers),
- credentials: 'include',
- body: JSON.stringify(data)
- }).then(response => {
+ credentials: "include",
+ body: JSON.stringify(data),
+ }).then((response) => {
  if (response.status === 201) {
  return response.json();
  } else if (response.status === 400) {
@@ -56,16 +56,16 @@ export default class {
 
  static studentSignup(data: StudentSignupData) {
  const headers = {
- Accepts: 'application/json',
- 'Content-type': 'application/json'
+ Accepts: "application/json",
+ "Content-type": "application/json",
  };
 
  return fetch(`/api/users/student-signup`, {
- method: 'POST',
+ method: "POST",
  headers: new Headers(headers),
- credentials: 'include',
- body: JSON.stringify(data)
- }).then(response => {
+ credentials: "include",
+ body: JSON.stringify(data),
+ }).then((response) => {
  if (response.status === 201) {
  return response.json();
  } else if (response.status === 400) {
@@ -79,16 +79,16 @@ export default class {
 
  static confirmSignup(data: TeacherConfirmData) {
  const headers = {
- Accepts: 'application/json',
- 'Content-type': 'application/json'
+ Accepts: "application/json",
+ "Content-type": "application/json",
  };
 
  return fetch(`/api/users/confirm-signup`, {
- method: 'POST',
+ method: "POST",
  headers: new Headers(headers),
- credentials: 'include',
- body: JSON.stringify(data)
- }).then(response => {
+ credentials: "include",
+ body: JSON.stringify(data),
+ }).then((response) => {
  if (response.status === 200) {
  return response.json();
  } else if (response.status === 400) {
@@ -102,16 +102,16 @@ export default class {
 
  static resetPassword(email: string) {
  const headers = {
- Accepts: 'application/json',
- 'Content-type': 'application/json'
+ Accepts: "application/json",
+ "Content-type": "application/json",
  };
 
  return fetch(`/api/users/reset-password`, {
- method: 'POST',
+ method: "POST",
  headers: new Headers(headers),
- credentials: 'include',
- body: JSON.stringify({ email })
- }).then(response => {
+ credentials: "include",
+ body: JSON.stringify({ email }),
+ }).then((response) => {
  if (response.status === 200) {
  return response.json();
  } else if (response.status === 400) {
@@ -125,16 +125,16 @@ export default class {
 
  static confirmResetPassword(data: TeacherConfirmResetPasswordData) {
  const headers = {
- Accepts: 'application/json',
- 'Content-type': 'application/json'
+ Accepts: "application/json",
+ "Content-type": "application/json",
  };
 
  return fetch(`/api/users/confirm-reset-password`, {
- method: 'POST',
+ method: "POST",
  headers: new Headers(headers),
- credentials: 'include',
- body: JSON.stringify(data)
- }).then(response => {
+ credentials: "include",
+ body: JSON.stringify(data),
+ }).then((response) => {
  if (response.status === 200) {
  return response.json();
  } else if (response.status === 400) {
@@ -148,16 +148,16 @@ export default class {
 
  static resendCode(email: string) {
  const headers = {
- Accepts: 'application/json',
- 'Content-type': 'application/json'
+ Accepts: "application/json",
+ "Content-type": "application/json",
  };
 
  return fetch(`/api/users/resend-code`, {
- method: 'POST',
+ method: "POST",
  headers: new Headers(headers),
- credentials: 'include',
- body: JSON.stringify({ email })
- }).then(response => {
+ credentials: "include",
+ body: JSON.stringify({ email }),
+ }).then((response) => {
  if (response.status === 200) {
  return response.json();
  } else if (response.status === 400) {
@@ -171,14 +171,14 @@ export default class {
 
  static me() {
  const headers = {
- Accepts: 'application/json'
+ Accepts: "application/json",
  };
 
  return fetch(`/api/users/me`, {
- method: 'GET',
+ method: "GET",
  headers: new Headers(headers),
- credentials: 'include'
- }).then(response => {
+ credentials: "include",
+ }).then((response) => {
  if (response.status === 200) {
  return response.json();
  } else if (response.status === 401) {
@@ -190,8 +190,8 @@ export default class {
 
  static logout() {
  return fetch(`/api/users/logout`, {
- method: 'PUT',
- credentials: 'include'
+ method: "PUT",
+ credentials: "include",
  });
  }
 }