<commit_before>import React, { Component } from 'react';
import classnames from 'classnames';
import { deSig, uxToHex } from '/lib/util';
import { Route, Link } from "react-router-dom";

import { LoadingScreen } from './loading';
import { LinksTabBar } from '/components/lib/links-tabbar';
import SidebarSwitcher from './lib/icons/icon-sidebar-switch';
import { makeRoutePath } from '../lib/util';

export class SettingsScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: false,
      title: "",
      description: "",
      color: ""
    };

    this.changeTitle = this.changeTitle.bind(this);
    this.changeDescription = this.changeDescription.bind(this);
    this.changeColor = this.changeColor.bind(this);
    this.renderDelete = this.renderDelete.bind(this);
    this.renderMetadataSettings = this.renderMetadataSettings.bind(this);
  }

  componentDidMount() {
    if (this.props.resource) {
      this.setState({
        title: this.props.resource.metadata.title,
        description: this.props.resource.metadata.description,
        color: uxToHex(this.props.resource.metadata.color || '0x0')
      });
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const { props, state } = this;
    if (!!state.isLoading && !props.resource) {
      this.setState({
        isLoading: false
      }, () => {
        api.setSpinner(false);
        props.history.push('/~link');
      });
    }

    if (props.resource && (prevProps !== props)) {
      this.setState({
        title: props.resource.metadata.title,
        description: props.resource.metadata.description,
        color: uxToHex(props.resource.metadata.color || '0x0')
      });
    }
  }

  changeTitle() {
    this.setState({title: event.target.value})
  }

  changeDescription() {
    this.setState({description: event.target.value});
  }

  changeColor() {
    this.setState({color: event.target.value});
  }

  deleteCollection() {
    const { props, state } = this;

    api.deleteCollection(props.resourcePath);
    api.setSpinner(true);

    this.setState({
      isLoading: true
    });
  }

  renderDelete() {
    const { props, state } = this;

    const isManaged = ('/~/' !== props.groupPath.slice(0,3));

    let deleteClasses = 'dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray1-d pointer';
    let deleteText = 'Remove this collection from your collection list.';
    let deleteAction = 'Remove';
    if (props.amOwner && isManaged) {
      deleteText = 'Delete this collection. (All group members will no longer see this chat.)';
      deleteAction = 'Delete';
      deleteClasses = 'dib f9 ba pa2 b--red2 red2 pointer bg-gray0-d';
    }

    return (
      <div className="w-100 fl mt3">
        <p className="f8 mt3 lh-copy db">Delete Collection</p>
        <p className="f9 gray2 db mb4">{deleteText}</p>
        <a onClick={this.deleteCollection.bind(this)}
           className={deleteClasses}>{deleteAction + ' collection'}</a>
      </div>
    );
  }

  renderMetadataSettings() {
    const { props, state } = this;
    const { resource } = props;

    return(
      <div>
        <div className={"w-100 pb6 fl mt3 " + ((props.amOwner) ? '' : 'o-30')}>
        <p className="f8 mt3 lh-copy">Rename</p>
        <p className="f9 gray2 db mb4">Change the name of this collection</p>
        <div className="relative w-100 flex"
        style={{maxWidth: "29rem"}}>
          <input
            className={"f8 ba b--gray3 b--gray2-d bg-gray0-d white-d " +
            "focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3"}
            value={this.state.title}<commit_msg>link: additional safety checks in settings view<commit_after>import React, { Component } from 'react';
import classnames from 'classnames';
import { deSig, uxToHex } from '/lib/util';
import { Route, Link } from "react-router-dom";

import { LoadingScreen } from './loading';
import { LinksTabBar } from '/components/lib/links-tabbar';
import SidebarSwitcher from './lib/icons/icon-sidebar-switch';
import { makeRoutePath } from '../lib/util';

export class SettingsScreen extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isLoading: false,
      title: "",
      description: "",
      color: ""
    };

    this.changeTitle = this.changeTitle.bind(this);
    this.changeDescription = this.changeDescription.bind(this);
    this.changeColor = this.changeColor.bind(this);
    this.renderDelete = this.renderDelete.bind(this);
    this.renderMetadataSettings = this.renderMetadataSettings.bind(this);
  }

  componentDidMount() {
    if ((this.props.resource) && ("metadata" in this.props.resource)) {
      this.setState({
        title: this.props.resource.metadata.title,
        description: this.props.resource.metadata.description,
        color: uxToHex(this.props.resource.metadata.color || '0x0')
      });
    }
  }

  componentDidUpdate(prevProps, prevState) {
    const { props, state } = this;
    if (!!state.isLoading && !props.resource) {
      this.setState({
        isLoading: false
      }, () => {
        api.setSpinner(false);
        props.history.push('/~link');
      });
    }

    if (((this.props.resource) && ("metadata" in this.props.resource))
      && (prevProps !== props)) {
      this.setState({
        title: props.resource.metadata.title,
        description: props.resource.metadata.description,
        color: uxToHex(props.resource.metadata.color || '0x0')
      });
    }
  }

  changeTitle() {
    this.setState({title: event.target.value})
  }

  changeDescription() {
    this.setState({description: event.target.value});
  }

  changeColor() {
    this.setState({color: event.target.value});
  }

  deleteCollection() {
    const { props, state } = this;

    api.deleteCollection(props.resourcePath);
    api.setSpinner(true);

    this.setState({
      isLoading: true
    });
  }

  renderDelete() {
    const { props, state } = this;

    const isManaged = ('/~/' !== props.groupPath.slice(0,3));

    let deleteClasses = 'dib f9 black gray4-d bg-gray0-d ba pa2 b--black b--gray1-d pointer';
    let deleteText = 'Remove this collection from your collection list.';
    let deleteAction = 'Remove';
    if (props.amOwner && isManaged) {
      deleteText = 'Delete this collection. (All group members will no longer see this chat.)';
      deleteAction = 'Delete';
      deleteClasses = 'dib f9 ba pa2 b--red2 red2 pointer bg-gray0-d';
    }

    return (
      <div className="w-100 fl mt3">
        <p className="f8 mt3 lh-copy db">Delete Collection</p>
        <p className="f9 gray2 db mb4">{deleteText}</p>
        <a onClick={this.deleteCollection.bind(this)}
           className={deleteClasses}>{deleteAction + ' collection'}</a>
      </div>
    );
  }

  renderMetadataSettings() {
    const { props, state } = this;
    const { resource } = props;

    if (!("metadata" in resource)) {
      resource.metadata = {};
    }

    return(
      <div>
        <div className={"w-100 pb6 fl mt3 " + ((props.amOwner) ? '' : 'o-30')}>
        <p className="f8 mt3 lh-copy">Rename</p>
        <p className="f9 gray2 db mb4">Change the name of this collection</p>
        <div className="relative w-100 flex"
        style={{maxWidth: "29rem"}}>
          <input
            className={"f8 ba b--gray3 b--gray2-d bg-gray0-d white-d " +
            "focus-b--black focus-b--white-d pa3 db w-100 flex-auto mr3"}
            value={this.state.title}
{'fraction_non_alphanumeric': 0.1481580709979906, 'fraction_numerical': 0.013663764233087742, 'mean_word_length': 2.7386079118678017, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 35, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5258', 'n_tokens_mistral': 2337, 'n_tokens_neox': 2298, 'n_words': 508}