<commit_before><template>
  <div class="componentModalMyListShare">
    <div v-if="!hasUrl" class="wrapper">
      <h2 class="heading">Share this list</h2>
      <div class="field">
        <label class="label">Give this list a name <span class="required">(required, minimum 3 characters)</span></label>
        <input v-model="name" class="input" type="text" maxlength="35" placeholder="e.g. Julia's favorite games">
      </div>
      <p class="disclaimer"><strong>Please note:</strong> Once you create a link, the list will be permanent. If you want to make changes, you will need to make a new list.</p>
      <div class="actions">
        <button @click="close" class="button -cancel">Cancel</button> <button @click="getLink" class="button -commit" :class="isReady ? '': 'is-not-ready'">Get a shareable link for this list</button>
      </div>
    </div>
    <div v-else>
      <h2 class="heading">Save this link</h2>
      <p class="disclaimer"><strong>Important:</strong> This link will not be available after you close this window. Please make sure you copy it and save it somewhere.</p>
      <div><input class="input -url" type="text" :value="'https://www.stateofthedapps.com/lists/' + listUrl + '/' + slug" readonly></div>
      <div class="actions"><button @click="close" class="button -commit">I have saved this link!</button></div>
    </div>
  </div>
</template>

<script>
import { trackPublicListCreate } from '~/helpers/mixpanel'
import axios from '~/helpers/axios'

export default {
  computed: {
    isReady () {
      if (this.name.length > 2) {
        return true
      } else {
        return false
      }
    }
  },
  data () {
    return {
      dapps: [],
      hasUrl: false,
      name: '',
      listUrl: '',
      slug: ''
    }
  },
  methods: {
    close () {
      const modal = {
        component: '',
        mpData: {},
        props: {}
      }
      this.$store.dispatch('setSiteModal', modal)
    },
    getLink () {
      if (this.isReady) {
        const dapps = this.$localStorage.get('myList')
        if (dapps) {
          this.dapps = dapps.split(',')
        }
        const data = {
          name: this.name,
          dapps: this.dapps
        }
        axios.post('lists', data)
          .then((response) => {
            const data = response.data
            this.listUrl = data.list_url
            this.slug = data.slug
            this.hasUrl = true
            const action = trackPublicListCreate(this.listUrl, this.slug)
            this.$mixpanel.track(action.name, action.data)
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/css/settings';

.actions {
  margin: 20px 0 10px;
}

.button {
  padding: 12px 15px;
  margin: 0 5px;
  &.-commit {
    background: $color--black;
    color: $color--white;
    box-shadow: 0 0 20px rgba($color--black, .2);
    transition: opacity .2s ease;
    &.is-not-ready {
      opacity: .3;
      cursor: auto;
    }
  }
  &.-cancel {
    text-decoration: underline;
  }
}

.disclaimer {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  text-align: left;
  padding: 20px 0;
}

.heading {
  @include title-1;
  font-size: 3.5rem;
  text-align: center;
  margin: 0;
}

.field {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.input {
  padding: 15px 10px;
  border: none;
  background: $color--white;
  box-shadow: 0 5px 20px rgba($color--black, .15);
  width: 100%;
  &.-url {
    text-align: center;
  }
}

.label {
  text-align: left;
  display: block;
  margin-top: 15px;
  margin-bottom: 8px;
}

.required {
  color: $color--error;
}
</style>
<commit_msg>Add user select for my list share url<commit_after><template>
  <div class="componentModalMyListShare">
    <div v-if="!hasUrl" class="wrapper">
      <h2 class="heading">Share this list</h2>
      <div class="field">
        <label class="label">Give this list a name <span class="required">(required, minimum 3 characters)</span></label>
        <input v-model="name" class="input" type="text" maxlength="35" placeholder="e.g. Julia's favorite games">
      </div>
      <p class="disclaimer"><strong>Please note:</strong> Once you create a link, the list will be permanent. If you want to make changes, you will need to make a new list.</p>
      <div class="actions">
        <button @click="close" class="button -cancel">Cancel</button> <button @click="getLink" class="button -commit" :class="isReady ? '': 'is-not-ready'">Get a shareable link for this list</button>
      </div>
    </div>
    <div v-else>
      <h2 class="heading">Save this link</h2>
      <p class="disclaimer"><strong>Important:</strong> This link will not be available after you close this window. Please make sure you copy it and save it somewhere.</p>
      <div><input class="input -url" type="text" :value="'https://www.stateofthedapps.com/lists/' + listUrl + '/' + slug" readonly></div>
      <div class="actions"><button @click="close" class="button -commit">I have saved this link!</button></div>
    </div>
  </div>
</template>

<script>
import { trackPublicListCreate } from '~/helpers/mixpanel'
import axios from '~/helpers/axios'

export default {
  computed: {
    isReady () {
      if (this.name.length > 2) {
        return true
      } else {
        return false
      }
    }
  },
  data () {
    return {
      dapps: [],
      hasUrl: false,
      name: '',
      listUrl: '',
      slug: ''
    }
  },
  methods: {
    close () {
      const modal = {
        component: '',
        mpData: {},
        props: {}
      }
      this.$store.dispatch('setSiteModal', modal)
    },
    getLink () {
      if (this.isReady) {
        const dapps = this.$localStorage.get('myList')
        if (dapps) {
          this.dapps = dapps.split(',')
        }
        const data = {
          name: this.name,
          dapps: this.dapps
        }
        axios.post('lists', data)
          .then((response) => {
            const data = response.data
            this.listUrl = data.list_url
            this.slug = data.slug
            this.hasUrl = true
            const action = trackPublicListCreate(this.listUrl, this.slug)
            this.$mixpanel.track(action.name, action.data)
          })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~assets/css/settings';

.actions {
  margin: 20px 0 10px;
}

.button {
  padding: 12px 15px;
  margin: 0 5px;
  &.-commit {
    background: $color--black;
    color: $color--white;
    box-shadow: 0 0 20px rgba($color--black, .2);
    transition: opacity .2s ease;
    &.is-not-ready {
      opacity: .3;
      cursor: auto;
    }
  }
  &.-cancel {
    text-decoration: underline;
  }
}

.disclaimer {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
  text-align: left;
  padding: 20px 0;
}

.heading {
  @include title-1;
  font-size: 3.5rem;
  text-align: center;
  margin: 0;
}

.field {
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.input {
  padding: 15px 10px;
  border: none;
  background: $color--white;
  box-shadow: 0 5px 20px rgba($color--black, .15);
  width: 100%;
  &.-url {
    text-align: center;
    user-select: all;
  }
}

.label {
  text-align: left;
  display: block;
  margin-top: 15px;
  margin-bottom: 8px;
}

.required {
  color: $color--error;
}
</style>

{'fraction_non_alphanumeric': 0.15762665198237885, 'fraction_numerical': 0.017345814977973568, 'mean_word_length': 2.3964469378214117, 'pattern_counts': {'":': 0, '<': 91, '<?xml version=': 0, '>': 95, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, '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': '3927972', 'n_tokens_mistral': 2538, 'n_tokens_neox': 2421, 'n_words': 617}